<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
           <a-col :span="24">
            <a-form-model-item label="领料人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ling">
              <a-input v-model="model.ling" placeholder="请输入领料人"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="领料环节" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lingSysOrgCode">
              <a-input v-model="model.lingSysOrgCode" placeholder="请输入领料环节"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partNumber">
              <a-input v-model="model.partNumber" placeholder="请输入编号" @blur="autoInput" @keyup.enter.native="autoInput"
                @input="inputMathen">
              </a-input>
              <div class="select" v-if="isShow" :style="`height:${menuHeight}`" @mouseenter="flag = true"
                @mouseleave="flag = false">
                <div v-for="(version, index) in versionList" :key="index" @click.stop="onClickOut(version)">
                  {{ version }}
                </div>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="品名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productName">
              <a-input v-model="model.productName" placeholder="请输入品名" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spec">
              <a-input v-model="model.spec" placeholder="请输入规格" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <a-input v-model="model.type" placeholder="请输入型号" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="采购性质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buyingClassify">
              <j-dict-select-tag type="radio" v-model="model.buyingClassify" dictCode="buying_classify"
                placeholder="请选择采购性质" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operNumber">
              <a-input-number v-model="model.operNumber" :min="0" :max="9999" :precision="0" :formatter="limitNumber"
                :parser="limitNumber" placeholder="请输入数量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >    <!-- v-if="workOrderFlg" -->
            <a-form-model-item label="工作令" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workOrder">
              <a-input v-model="model.workOrder" placeholder="请输入工作令"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="出库时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operTime">
              <j-date placeholder="请选择出库时间" v-model="model.operTime" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction, getPartNumber } from '@/api/manage'
import { validateDuplicateValue, formatDate } from '@/utils/util'

export default {
  name: 'TblDepotOutForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      versionList: [],
      isShow: false,
      flag: false,
      model: {
        operTime: formatDate(new Date().getTime(), 'yyyy-MM-dd'),
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        partNumber: [{ required: true, message: '请输入零件编号!' }],
        productName: [{ required: true, message: '请输入品名!' }],
        spec: [{ required: true, message: '请输入规格!' }],
        type: [{ required: true, message: '请输入型号!' }],
        buyingClassify: [{ required: true, message: '请输入采购性质!' }],
        operNumber: [{ required: true, message: '请输入数量!' }],
        workOrder: [{ required: true, message: '请输入工作令!' }],
        ling:[{ required: true, message: '请输入领料人!' }],
        lingSysOrgCode:[{ required: true, message: '请输入领料环节!' }],
      },
      url: {
        add: '/depot/tblDepot/add',
        edit: '/depot/tblDepot/edit',
        queryById: '/depot/tblDepot/queryById',
        queryMaterial: '/depot/tblDepot/queryMaterialByPartNum',
        queryPartNumber: '/depot/tblDepot/queryPartNumber'
      },
      // workOrderFlg: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    // 下拉框的高度
    menuHeight() {
      return this.versionList.length * 50 > 150
        ? 150 + 'px'
        : `${this.versionList.length * 50}px`
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    onClickOut(val) {
      this.model.partNumber = val
      this.$emit('partNumber', this.model.partNumber)
      this.isShow = false
      this.flag = false
      this.autoInput();
    },
    onChange() {
      this.$emit('partNumber', this.model.partNumber)
      this.isShow = false
    },
    onBlur() {
      this.isShow = this.flag
    },
    limitNumber(value) {
      if (typeof value === 'string') {
        return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
      } else if (typeof value === 'number') {
        return !isNaN(value) ? String(value).replace(/\./g, '') : 0
      } else {
        return 0
      }
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    async autoInput() {
      if (this.isShow) {
        // this.isShow = false
        return
      }
      this.confirmLoading = true
      const param = { partNum: this.model.partNumber }
      let res = await getAction(this.url.queryMaterial, param)
      console.log(res)
      if (!res.result) {
        this.$message.error('编号有误，请重新输入或扫码！')
        this.model.productName = ''
        this.model.spec = ''
        this.model.type = ''
        this.model.buyingClassify = ''
        this.confirmLoading = false
        this.isShow = false;
        return
      }
      // if (res.result.meterialType === '1') {
      //   this.workOrderFlg = true;
      // } else {
      //   this.workOrderFlg = false;
      // }
      this.model.productName = res.result.productName
      this.model.spec = res.result.spec
      this.model.type = res.result.type
      this.model.buyingClassify = res.result.buyingClassify
      this.model.depotType = '出库'
      this.confirmLoading = false
      this.isShow = false;
      this.$nextTick(() => { })
    },
    async inputMathen() {
      const param = { partNum: this.model.partNumber }
      let res = await getPartNumber(this.url.queryPartNumber, param)
      this.versionList = res.result;
      this.isShow = true;
    }
  },
}
</script>

<style >
.select {
  width: 100%;
  position: absolute;
  background: #fff;
  z-index: 99999;
  overflow: auto;
  left: 0px;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 0 10px;
}
</style>