<template>
  <div class="work-order__wrapper">
    <el-table size="mini" border :data="list">
      <el-table-column prop="orderCode" label="销售订单" width="160px" show-overflow-tooltip />
      <el-table-column prop="outCode" label="发货单" width="160px" show-overflow-toolti />
      <el-table-column prop="outChildCode" label="发货工单" width="160px" show-overflow-tooltip />
      <el-table-column label="发货仓库名称" prop="wsm_name" min-width="180px" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-popover placement="top" width="380" trigger="hover">
            <h3>发货仓库</h3>
            <ul>
              <li>编码 : {{ scope.row.send_wsm_code }}</li>
              <li>负责人 : {{ scope.row.send_contactor_name }}</li>
              <li>所在供应商名称 : {{ scope.row.send_supplierName }}</li>
              <li>所在供应商编码 : {{ scope.row.send_supplierNo }}</li>
            </ul>
            <i slot="reference" class="el-icon-warning-outline" />
          </el-popover>
          <span>{{ scope.row.send_wsm_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="退货数量" prop="return_num" width="110px" show-overflow-tooltip />
      <el-table-column label="退货仓库" align="center">
        <el-table-column label="仓库名称" prop="return_wsm_name" show-overflow-tooltip min-width="160px" />
        <el-table-column label="所在供应商名称" prop="return_supplierName" width="160px" show-overflow-tooltip />
        <el-table-column label="所在供应商编码" prop="return_supplierNo" width="160px" show-overflow-tooltip />
        <el-table-column label="负责人" width="110px" prop="return_contactor_name" show-overflow-tooltip />
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import asyncRequest from '@/apis/service/sellOut/sellReturn'
import companyHelper from '@/mixins/companyHelper'
import resToken from '@/mixins/resToken'
export default {
  name: 'WorkOrder',
  mixins: [resToken, companyHelper],
  props: ['sitem'],
  data: () => ({
    list: [],
    loading: false,
    subLoading: false,
    companyNo: ''
  }),
  computed: {
    paramsRules() {
      return ({
        return_wsm_code: [{
          required: true,
          message: '请选择退货仓库',
          trigger: 'change'
        }]
      })
    }
  },
  watch: {
    sitem: {
      async handler() {
        console.log(this.sitem)
        if (!this.sitem || !this.sitem.outCode) {
          return
        }

        const { data, code, message } = await asyncRequest.child_list({ outCode: this.sitem.outCode })
        console.log(data)
        switch (code) {
          case 0:
            this.list = data.list.map(item => ({ ...item, return_num: 0, return_wsm_code: '' }))
            break
          default:
            this.$message.warning(message)
            break
        }
      },
      immediate: true
    }
  },
  methods: {
    onStockChange({ code, supplierName, supplierNo, contactor_name } = {}, index) {
      this.$set(this.list, index, {
        ...this.list[index],
        return_wsm_code: code ? [code] : '',
        returnSupplierName: supplierName,
        returnSupplierNo: supplierNo,
        returnSupplierNameContactor: contactor_name
      })

      this.$nextTick(() => this.$refs.formRef.validate())
    },
    onNumberChange(return_num, index) {
      this.$set(this.list, index, {
        ...this.list[index],
        return_num
      })
    }
  }
}
</script>
