<template>
<el-dialog
  class="creator"
  title="盘点任务"
  width="70%"
  :visible="show"
  @close="close"
>
  <el-form
    inline
    ref="form"
    label-position="top"
    :model="formData"
    :rules="rules"
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基本信息" name="1">
        <template v-if="mode === 'confirm'" v-for="item in detailFields">
          <div class="detail-item" :key="item.prop">
            <span class="detail-item__label">{{item.label}} :&nbsp;&nbsp;</span>
            <span class="detail-item__value">{{item.key ? $utils.keyMatcher(detailData[item.prop], $keys.inventory.count[item.key]).name : detailData[item.prop]}}</span>
          </div>
        </template>
        <div>
          <el-form-item label="货主" prop="ownerCode">
            <PublicQuery
              single
              title="货主"
              cfgKey="invWmsCustomer"
              :disabled="mode === 'duplicate'"
              :baseUrl="baseUrl"
              :valueField.sync="formData.ownerCode"
              :textField.sync="formData.ownerName"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="商品" prop="skuCode">
            <PublicQuery
              single
              title="商品"
              cfgKey="invWmsSku"
              :disabled="mode === 'duplicate'"
              :baseUrl="baseUrl"
              :valueField.sync="formData.skuCode"
              :textField.sync="formData.skuName"
              :before="skuBefore"
              @change="skuChange"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="库位" prop="locCode">
            <PublicQuery
              single
              title="库位"
              cfgKey="invWmsLoc"
              :disabled="mode === 'duplicate'"
              :baseUrl="baseUrl"
              :valueField.sync="formData.locCode"
              :textField.sync="formData.locCode"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="跟踪号" prop="traceId">
            <el-input v-model="formData.traceId" :disabled="mode === 'duplicate'"></el-input>
          </el-form-item>
          <el-form-item label="盘点数EA" prop="qtyCountEa">
            <el-input v-model="formData.qtyCountEa"></el-input>
          </el-form-item>
          <el-form-item label="盘点重量" prop="weight">
            <el-input v-model="formData.weight"></el-input>
          </el-form-item>
        </div>
      </el-collapse-item>
      <el-collapse-item title="批次属性" name="2">
        <LotAttrs
          :disabled="mode === 'duplicate'"
          :formData="formData"
          :queryParams="lotAttrsParams"
        ></LotAttrs>
      </el-collapse-item>
    </el-collapse>
  </el-form>
  <div slot="footer">
    <el-button type="primary" @click="confirm">盘点确认</el-button>
    <el-button v-if="mode !== 'confirm'" type="primary" @click="confirmAndCreate">盘点确认并新增</el-button>
  </div>
</el-dialog>
</template>

<script>
export default {
  name: 'TaskCreator',
  props: ['show', 'detailData', 'mode', 'countNo'],
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.formData = { ...val }
        console.log(this.mode)
        if (this.mode !== 'create') {
          this.lotAttrsParams = {
            ownerCode: val.ownerCode,
            skuCode: val.skuCode,
          }
        }
      }
    },
  },
  created () {
  },
  mounted () {
  },

  data () {
    return {
      lotAttrsParams: {}, // 批次属性查询条件
      // 输入框
      detailFields: [
        { label: '任务ID', prop: 'countId' },
        { label: '盘点状态', prop: 'status', key: 'status' },
        { label: '批次号', prop: 'lotNum' },
        { label: '库存数EA', prop: 'qty' },
        { label: '损益EA', prop: 'qtyDiff' },
        { label: '库存重量', prop: 'countWeight' },
        { label: '损益重量', prop: 'diffWeight' },
      ],
      activeNames: ['1', '2'],
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      formData: {},
      rules: {
        ownerCode: [{ required: true, message: '必填', trigger: 'change' }],
        skuCode: [{ required: true, message: '必填', trigger: 'change' }],
        locCode: [{ required: true, message: '必填', trigger: 'change' }],
        traceId: [{ required: true, message: '必填', trigger: 'change' }],
        qtyCountEa: [{ required: true, message: '必填', trigger: 'change' }],
        weight: [{ required: true, message: '必填', trigger: 'change' }],
      },
    }
  },
  methods: {
    // 关闭
    close () {
      this.$emit('close')
    },
    // 盘点确认
    confirm () {
      this.confirmAndCreate('needClose')
    },
    // 盘点确认并新增
    confirmAndCreate (needClose) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const url = this.$API.inventory.count.addConfirmCount
          const param = {
            countNo: this.countNo,
            confirmModel: JSON.stringify(this.formData)
          }
          this.$https.post(url, param)
            .then(() => {
              this.$emit('refreshForm')
              needClose === 'needClose' && this.close()
              this.$refs.form.resetFields()
            })
        }
      })
    },
    // 选商品前
    skuBefore () {
      return {
        queryParams: {
          ownerCodeParam: this.formData.ownerCode,
        }
      }
    },
    // 商品变化
    skuChange (obj) {
      this.lotAttrsParams = {
        ownerCode: obj.ownerCode,
        skuCode: obj.skuCode,
      }
    },
  },
}
</script>

<style lang="scss" scoped>
  .el-collapse-item {
    margin-bottom: 20px;
  }
  .detail-item {
    display: inline-table;
    width: 25%;
    font-size: 14px;
    padding: 7px;
  }
</style>
