<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="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="onClick(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">
            <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-col :span="24">
            <a-form-model-item label="选择机器人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="robotName">
              <a-select  size="small"  v-model="model.robotName"  placeholder="请选择机器人" allowClear>
                <a-select-option v-for="(item,index) in robotOptions" :key="index" :value="item.id">{{ item.value }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24"> 
            <a-form-model-item label="选择目标点位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pointId">
              <a-select  size="small"  v-model="model.pointId"  placeholder="请选择目标点位" allowClear>
                <a-select-option v-for="(item,index) in pointOptions" :key="index" :value="item.pointId">{{ item.pointName }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24"> 
            <a-form-model-item label="选择机器人任务流" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="templateId">
              <a-select  size="small"  v-model="model.templateId"  placeholder="请选择机器人任务流" allowClear style="width: 100%">
                <a-select-option v-for="(item,index) in templateIdOptions" :key="index" :value="item.id">{{ item.value }}</a-select-option>
              </a-select>
            </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'
import {getRobotPoints} from '@/api/RobotPoints'
export default {

  name: 'TblDepotInForm',
  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: '请输入数量!' }],
        robotName: [{ required: true, message: '请选择机器人!' }],
        pointId: [{ required: true, message: '请选择目标点位!' }],
        templateId: [{ required: true, message: '请选择机器人任务!' }],
      },
      robotOptions:[
        {id:"SCWM00JS48YF01635",value:"开放收物上舱"},
        {id:"SCSK08C0450100861",value:"送物上舱"}
      ],
      pointOptions:[],
      templateIdOptions:[
      {id:"dock_cabin_to_move_and_lift_down",value:"调度底盘去某个上仓举起并移动到另外点位放下"},
      {id:"docking_cabin_and_docking_down",value:"调度底盘移动上舱举起并移动到另外一个舱位放下"},
      {id:"docking_cabin_and_move_target",value:"调度底盘移动上舱举起并移动到目标点"},
      {id:"move_target_and_lift_down",value:"托举上舱移动到目的地并且放下上舱"},
      {id:"dock_cabin_and_move_target_with_wait_action",value:"让某舱到某目的地"}
      ],
      url: {
        add: '/depot/tblDepot/add',
        edit: '/depot/tblDepot/edit',
        queryById: '/depot/tblDepot/queryById',
        queryMaterial: '/depot/tblDepot/queryMaterialByPartNum',
        queryPartNumber: '/depot/tblDepot/queryPartNumber',
        // queryRobotPoints: '/robotPoints/tblRobotPoints/queryList'
      },
     
    }
  },
  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))
    // this.getRobotPoints()
  },
  methods: {
    getRobotPoints(){
        var that = this;
        getRobotPoints().then((res)=>{
          console.log('res===',res)
          if(res.success){
            this.pointOptions = res.result
          }
        });
    },
    onClick(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'
          }
          console.log(this.model)
          // return
          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)
      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
      }
      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>