<!--
 * @Description: 售后服务 弹框
 * @Author: dijia
 * @Date: 2021/12/03 14:00
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="售后服务"
      width="500px"
      custom-class="shop_mall_dialog"
    >
      <div style="padding-bottom: 1px;">
        <div class="content">
          <el-row style="margin-top:10px;">
            <el-col :span="4" :offset="5">
              <p>类型</p>
            </el-col>
            <el-col :span="10">
              <el-radio v-model="radio" label="02">
                退货
              </el-radio>
              <el-radio v-model="radio" label="01">
                换货
              </el-radio>
            </el-col>
          </el-row>
          <!-- <el-row style="margin-top:20px;">
            <el-col :span="4" :offset="5">
              <p>数量</p>
            </el-col>
            <el-col :span="10">
              <div class="count">
                <span @click="minus">
                  <i class="el-icon-minus" />
                </span>
                <input v-model="number" type="number" @keyup="inputChange">
                <span @click="add">
                  <i class="el-icon-plus" />
                </span>
              </div>
            </el-col>
          </el-row> -->
          <el-row style="margin-top:20px;">
            <el-col :span="4" :offset="5">
              <p>{{ radio==='01' ? '换货' : '退货' }}原因</p>
            </el-col>
            <el-col :span="10">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row v-if="isShow" style="margin-top:20px;">
            <el-col :span="4" :offset="5">
              <p>收货方式</p>
            </el-col>
            <el-col :span="10">
              <el-select v-model="code" placeholder="请选择">
                <el-option
                  v-for="item in typelist"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-col>
          </el-row>
          <div class="dialog_footer">
            <el-button type="purple" @click="confirmBtn">
              确 定
            </el-button>
            <el-button style="margin-left:30px;" @click="dialogVisible = false">
              取 消
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// api
import {
  returnJdComp,
  confirmOrderBack
} from '@/api/shoppingmall/order'
import { orderGrounpMixin } from '../allOrder/mixins/orderGroupMixins'
export default {
  name: 'AdvertManageDialog',
  components: {
  },
  mixins: [orderGrounpMixin],
  props: {
  },
  data() {
    return {
      // 弹框
      dialogVisible: false,
      // 商品售后数量
      number: 0,
      // 订单中商品的数量
      newNumber: 0,
      // 参数对象
      saleDatas: {
        orderDetailId: '',
        id: '',
        backReason: '',
        status: '',
        backAttachment: ''
      },
      // 京东收货方式
      isShow: false,
      // 京东收货方式列表
      typelist: [],
      // 售后类型 01 换货 02 退货
      radio: '01',
      // 售后原因
      value: '',
      code: '' // 收货方式code
    }
  },
  computed: {
  },
  watch: {
    // 判断dialog关闭,重置
    'dialogVisible'(val) {
      if (!val) {
        this.radio = '01'
        this.number = 1
        this.value = ''
        this.code = ''
      }
    }
  },
  methods: {
    // 打开弹框
    openDialog(data) {
      const item = data.item
      const val = data.val
      const goodslist = data.goodslist
      this.number = val.number
      this.newNumber = val.number
      if (item.status === '11') {
        this.saleDatas.backAttachment = val.id
        this.saleDatas.id = item.id
        this.saleDatas.orderDetailId = goodslist.orderId
      } else {
        this.saleDatas.id = item.id
        this.saleDatas.backAttachment = val.id
        this.saleDatas.orderDetailId = ''
      }
      this.dialogVisible = true
      if (goodslist.goodsDepartName === '京东商城') {
        this.isShow = true
        returnJdComp(val.supplierCOrderId, val.productCode).then(res => {
          this.typelist = [...res.data]
        })
      }
    },
    // 确认售后
    confirmBtn() {
      this.saleDatas.status = this.radio
      this.saleDatas.backReason = this.value
      this.saleDatas.supplierTrackingNumber = this.code
      this.saleDatas.backNum = this.number
      confirmOrderBack(this.saleDatas).then(res => {
        this.$emit('callBack')
        this.$message.success('提交成功')
        this.dialogVisible = false
      })
    },
    // input值改变
    inputChange(val) {
      if (this.number < 1) {
        this.$message.warning('售后商品数量不能为0')
        this.number = 1
        return false
      }
      if (this.number > this.newNumber) {
        this.$message.warning('售后商品数量不能超过购买商品数量')
        this.number = this.newNumber
        return false
      }
    },
    // 减数量
    minus() {
      this.number--
      if (this.number < 1) {
        this.$message.warning('售后商品数量不能为0')
        this.number = 1
        return false
      }
    },
    // 加数量
    add() {
      this.number++
      if (this.number > this.newNumber) {
        this.$message.warning('售后商品数量不能超过购买商品数量')
        this.number = this.newNumber
        return false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.dialog_footer{
  margin-top: 20px;
  margin-bottom: 10px;
  height: 40px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.count {
  display: flex;
  span {
    width: 35px;
    height: 33px;
    line-height: 33px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    background-color: #f7f7f7;
    border: 1px solid #ebebeb;
    i {
      color: rgb(201, 10, 10);
    }
  }
  input {
    width: 130px;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(228, 228, 228, 1);
    border-bottom: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
  }
}
</style>
