<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
        <el-col :span="24">
          <el-form-item label="试剂名称" prop="name">
            <!-- <el-input v-model="formData.name" placeholder="请输入试剂名称" clearable :style="{width: '100%'}" /> -->
            <el-autocomplete
              v-model="formData.value"
              class="inline-input"
              :style="{width: '100%'}"
              :fetch-suggestions="querySearchAsync"
              clearable
              placeholder="请输入试剂名称"
              @select="handleSelect"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="英文名称" prop="english_name">
            <el-input
              v-model="formData.english_name"
              placeholder="请输入英文名称"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
        </el-col>
        <!--        <el-col :span="12">-->
        <!--          <el-form-item label="条形编码" prop="field105">-->
        <!--            <el-input v-model="formData.field105" placeholder="请输入条形编码" clearable :style="{width: '100%'}" />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="CAS码" prop="cas_number">
            <el-input
              v-model="formData.cas_number"
              placeholder="请输入CAS码"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试剂纯度" prop="purity">
            <el-input v-model="formData.purity" placeholder="请输入试剂纯度" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="导入数量" prop="export_count">
            <el-input v-model.number="formData.export_count" placeholder="请输入导入数量" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产日期" prop="production_date">
            <el-date-picker
              v-model="formData.production_date"
              type="datetime"
              clearable
              placeholder="请选择生产日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="过期日期" prop="expiration_date">
            <el-date-picker
              v-model="formData.expiration_date"
              type="datetime"
              clearable
              placeholder="选择过期日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <!--        <el-col>-->
        <!--          <el-form-item label="保质期" prop="field113">-->
        <!--            <el-input v-model="formData.field113" placeholder="请输入保质期" clearable :style="{width: '100%'}" />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->

        <el-col :span="12">
          <el-form-item label="生产厂家" prop="manufacturer">
            <el-input
              v-model="formData.manufacturer"
              placeholder="请输入生产厂家"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经销商" prop="distributor">
            <el-input
              v-model="formData.distributor"
              placeholder="请输入经销商"
              clearable
              :style="{width: '100%'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格" prop="speci">
            <el-input v-model="formData.speci" placeholder="请输入规格" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <!--        <el-col :span="12">-->
        <!--          <el-form-item label="规格单位" prop="field118">-->
        <!--            <el-input v-model="formData.field118" placeholder="请输入规格单位" clearable :style="{width: '100%'}" />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="单位" prop="net_weight_unit">
            <el-input v-model="formData.net_weight_unit" placeholder="请输入单位" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预估质量" prop="total">
            <el-input v-model="formData.total" placeholder="请输入预估质量" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col v-for="item in extra_form" :key="item.id" :span="12">
          <el-form-item :label="item.name" :prop="item.name">
            <el-input v-model="formData[item.name]" :placeholder="'请输入' + item.name " clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div style="text-align: center">
      <el-button type="primary" @click="handleConfirm">保存</el-button>
    </div>
  </div>
</template>
<script>
import { throttle } from '@/utils'
import { get_use } from '@/api/reagent/customform'
import { get_drug_group_list } from '@/api/reagent/warehousing'

export default {
  name: 'ReagentForm',
  // title dialog title
  // propsFormData原来试剂信息
  // innerVisible控制显示不显示
  // closeform 将数据传递出去当数据为bool时关闭当数据为obj时提交form
  // eslint-disable-next-line vue/require-prop-types
  props: ['propsformdata', 'handlefunc'],

  data() {
    return {
      formData: {},
      loadAll: [],
      rules: {
        name: [{
          required: true,
          message: '请输入试剂名称',
          trigger: 'blur'
        }],
        english_name: [],
        cas_number: [{
          required: true,
          message: '请输入CAS码',
          trigger: 'blur'
        }],
        purity: [{
          required: true,
          message: '请输入试剂纯度',
          trigger: 'blur'
        }],
        export_count: [{
          required: true,
          message: '请输入导入数量',
          trigger: 'blur',
          type: 'number'
        }],
        production_date: [{
          required: true,
          message: '请输入生产日期',
          trigger: 'blur'
        }],
        expiration_date: [{
          required: true,
          message: '请输入过期日期',
          trigger: 'blur'
        }],
        manufacturer: [],
        distributor: [],
        speci: [{
          required: true,
          message: '请输入规格',
          trigger: 'blur'
        }],
        total: [{
          required: true,
          message: '请输入单位',
          trigger: 'blur'
        }],
        net_weight_unit: [{
          required: true,
          message: '请输入预估质量',
          trigger: 'blur'
        }
        ]
      },
      extra_form: []
    }
  },
  watch: {
    propsformdata: {
      handler(newValue, oldValue) {
        this.formData = { ...newValue }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    get_use().then(res => {
      this.extra_form = res.data
    })
    this.drugList()
  },
  methods: {
    drugList() {
      get_drug_group_list().then(
        res => {
      if (res.status === 0) {
        this.loadAll = res.data
      }
    })
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.loadAll
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout)
      cb(results)
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 1)
      }
    },
    handleSelect(item) {
      console.log(item)

      this.formData = item
      this.formData.name = item.value
    },
    isNumber(val) {
      const regPos = /^\d+(\.\d+)?$/
      const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
      return regPos.test(val) || regNeg.test(val)
    },

    handleConfirm: throttle(function() {
      // 刷新试剂列表展示
      this.drugList()
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          // 时间格式处理
          let tempDate = this.formData.production_date
          if (typeof (this.formData.production_date) === 'string') {
            tempDate = this.strToDate(this.formData.production_date)
          }
          let temDate = this.formData.expiration_date
          if (temDate && typeof (this.formData.expiration_date) === 'string') {
            temDate = this.strToDate(this.formData.expiration_date)
          }
          if (temDate && tempDate) {
            // 计算过期时间
            const diff = temDate.getTime() - tempDate.getTime()
            this.formData.shelf_life = Math.trunc(diff / (60 * 60 * 24 * 1000))
          } else {
            this.formData.shelf_life = 0
          }

          // this.formData['name'] = this.formData.value
          //
          this.$set(this.formData, 'name', this.formData.value)
          // delete this.formData['value']
          console.log(this.formData, '-----------------------')
          this.$emit('handlefunc', this.formData)
        }
        if (!valid) return
      })
    }, 2000),
    // 字符串转日期
    strToDate(datestr) {
      return new Date(datestr)
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }

}

</script>
<style>
</style>
