<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elliquorForm" :model="formData" :rules="rules" size="medium" label-width="110px">
        <el-col :span="12">
          <el-form-item label="配置日期" prop="start_time">
            <el-date-picker
              v-model="formData.start_time"
              style="width: 100%"
              type="datetime"
              placeholder="选择配置日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有限期" prop="end_time">
            <el-date-picker
              v-model="formData.end_time"
              style="width: 100%"
              type="datetime"
              placeholder="选择有限期"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </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 :span="12">
          <el-form-item label="溶剂" prop="solvent">
            <el-input v-model="formData.solvent" placeholder="请输入溶剂" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="母液编码" prop="mother_liquor_code">
            <el-input v-model="formData.mother_liquor_code" placeholder="请输入母液编码" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配置依据" prop="basis">
            <el-input v-model="formData.basis" placeholder="请输入配置依据" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配置记录" prop="doc_log">
            <el-input v-model="formData.doc_log" placeholder="请输入配置记录" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div style="text-align: center">
      <!-- <el-button @click="onClose">取消</el-button> -->
      <el-button type="primary" @click="handelConfirm">保存</el-button>
    </div>
  </div>
</template>

<script>
// import {
//   // add_mother_liquor,
//   // update_mother_liquor

// } from '@/api/reagent/management'
import { throttle } from '@/utils'
export default {
  name: 'MotherLiquirForm',
  // eslint-disable-next-line vue/require-prop-types
  props: ['oldmotherliquor', 'handlefunc'],
  data() {
    return {
      formData: {},
      rules: {
        start_time: [{
          required: true,
          message: '请输入配置日期',
          trigger: 'blur'
        }],
        end_time: [{
          required: true,
          message: '请输入有限期',
          trigger: 'blur'
        }],
        purity: [{
          required: true,
          message: '请输入配置浓度',
          trigger: 'blur'
        }],
        solvent: [{
          required: true,
          message: '请输入溶剂',
          trigger: 'blur'
        }],
        mother_liquor_code: [{
          required: true,
          message: '请输入母液编码',
          trigger: 'blur'
        }]
      }
    }
  },
  watch: {
    oldmotherliquor: {
      handler(newValue, oldValue) {
        this.formData = { ...newValue }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handelConfirm: throttle(function() {
      this.$refs['elliquorForm'].validate(valid => {
        if (valid) {
          this.$emit('handlefunc', this.formData)
        }
        if (!valid) return
      })
    }, 2000),
    // 字符串转日期
    strToDate(datestr) {
      return new Date(datestr)
    },
    resetForm() {
      this.$refs['elliquorForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.main-container-text{
  min-height:calc(100vh - 110px) ;
  padding: 1rem;
  margin: 1rem;
  background: white;
  .title{
    font-size: 20px;
    font-weight: bold;
    color: #000000;
  }
  .header{
    margin: 1rem 0 1rem 0;
    .el-input{
      width: 12.5rem;
      margin-right: 1rem;
    }
    .el-select {
      margin-right: 1rem;
    }
    .header-right{
      float: right;
    }
  }
}

.user-header {
  margin-bottom: 1rem;
  .el-input{
    width: 150px;
    margin-right: 1rem;
  }
}

</style>
