<!-- 添加记录弹窗 -->
<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 = '110px'
const form = ref({})
const formTable = ref([
  {
    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) => {
  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}`" width="50%">
    <el-form
      ref="ruleFormRef" :model="form"
      :rules="rules"
    >
      <div v-if="name === '周检记录'">
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
              <el-input v-model="form.certificateNo" placeholder="记录人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <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="检定日期" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <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="有效日期" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
              <el-input v-model="form.certificateNo" placeholder="送检人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="name === '状态变更记录'">
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <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="开始日期" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <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="结束日期" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
              <el-input v-model="form.certificateNo" placeholder="申请人" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="name === '使用记录'">
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
              <el-input v-model="form.certificateNo" placeholder="使用人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
              <el-input v-model="form.certificateNo" placeholder="使用部门" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <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="使用开始日期" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <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="使用结束日期" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="name === '检定证书'">
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
              <el-input v-model="form.certificateNo" placeholder="证书编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
              <el-input v-model="form.certificateNo" placeholder="证书名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <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="证书出具日期" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="18">
            <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="证书有效期" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </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>