<template>
  <div class="work-order__wrapper">
    <el-form>
      <el-table size="mini" border :data="list">
        <el-table-column prop="orderCode" label="销售订单" width="150px" show-overflow-tooltip />
        <el-table-column prop="outCode" label="发货单" width="145px" show-overflow-tooltip />
        <el-table-column prop="outChildCode" label="发货工单" width="155px" show-overflow-tooltip />
        <el-table-column prop="send_wsm_name" label="发货仓库名称" min-width="180px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-popover placement="top" width="380" trigger="hover">
              <ul>
                <h3>发货仓库</h3>
                <li>编码 : {{ scope.row.send_wsm_code }}</li>
                <li>负责人 : {{ scope.row.send_contactor_name }}</li>
                <li>所在供应商编码 : {{ scope.row.send_supplierNo }}</li>
                <li>所在供应商名称 : {{ scope.row.send_supplierName }}</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 prop="return_num" label="退货数量" width="110px" show-overflow-tooltip />

        <el-table-column label="退货销售仓库名称" prop="return_wsm_name" min-width="180px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-popover placement="top" width="380" trigger="hover">
              <ul>
                <h3>退货销售仓库</h3>
                <li>编码 : {{ scope.row.return_wsm_code }}</li>
                <li>负责人 : {{ scope.row.return_contactor_name }}</li>
                <li>所在供应商编码 : {{ scope.row.return_supplierNo }}</li>
                <li>所在供应商名称 : {{ scope.row.return_supplierName }}</li>
              </ul>
              <i slot="reference" class="el-icon-warning-outline" />
            </el-popover>

            <span>{{ scope.row.return_wsm_name }}</span>
          </template>
        </el-table-column>

        <el-table-column width="130px">
          <template slot="header">
            <span style="color:red;margin-right:2px">*</span>销售仓入库数量
          </template>
          <template slot-scope="scope">
            <el-form-item>
              <digital-input
                :values="list[scope.$index].can_sell_num"
                :placeholder="'销售仓入库数量'"
                :min="0"
                :disabled="false"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="''"
                @reschange="onNumberChange($event, scope.$index,'can_sell_num')"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column width="130px">
          <template slot="header">
            <span style="color:red;margin-right:2px">*</span>次品仓入库数量
          </template>
          <template slot-scope="scope">
            <el-form-item>
              <digital-input
                :values="list[scope.$index].defective_num"
                :placeholder="'次品仓入库数量'"
                :min="0"
                :disabled="false"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="''"
                @reschange="onNumberChange($event, scope.$index,'defective_num')"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column width="130px">
          <template slot="header">
            <span style="color:red;margin-right:2px">*</span>丢失数量
          </template>
          <template slot-scope="scope">
            <el-form-item>
              <digital-input
                :values="list[scope.$index].loss_num"
                :placeholder="'loss_num'"
                :min="0"
                :disabled="false"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="''"
                @reschange="onNumberChange($event, scope.$index,'loss_num')"
              />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button class="fr" style="margin:10px 0px" size="mini" type="primary" @click="onSetOrderReturnChild">保存</el-button>
  </div>
</template>

<script>
import resToken from '@/mixins/resToken'
import asyncRequest from '@/apis/service/sellOut/sellAfterApply'
export default {
  name: 'WorkOrder',
  mixins: [resToken],
  props: ['sitem'],
  data: () => ({
    loading: false,
    list: []
  }),
  watch: {
    sitem: {
      async handler() {
        if (!this.sitem || !this.sitem.outCode) {
          return
        }

        const { data, code, message } = await asyncRequest.afterChild({ returnCode: this.sitem.returnCode })
        switch (code) {
          case 0:
            this.list = data.list.map(item => ({ ...item, can_sell_num: 0, defective_num: 0, loss_num: 0 }))
            break
          default:
            this.$message.warning(message)
            break
        }
      },
      immediate: true
    }
  },
  methods: {
    onNumberChange(num, index, prop) {
      this.$set(this.list, index, {
        ...this.list[index],
        [prop]: num
      })
    },
    async onSetOrderReturnChild() {
      let total = 0
      const list = this.list.map(({ id, can_sell_num, defective_num, loss_num }) => {
        total += (can_sell_num + defective_num + loss_num)
        return ({
          id,
          loss_num,
          can_sell_num,
          defective_num
        })
      })

      if (Number(this.sitem.out_num) !== total) {
        this.$message.warning('销售仓入库数量、次品仓入库数量、丢失数量相加必须等于发货数量')
        return
      }

      this.subLoading = true
      const { code, message } = await asyncRequest.deliveryOrderReturnChild({ list, returnCode: this.sitem.returnCode })

      this.subLoading = false

      switch (code) {
        case 0:
          this.$emit('reload')
          break
        default:
          this.$message.warning(message)
          break
      }
    }
  }
}
</script>
