<!-- 添加记录弹窗 -->
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDictByCode } from '@/api/system/dict'
const emits = defineEmits(['add'])
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = ref({})
const formTable = ref([
  {
    name: '计量人员',
    form: {

    },
  },
  {
    name: '标准配套设备',
    form: {

    },
  },
  {
    name: '检定规程',
    form: {

    },
  },
  {
    name: '重复性考核记录',
    form: {

    },
  },
  {
    name: '稳定性考核记录',
    form: {

    },
  },
  {
    name: '证书管理',
    form: {

    },
  },
])
const title = ref('')
const name = ref('')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
})
const managerStateList = ref([]) // 管理状态
// 重置
const resetData = () => {
}
const initDialog = (row: any) => {
  console.log(row)
  title.value = row.title
  name.value = row.name
  form.value = formTable.value.filter(item => item.name === row.name)[0].form
  // if (row.title === '编辑') {

  // }
  dialogFormVisible.value = true
  // 获取管理状态
  getDictByCode('managerState').then((response) => {
    managerStateList.value = response.data
  })
}
defineExpose({ initDialog })

// 点击保存
const submitForm = async (formEl: FormInstance | undefined) => {
  console.log(form.value, 'form')
  const flagArr = []
  for (const key in form.value) {
    if (form.value[key]) {
      flagArr.push(1)
    }
    else {
      flagArr.push(0)
    }
  }
  if (flagArr.every(item => item == 1)) {
    if (title.value === '编辑') {
      emits('add', form.value, 'update')
    }
    else {
      emits('add', form.value, '')
    }
    dialogFormVisible.value = false
  }
  else {
    ElMessage.warning('请先完整填写信息')
  }
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  formEl.resetFields()
  dialogFormVisible.value = false
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`">
    <el-form
      ref="ruleFormRef" :model="form"
      :rules="rules"
    >
      <div v-if="name === '计量人员'">
        <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="记录表编号" />
        </el-form-item>
        <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="记录人" />
        </el-form-item>
        <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="检定日期"
          />
        </el-form-item>
        <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="有效日期"
          />
        </el-form-item>
        <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="送检人" />
        </el-form-item>
        <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
        </el-form-item>
      </div>
      <div v-if="name === '标准配套设备'">
        <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
          <el-select v-model="form.certificateNo" placeholder="状态类型" clearable>
            <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="开始日期"
          />
        </el-form-item>
        <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="申请人" />
        </el-form-item>
      </div>
      <div v-if="name === '检定规程'">
        <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="使用人" />
        </el-form-item>
        <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="使用部门" />
        </el-form-item>
        <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
          <el-select v-model="form.certificateNo" placeholder="使用类型" clearable>
            <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="使用开始日期"
          />
        </el-form-item>
        <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="使用结束日期"
          />
        </el-form-item>
      </div>
      <div v-if="name === '重复性考核记录'">
        <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="证书编号" />
        </el-form-item>
        <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="证书名称" />
        </el-form-item>
        <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
          <el-select v-model="form.certificateNo" placeholder="证书类型" clearable>
            <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="证书出具日期"
          />
        </el-form-item>
        <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="证书有效期"
          />
        </el-form-item>
      </div>
      <div v-if="name === '稳定性考核记录'">
        <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="证书编号" />
        </el-form-item>
        <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="证书名称" />
        </el-form-item>
        <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
          <el-select v-model="form.certificateNo" placeholder="证书类型" clearable>
            <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="证书出具日期"
          />
        </el-form-item>
        <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="证书有效期"
          />
        </el-form-item>
      </div>
      <div v-if="name === '证书管理'">
        <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="证书编号" />
        </el-form-item>
        <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
          <el-input v-model="form.certificateNo" placeholder="证书名称" />
        </el-form-item>
        <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
          <el-select v-model="form.certificateNo" placeholder="证书类型" clearable>
            <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="证书出具日期"
          />
        </el-form-item>
        <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
          <el-date-picker
            v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="证书有效期"
          />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
        <el-button @click="resetForm(ruleFormRef)">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>