<template>
<el-dialog
  class="creator"
  width="80%"
  :visible="showCreator"
  @close="close"
>
  <el-form
    inline
    label-position="top"
    ref="form"
    :model="formData"
    :rules="rules"
    :disabled="mode === 'detail'"
  >
    <el-form-item label="冻结ID">
      <el-input v-model="formData.holdId" disabled></el-input>
    </el-form-item>
    <el-form-item label="冻结方式" prop="holdType">
      <el-select v-model="formData.holdType" @change="holdChange">
        <template v-for="item in $keys.inventory.block.holdType">
          <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="冻结原因" prop="reasonCode">
      <el-select v-model="formData.reasonCode">
        <template v-for="item in $keys.inventory.block.reasonCode">
          <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="原因描述" prop="reason">
      <el-input v-model="formData.reason"></el-input>
    </el-form-item>
    <template v-if="formData.holdType === '1' || formData.holdType === '2'">
      <el-form-item label="货主" prop="ownerCode">
        <PublicQuery
          title="货主"
          single
          cfgKey="invWmsCustomer"
          :baseUrl="baseUrl"
          :valueField.sync="formData.ownerCode"
          :textField.sync="formData.ownerName"
        ></PublicQuery>
      </el-form-item>
    </template>
    <template v-if="formData.holdType === '2'">
      <el-form-item label="商品" prop="skuCode">
        <PublicQuery
          title="商品"
          single
          cfgKey="invWmsSku"
          :baseUrl="baseUrl"
          :valueField.sync="formData.skuCode"
          :textField.sync="formData.skuName"
          :before="skuBefore"
        ></PublicQuery>
      </el-form-item>
    </template>
    <template v-if="formData.holdType === '3'">
      <el-form-item label="批次号" prop="lotNum">
        <el-input v-model="formData.lotNum"></el-input>
      </el-form-item>
    </template>
    <template v-if="formData.holdType === '4'">
      <el-form-item label="库位" prop="locCode">
        <PublicQuery
          title="库位"
          single
          cfgKey="invWmsLoc"
          :baseUrl="baseUrl"
          :valueField.sync="formData.locCode"
          :textField.sync="formData.locCode"
        ></PublicQuery>
      </el-form-item>
    </template>
    <template v-if="formData.holdType === '5'">
      <el-form-item label="跟踪号" prop="traceId">
        <el-input v-model="formData.traceId"></el-input>
      </el-form-item>
    </template>
    <template v-for="item in checkboxes">
      <el-form-item :key="item.prop" :label="item.label">
        <el-checkbox v-model="formData[item.prop]" true-label="Y" false-label="N"></el-checkbox>
      </el-form-item>
    </template>
  </el-form>

  <div class="operation-info" v-if="mode === 'detail'">
    <el-col :span="6">创建人登录名:{{detailData.createLoginName}}</el-col>
    <el-col :span="6">创建时间: {{detailData.createTime}}</el-col>
    <el-col :span="6">修改人登录名: {{detailData.modifyLoginName}}</el-col>
    <el-col :span="6">修改时间: {{detailData.modifyTime}}</el-col>
  </div>
  <div slot="footer">
    <el-button v-if="mode === 'create'" v-auth="50300030201" type="primary" @click="confirm">冻结</el-button>
    <el-button v-if="mode === 'detail'" v-auth="50300030201" type="primary" @click="remove">解冻</el-button>
  </div>
</el-dialog>
</template>

<script>
// import mixins from './mixins'
import routerMixins from '../../routerMixins'

const ruleObj = { required: true, message: '必填', trigger: 'change' }
export default {
  mixins: [ routerMixins ],
  props: {
    detailData: {
      type: Object,
      default: () => { return {} },
    },
    mode: {
      type: String,
      default: 'create',
    },
    showCreator: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.formData = { ...val }
      }
    },
  },
  created () {
  },
  mounted () {
  },

  data () {
    return {
      formData: {},
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      // 表单验证
      checkboxes: [
        { label: '是否可调整', prop: 'isAllowAd' },
        { label: '是否可移动', prop: 'isAllowMv' },
        { label: '是否可转移', prop: 'isAllowTf' },
        { label: '是否可取消收货', prop: 'isAllowCancleRec' },
      ],
      rules: {
        holdType: [ruleObj],
        reasonCode: [ruleObj],
        reason: [ruleObj],
        ownerCode: [ruleObj],
        skuCode: [ruleObj],
        lotNum: [ruleObj],
        locCode: [ruleObj],
        traceId: [ruleObj],
      }
    }
  },
  methods: {
    // 冻结方式变化时
    holdChange () {
      this.formData.ownerName = ''
      this.formData.skuName = ''
      this.formData.ownerCode = ''
      this.formData.skuCode = ''
      this.formData.lotNum = ''
      this.formData.locCode = ''
      this.formData.traceId = ''
    },
    // 关闭
    close () {
      this.$emit('close')
      this.$refs.form.resetFields()
    },
    // 冻结按钮
    confirm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const url = this.$API.inventory.block.hold
          const param = { wmHoldEntityBean: JSON.stringify(this.formData) }
          this.$https.post(url, param)
            .then(data => {
              this.close()
              this.$emit('createDone') // 通知父组件新增完毕
            })
        }
      })
    },
    // 商品框
    skuBefore () {
      if (!this.formData.ownerCode) {
        this.$message.error('请先选择货主')
      } else {
        return {
          queryParams: {
            multiOwnerCodeParam: this.formData.ownerCode
          }
        }
      }
    },
    // 解冻
    remove () {},
  },
}
</script>

<style lang="scss" scoped>
/deep/
.el-dialog__body {
  margin-top: 20px;
  overflow: auto;
  border-bottom: 1px solid #ddd;
}
.el-collapse-item {
  margin-bottom: 20px;
}
.creator {
  &__info {
    margin-bottom: 20px;
  }
  &__info--base {
    display: flex;
    justify-content: space-between;
    > .el-collapse {
      width: 50%;
      &:first-child {
        margin-right: 20px;
      }
    }
  }
}
</style>
