<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-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="num">
            <el-input v-model.number="formData.num" 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'
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: {},
      rules: {
        name: [{
          required: true,
          message: '请输入试剂名称',
          trigger: 'blur'
        }],
        english_name: [],
        cas_number: [{
          required: true,
          message: '请输入CAS码',
          trigger: 'blur'
        }],
        purity: [{
          required: true,
          message: '请输入试剂纯度',
          trigger: 'blur'
        }],
        num: [{
          required: true,
          message: '请输入导入数量',
          trigger: 'blur'
        },
        { type: 'number',
          message: '导入数量必须为数字值' }],
        production_date: [],
        expiration_date: [],
        manufacturer: [],
        distributor: [],
        speci: [{
          required: true,
          message: '请输入规格',
          trigger: 'blur'
        }],
        total: []
      },
      extra_form: []
    }
  },
  watch: {
    propsformdata: {
      handler(newValue, oldValue) {
        this.formData = { ...newValue }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    get_use().then(res => {
      this.extra_form = res.data
    })
  },
  methods: {
    handleConfirm: throttle(function() {
      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.$emit('handlefunc', this.formData)
        }
        if (!valid) return
      })
    }, 2000),
    // 字符串转日期
    strToDate(datestr) {
      return new Date(datestr)
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }

}

</script>
<style>
</style>
