<!-- 新增通知公告弹窗 -->
<script lang="ts" setup name="addNotice">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import type { templateType } from '../file-interface'
import showPhoto from '@/components/showPhoto/index.vue'
import { getUserList } from '@/api/system/user'
import { uploadApi } from '@/api/system/notice'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import { getClassificationList } from '@/api/business/measure/classification'
import { templateAdd, templatePageDetail, templateUpdate } from '@/api/system/tool'
import type { userType } from '@/views/system/user/user-interface'
const emits = defineEmits(['resetData'])
const ruleFormRef = ref<FormInstance>() // from组件
const ruleForm = reactive<templateType>({
  templateType: '', // 类型
  templateName: '', // 名称
  templateCreator: '', // 负责人
  minioFileName: '', // 上传文件名
  templateDesc: '', // 描述
  templateNo: '',
  createTime: '',
  belongStandardEquipment: '', // 检校标准库
  belongStandardEquipmentName: '', // 检校标准库名称
  itemCategoryId: '', // 检校分类id
  itemCategoryName: '', // 检校分类名称
  measureItemId: '', // 检校分类id
  measureItemName: '', // 检校分类名称
  id: '0',
}) // 表单
const title = ref('')
const rules = ref<FormRules>({
  // belongStandardEquipment: [{ required: true, message: '检校标准库不能为空', trigger: ['blur', 'change'] }],
  // itemCategoryId: [{ required: true, message: '设备检定项分类不能为空', trigger: ['blur', 'change'] }],
  templateName: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
  templateCreator: [{ required: true, message: '模板负责人不能为空', trigger: 'blur' }],
  minioFileName: [{ required: true, message: '上传附件不能为空', trigger: 'blur' }],
  templateType: [{ required: true, message: '模板类型不能为空', trigger: ['blur', 'change'] }],
}) // 表单验证规则
const dialogVisible = ref<boolean>(false) // 弹窗显示

// ------------------------------------------字典----------------------------------------------
const templateTypeList = ref<dictType[]>([]) // 模板类型
const standardList = ref<dictType[]>([])// 检校标准库

/**
 * 获取字典
 */
function getDict() {
  // 模板类型
  getDictByCode('templateType').then((response) => {
    templateTypeList.value = response.data
  })
  // 检校标准库
  getDictByCode('bizStandardEquipmentType').then((response) => {
    standardList.value = response.data
  })
}
// ----------------------------------------------------------------------------------------------
// 弹窗初始化
const initDialog = async (row: templateType) => {
  ruleForm.templateType = '' // 类型
  ruleForm.templateName = '' // 名称
  ruleForm.templateCreator = '' // 负责人
  ruleForm.minioFileName = '' // 上传文件名
  ruleForm.templateDesc = '' // 描述
  ruleForm.templateNo = ''
  ruleForm.createTime = ''
  ruleForm.belongStandardEquipment = '' // 检校标准库
  ruleForm.belongStandardEquipmentName = '' // 检校标准库名称
  ruleForm.itemCategoryId = '' // 检校分类id
  ruleForm.itemCategoryName = '' // 检校分类名称
  ruleForm.measureItemId = '' // 检校分类id
  ruleForm.measureItemName = '' // 检校分类名称
  ruleForm.id = ''
  fetchItemList()
  await getDict()
  title.value = row.title as string
  dialogVisible.value = true
  if (row.title === '新增') {
    // 新增
    ruleFormRef.value?.resetFields()
    ruleForm.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }
  else {
    fetchInfo(row.id)
  }
}
const loading = ref(false)
function fetchInfo(id: any) {
  loading.value = true
  templatePageDetail({ id }).then((res: any) => {
    ruleForm.id = res.data.id
    ruleForm.templateType = res.data.templateType // 类型
    ruleForm.templateName = res.data.templateName // 名称
    ruleForm.templateCreator = res.data.templateCreator // 负责人
    ruleForm.minioFileName = res.data.minioFileName // 上传文件名
    ruleForm.templateDesc = res.data.templateDesc // 描述
    ruleForm.templateNo = res.data.templateNo
    ruleForm.createTime = res.data.createTime
    ruleForm.belongStandardEquipment = res.data.belongStandardEquipment // 检校标准库
    ruleForm.belongStandardEquipmentName = res.data.belongStandardEquipmentName // 检校标准库名称
    nextTick(() => {
      ruleForm.itemCategoryId = res.data.measureItemId // 检校分类id
      ruleForm.itemCategoryName = res.data.measureItemName // 检校分类名称
    })
    loading.value = false
  })
}

