<!-- 到期提醒详情 -->
<script lang="ts" setup name="RemingDetailDialog">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { addRemind, updateRemind } from '@/api/system/baseInfoRemindManage'
// 字典
const emits = defineEmits(['refresh'])
// 用户信息
const user = useUserStore()
const dialogFormVisible = ref(false)
const loading = ref(false)
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}
const form = ref({
  id: '',
  labCode: '', //	实验室代码(字典code)
  labCodeName: '', //		实验室名称(字典value)
  remindDays: undefined, //	提醒时间
  remindName: '', //	提醒名称
  remindScope: [], //	提醒范围
  remindTimes: undefined, //	提醒频次(每隔多少天提醒一次)
  taskType: '', //	任务类型(0 任务单 1 智能模型台账 2 标准装置 3 证书管理)
})
const pageType = ref('detail') // 页面类型
const rules = {
  remindDays: [{ required: true, message: '提醒时间不能为空', trigger: ['blur', 'change'] }],
  remindScope: [{ required: true, message: '提醒范围不能为空', trigger: ['blur', 'change'] }],
}
const dataFormRef = ref()
// -------------------------------------------字典------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室代码
const remindNameList = ref<dictType[]>([]) // 提醒名称
// 获取字典值
async function getDict() {
  // 实验室代码
  getDictByCode('bizGroupCodeEquipment').then((response) => {
    labCodeList.value = response.data
  })
  // 提醒名称
  getDictByCode('systemRemindManage').then((response) => {
    remindNameList.value = response.data
  })
}
getDict()
// -----------------------------------------------------------------------------------------
// 点击确定
const confirmSelect = () => {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true
      if (pageType.value === 'add') {
        addRemind({ ...form.value, remindScope: form.value.remindScope.join(',') }).then(() => {
          ElMessage.success('新增成功')
          loading.value = false
          dialogFormVisible.value = false
          emits('refresh')
        }).catch(() => {
          loading.value = false
        })
      }
      if (pageType.value === 'edit') {
        updateRemind({ ...form.value, remindScope: form.value.remindScope.join(',') }).then(() => {
          ElMessage.success('编辑成功')
          loading.value = false
          dialogFormVisible.value = false
          emits('refresh')
        }).catch(() => {
          loading.value = false
        })
      }
    }
  })
}
// 取消
const resetForm = () => {
  dialogFormVisible.value = false
}
// 初始化
const initDialog = async (type: string, row: any) => {
  pageType.value = type // 页面类型
  if (type !== 'add') {
    form.value = {
      id: type === 'add' ? '' : row.id,
      labCode: row.labCode, //	实验室代码(字典code)
      labCodeName: row.labCodeName, //		实验室名称(字典value)
      remindDays: row.remindDays, //	提醒时间
      remindName: row.remindName, //	提醒名称
      remindScope: row.remindScope.split(','), //	提醒范围
      remindTimes: row.remindTimes, //	提醒频次(每隔多少天提醒一次)
      taskType: row.taskType, //	任务类型(0 任务单 1 智能模型台账 2 标准装置 3 证书管理)
    }
    console.log('90909', row)
  }
  else {
    form.value = {
      id: '',
      labCode: '', //	实验室代码(字典code)
      labCodeName: '', //		实验室名称(字典value)
      remindDays: undefined, //	提醒时间
      remindName: '', //	提醒名称
      remindScope: [], //	提醒范围
      remindTimes: undefined, //	提醒频次(每隔多少天提醒一次)
      taskType: '', //	任务类型(0 任务单 1 智能模型台账 2 标准装置 3 证书管理)
    }
  }
  dialogFormVisible.value = true
}

// 修改实验室
const changeLab = (value: string) => {
  const index = labCodeList.value.findIndex(item => item.value === value)
  if (index !== -1) {
    form.value.labCodeName = labCodeList.value[index].name
  }
}

// 修改提醒名称
const changeRemindName = (value: string) => {
  const index = remindNameList.value.findIndex(item => item.value === value)
  if (index !== -1) {
    form.value.taskType = remindNameList.value[index].value
  }
}

// 提醒时间变化
const changeRemindDays = (val: any) => {
  if (form.value.remindTimes! > val) {
    form.value.remindTimes = val
  }
}

defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" :title="`${textMap[pageType]}到期提醒`">
    <el-form ref="dataFormRef" v-loading="loading" :rules="rules" :model="form" label-well-code="right" label-width="200px">
      <el-form-item label="实验室代码" prop="labCode">
        <el-select v-model="form.labCode" :placeholder="pageType === 'detail' ? ' ' : '请选择实验室代码'" :disabled="pageType !== 'add'" class="full-width-input" @change="changeLab">
          <el-option v-for="item in labCodeList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="提醒名称" prop="name">
        <el-select v-model="form.remindName" :placeholder="pageType === 'detail' ? ' ' : '请选择实验室代码'" :disabled="pageType !== 'add'" class="full-width-input" @change="changeRemindName">
          <el-option v-for="item in remindNameList" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="提醒时间(按到期前提示)" prop="remindDays">
        <el-input-number
          v-model="form.remindDays"
          :placeholder="pageType === 'detail' ? '' : '到期前XX天'"
          :disabled="pageType === 'detail'"
          :precision="0"
          :min="0"
          :max="730"
          style="width: 180px;"
          @change="changeRemindDays"
        />
        <span class="message">(最大不超过2年)</span>
      </el-form-item>
      <el-form-item label="提醒范围" prop="remindScope">
        <el-checkbox-group v-model="form.remindScope">
          <el-checkbox label="综合管理组" />
          <el-checkbox label="所在部门全部人员" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="提醒频次" prop="remindTimes">
        <span style="margin-right: 6px;">每隔</span>
        <el-input-number
          v-model="form.remindTimes"
          :placeholder="pageType === 'detail' ? '' : '提醒频次'"
          :disabled="pageType === 'detail' || (!form.remindDays && `${form.remindDays}` !== '0')"
          :precision="0"
          :min="0"
          :max="form.remindDays"
          style="width: 180px;"
        />
        <span style="margin-left: 6px;">天提醒一次</span>
        <span class="message">(频次不能超过提醒时间)</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmSelect">确认</el-button>
        <el-button @click="resetForm">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.message {
  font-size: 12px;
  color: #7f7f7f;
  margin-left: 10px;
}
</style>