<template>
  <div>
    <el-dialog
      title="商品明细"
      v-if="goodsFormVisible"
      :visible.sync="goodsFormVisible"
      :before-close="close"
      width="66%"
    >
      <el-form inline ref="goodsForm" label-position="top" :model="formData" :rules="rules">
        <el-row :gutter="40">
          <el-col :span="24">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="基本信息" name="1">
                <el-form-item label="商品编码：" class="form-item">
                  <span>{{formData.skuCode}}</span>
                </el-form-item>
                <el-form-item label="商品名称：" class="form-item">
                  <span>{{formData.skuName}}</span>
                </el-form-item>
                <el-form-item label="包装规格：" class="form-item">
                  <span>{{formData.packDesc}}</span>
                </el-form-item>
                <el-form-item label="单位：" class="form-item">
                  <span>{{formData.uomDesc}}</span>
                </el-form-item>
                <el-form-item label="库位：" class="form-item">
                  <span>{{formData.locCode}}</span>
                </el-form-item>
                <el-form-item label="跟踪号：" class="form-item">
                  <span>{{formData.traceId }}</span>
                </el-form-item>
                <el-form-item label="批次号：" class="form-item">
                  <span>{{formData.lotNum}}</span>
                </el-form-item>
                <el-form-item label="质检规则：" class="form-item">
                  <span>{{formData.qcRuleName}}</span>
                </el-form-item>
                <el-form-item label="质检项：" class="form-item">
                  <span>{{formData.itemGroupName}}</span>
                </el-form-item>
                <el-form-item label="可质检数：" class="form-item">
                  <span>{{formData.qtyAvailQcUom}}</span>
                </el-form-item>
                <el-form-item label="可质检数EA：" class="form-item">
                  <span>{{formData.qtyAvailQcEa}}</span>
                </el-form-item>
                <el-form-item label="可质检重量：" class="form-item">
                  <span>{{formData.availQcWeight}}</span>
                </el-form-item>
                <el-form-item label="质检合格数EA：" class="form-item">
                  <span>{{formData.qtyQcQuaEa}}</span>
                </el-form-item>
                <el-form-item label="质检不合格数EA：" class="form-item">
                  <span>{{formData.qtyQcUnquaEa}}</span>
                </el-form-item>
                <el-form-item label="计划质检数：" class="form-item">
                  <span>{{formData.qtyPlanQcUom}}</span>
                </el-form-item>
                <el-form-item label="计划质检数EA：" class="form-item">
                  <span>{{formData.qtyPlanQcEa}}</span>
                </el-form-item>
                <el-form-item label="质检合格重量：" class="form-item">
                  <span>{{formData.qcQuaWeight}}</span>
                </el-form-item>
                <el-form-item label="质检不合格重量：" class="form-item">
                  <span>{{formData.qcUnquaWeight}}</span>
                </el-form-item>
                <el-form-item label="合格数EA：" class="form-item">
                  <span>{{formData.qtyQuaEa}}</span>
                </el-form-item>
                <el-form-item label="不合格数EA：" class="form-item">
                  <span>{{formData.qtyUnquaEa}}</span>
                </el-form-item>
                <el-form-item label="合格率：" class="form-item">
                  <span>{{formData.pctQua}}</span>
                </el-form-item>
                <el-form-item label="商品重量：" class="form-item">
                  <span>{{formData.skuWeight}}</span>
                </el-form-item>
                <el-form-item label="合格重量：" class="form-item">
                  <span>{{formData.quaWeight}}</span>
                </el-form-item>
                <el-form-item label="不合格重量：" class="form-item">
                  <span>{{formData.unquaWeight}}</span>
                </el-form-item>
                <el-form-item label="质检处理建议：" class="form-item">
                  <span>{{formData.qcSuggest}}</span>
                </el-form-item>
                <el-form-item label="行号：" class="form-item">
                  <span>{{formData.lineNo}}</span>
                </el-form-item>
                <el-form-item label="实际质检处理：" prop="qcActSuggest">
                  <el-select v-model="formData.qcActSuggest">
                    <el-option value="A01" label="全部当良品处理"></el-option>
                    <el-option value="A02" label="良品和不良品分开处理，未检部分当良品"></el-option>
                    <el-option value="B01" label="全部当不良品"></el-option>
                    <el-option value="B02" label="良品和不良品分开处理，未检部分当不良品"></el-option>
                    <el-option value="C01" label="升级为全检处理（针对抽检）"></el-option>
                    <el-option value="D01" label="现场决定"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="上架规则" prop="ruleCode">
                  <PublicQuery
                  title="上架规则"
                  single
                  :rowData.sync="paruleData"
                  baseUrl="/inb_web/inbweb"
                  cfgKey="inbWmsPaRule"
                  :valueField.sync="formData.ruleCode"
                ></PublicQuery>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-col>
        </el-row>

        <div>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="批次属性" name="2">
              <LotAttrs :formData="formData" :queryParams="lotAttrsParams"></LotAttrs>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="质检项" name="3">
               <el-table
                  :data="tableData">
                 <table-column label="行号" prop="lineNo"></table-column>
                  <table-column label="质检项名称" prop="qcItem"></table-column>
                  <table-column label="质检方式" prop="qcWay"></table-column>
                  <table-column label="质检参考标准" prop="qcRef"></table-column>
                  <table-column label="备注" prop="remark"></table-column>
                </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-form>

      <div class="mrg-t">
        <div v-if="!(formData.status==='20')">
          <el-button v-auth="50100020205" type="primary" @click="handleConfirm">质检确认</el-button>
          <!-- <el-button v-auth="50100020206" type="primary" @click="handleConfirmAdd">质检确认(下一条)</el-button> -->
        </div>
        <div v-if="!(formData.status==='20'&&formData.qcPhase==='RCV'||formData.status!=='20')">
          <el-button v-auth="50100020206" type="primary" @click="handleCreate">生成上架任务</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {

  data () {
    return {
      activeNames: ['1', '2', '3'],
      formData: {},
      lotAttrsParams: {},
      quaList: [],
      paruleData: {}, // 上架规则
      date: '',
      rules: {
        qcActSuggest: [
          { required: true, message: '实际质检处理必填', trigger: 'change' }
        ],
        ruleCode: [
          { required: true, message: '上架规则必填', trigger: 'change' }
        ],
      }
    }
  },
  props: {
    goodsFormVisible: Boolean,
    code: String,
    ids: String,
    qcNo: String,
    status: String,
    tableData: Array,
    currentRow: {
      type: Object,
      default: () => ({})
    },
  },
  methods: {
    close () {
      this.$emit('close')
    },

    // 质检确认
    handleConfirm () {
      const url = this.$API.stockIn.Manage.getQucComfirm

      const param = {
        qcNo: this.qcNo,
        lineNos: this.ids,
        paRule: this.formData.ruleCode,
        qcActSuggest: this.formData.qcActSuggest
      }
      this.$https.post(url, param).then(res => {
        if (res.success) {
          this.$emit('editOk')
          this.$refs.goodsForm.resetFields()
        }
      })
    },

    // 生成上架任务
    handleCreate () {
      const url = this.$API.stockIn.Manage.getQucCreate
      const param = {
        qcNo: this.qcNo,
        lineNos: this.ids,
      }
      this.$https.post(url, param).then(res => {
        if (res.success) {
          this.$emit('editOk')
          this.$refs.goodsForm.resetFields()
        }
      })
    },

    // 选商品前校验
    beforeSelectSku () {
      return {
        queryParams: {
          ownerCodeParam: this.code
        }
      }
    },
  },

  watch: {
    currentRow: {
      handler (item) {
        this.formData = { ...item }
        this.lotAttrsParams = {
          skuCode: item.skuCode,
          ownerCode: item.ownerCode
        }
      },
      deep: true
    },
  }
}
</script>
<style lang="scss" scoped>
.mrg-t {
  margin-top: 20px;
}
.form-item {
  width: 260px;
}
</style>