defineExpose({ initDialog })
// 关闭弹窗
const close = () => {
  dialogVisible.value = false
  emits('resetData')
}
// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    ruleForm.measureItemId = ruleForm.itemCategoryId
    ruleForm.measureItemName = ruleForm.itemCategoryName
    if (valid) {
      if (title.value === '新增') {
        templateAdd(ruleForm).then((res) => {
          if (res.code === 200) {
            ElMessage.success('新增成功')
            close()
          }
        })
      }
      else {
        templateUpdate(ruleForm).then((res) => {
          if (res.code === 200) {
            ElMessage.success('更新成功')
            close()
          }
        })
      }
    }
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  dialogVisible.value = false
  emits('resetData')
}
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  // console.log(event.target.files)
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    uploadApi(fd).then((res) => {
      if (res.code === 200) {
        ruleFormRef.value?.clearValidate('minioFileName')
        ruleForm.minioFileName = res.data[0]
        ElMessage.success('上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

// -------------------------------------------获取检定项分类------------------------------------------------
const itemList = ref<{ id: string; name: string; disabled?: boolean }[]>([]) // 检定项分类列表
// 获取检定项分类
async function fetchItemList(deviceType = '', belongStandardEquipment = '') {
  const requestParams = {
    belongStandardEquipment, // 检校标准库
    categoryName: '', // 检定项分类名称
    categoryNo: '', // 检定项分类编号
    deviceType, // 设备分类
    measureCategory: '', // 检校类别
    limit: 999999,
    offset: 1,
  }
  const response = await getClassificationList(requestParams)
  itemList.value = response.data.rows.map((item: { categoryName: string; id: string }) => {
    return {
      name: item.categoryName, // 检定项分类名称
      id: item.id,
    }
  })
}

watch(() => ruleForm.belongStandardEquipment, (newValue) => { // 监听到检校标准库变化
  ruleForm.itemCategoryId = '' // 清空检定项分类
  ruleForm.itemCategoryName = ''
  fetchItemList('', newValue)
}, { immediate: true })
</script>

<template>
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" v-loading="loading" :title="title" width="65%" append-to-body class="container" @close="resetForm">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="130px" :class="[title === '详情' ? 'isDetail' : '']">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="模板编号" prop="templateNo">
            <el-input v-model.trim="ruleForm.templateNo" placeholder="系统自动生成" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模板名称" prop="templateName">
            <el-input v-model.trim="ruleForm.templateName" placeholder="模板名称" :disabled="title === '详情'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-input v-model.trim="ruleForm.createTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模板负责人" prop="templateCreator">
            <el-input v-model.trim="ruleForm.templateCreator" placeholder="模板负责人" :disabled="title === '详情'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模板类型:" prop="templateType">
            <el-select
              v-model.trim="ruleForm.templateType"
              clearable
              :placeholder="title === '详情' ? '' : '请选择模板类型'"
              size="default"
              :disabled="title === '详情'"
              class="full-width-input"
            >
              <el-option
                v-for="item in templateTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检校标准库:" prop="belongStandardEquipment">
            <el-select
              v-model="ruleForm.belongStandardEquipment"
              placeholder="请选择检校标准库"
              filterable
              :disabled="title === '详情'"
            >
              <el-option v-for="item in standardList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备检定项分类:" prop="itemCategoryId">
            <el-select
              v-model="ruleForm.itemCategoryId"
              placeholder="请选择设备检定项分类"
              filterable
              :disabled="!ruleForm.belongStandardEquipment || title === '详情'"
            >
              <el-option v-for="item in itemList" :key="item.id" :disabled="item.disabled" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="模板描述" prop="templateDesc">
        <el-input v-model.trim="ruleForm.templateDesc" placeholder="模板描述" :disabled="title === '详情'" />
      </el-form-item>
      <!-- <el-form-item label="可使用人" prop="userIdList">
        <el-select v-model="ruleForm.userIdList" :placeholder="title === '详情' ? '暂无可使用人' : '请选择可使用人'" multiple :disabled="title === '详情'" style="width: 100%;">
          <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="发布内容" prop="noticeContent">
        <el-input v-model.trim="ruleForm.noticeContent" :rows="4" type="textarea" />
      </el-form-item> -->
      <el-form-item label="附件" prop="minioFileName">
        <show-photo :minio-file-name="ruleForm.minioFileName" />
        <el-button v-if="title !== '详情'" type="primary" :disabled="title === '详情'" :style="{ 'margin-left': ruleForm.minioFileName === '' ? '0px' : '20px' }" @click="upload">
          {{ ruleForm.minioFileName === '' ? '上传' : '更换附件' }}
        </el-button>
        <input v-show="title === ''" ref="fileRef" type="file" accept="pdf/*" @change="onFileChange">
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer footer">
        <el-button v-if="title !== '详情'" type="primary" @click="submitForm(ruleFormRef)">
          创建
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.container {
  .isDetail {
    ::v-deep {
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
      .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
        display: none;
      }
    }
  }
}
</style>