<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-tooltip />
      <el-table-column prop="outChildCode" label="发货工单编号" width="160px" show-overflow-tooltip />
      <el-table-column prop="send_supplierName" label="发货仓库名称" width="160px" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-popover placement="top" width="360" trigger="hover">
            <i slot="reference" class="el-icon-warning-outline" />
            <ul>
              <li><h3>发货仓库</h3></li>
              <li>
                <span>编号:</span><span>{{ scope.row.send_wsm_code }}</span>
              </li>
              <li>
                <span>名称:</span><span>{{ scope.row.send_wsm_name }}</span>
              </li>
              <li>
                <span>负责人:</span>
                <span>{{ scope.row.return_contactor_name }}</span>
              </li>
              <li>
                <span>供应商编码:</span><span>{{ scope.row.send_supplierName }}</span>
              </li>
              <li>
                <span>供应商名称:</span><span>{{ scope.row.send_supplierNo }}</span>
              </li>
            </ul>
          </el-popover>
          <span>{{ scope.row.send_supplierName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="send_supplierName" label="退货仓库名称" width="160px" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-popover placement="top" width="360" trigger="hover">
            <i slot="reference" class="el-icon-warning-outline" />
            <ul>
              <li><h3>发货仓库</h3></li>
              <li>
                <span>编号:</span><span>{{ scope.row.return_wsm_code }}</span>
              </li>
              <li>
                <span>名称:</span><span>{{ scope.row.return_wsm_name }}</span>
              </li>
              <li>
                <span>负责人:</span>
                <span>{{ scope.row.return_contactor_name }}</span>
              </li>
              <li>
                <span>供应商编码:</span><span>{{ scope.row.returnsupplierName }}</span>
              </li>
              <li>
                <span>供应商名称:</span><span>{{ scope.row.return_supplierNo }}</span>
              </li>
            </ul>
          </el-popover>
          <span>{{ scope.row.return_supplierName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="return_num" label="退货数量" width="120px" show-overflow-tooltip />
      <el-table-column prop="can_sell_num" label="销售仓入库数量" min-width="160px" show-overflow-tooltip />
      <el-table-column prop="defective_num" label="次品仓入库数量" min-width="160px" show-overflow-tooltip />
      <el-table-column prop="loss_num" label="丢失数量" min-width="160px" show-overflow-tooltip />
      <!-- <el-table-column prop="send_supplierName" label="发货仓库供应商编码" width="160px" show-overflow-tooltip /> -->
    </el-table>
  </div>
</template>

<script>
import asyncRequest from '@/apis/service/sellOut/sellAfterApply'
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.orderReturnChildList({ outCode: this.sitem.outCode, is_authority: '0', type: '1' })
        console.log(data)
        switch (code) {
          case 0:
            this.list = data.list.map(item => ({ ...item, 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>
