<!-- 现行测试校准检定方法详情 -->
<script name="MethodDetail" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IMethodFileInfo } from './method-interface'
import updateRecord from './updateRecord.vue'
import useUserStore from '@/store/modules/user'
import { UploadFile } from '@/api/file'
import { addFileMethod, updateFileMethod } from '@/api/resource/fileTechnology'
import type { IDictType } from '@/commonInterface/resource-interface'
import FilePreviewDialog from '@/components/filePreview/filePreviewDialog.vue'
import ImagePreviewDialog from '@/components/ImagePreview/imagePreviewDialog.vue'

// 从路由中传过来的参数
const type = ref<string>('')
const id = ref<string>('')

// 获取用户信息
const userInfo = useUserStore()
const route = useRoute()
const router = useRouter()
const title = ref('')

const basicFormRef = ref()
const refFilePreviewDlg = ref()
const refImagePreviewDlg = ref()

// 字典值
const labCodeDict = ref<Array<IDictType>>([])
const groupCodeDict = ref<Array<IDictType>>([])

const methodFileInfo = ref<IMethodFileInfo>({
  id: '',
  labCode: '',
  labCodeName: '',
  groupCode: '',
  groupCodeName: '',
  fileNo: '',
  fileName: '',
  fileDistributeNo: '',
  activeDate: '',
  createUserId: '',
  createUserName: '',
  createTime: '',
  environmentRequire: '',
  transmissionParams: '',
  temperatureLowLimit: '',
  temperatureHighLimit: '',
  humidityLowLimit: '',
  humidityHighLimit: '',
  remark: '',
  file: '',
})

const temperatureLowEnable = ref<boolean>(true)
const temperatureHighEnable = ref<boolean>(true)
const humidityLowEnable = ref<boolean>(true)
const humidityHighEnable = ref<boolean>(true)

const numberValidator = (rule: any, value: any, callback: any) => {
  const floatReg = /^(\-|\+)?\d+(\.\d+)?$/
  if (floatReg.test(value)) {
    callback()
  }
  else if (value.includes('∞') && (value[0] === '-' || value[0] === '+')) {
    callback()
  }
  else {
    callback(new Error('请输入数字'))
  }
}

const methodFileRules = ref({
  labCode: [{ required: true, message: '实验室不能为空，请选择', trigger: ['change', 'blur'] }],
  groupCode: [{ required: true, message: '部门不能为空，请选择', trigger: ['change', 'blur'] }],
  fileNo: [{ required: true, message: '文件编号不能为空', trigger: 'blur' }],
  fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
  fileDistributeNo: [{ required: true, message: '文件发放编号不能为空', trigger: 'blur' }],
  transmissionParams: [{ required: true, message: '开展量传参数不能为空', trigger: 'blur' }],
  activeDate: [{ required: true, message: '启用时间不能为空，请选择', trigger: 'blur' }],
  environmentRequire: [{ required: true, message: '环境条件要求不能为空', trigger: 'blur' }],
  file: [{ required: true, message: '文件附件不能为空，请选择一个文件上传', trigger: 'blur' }],
  temperatureLowLimit: [{ required: true, message: '温度要求下限不能为空', trigger: 'blur' }, { validator: numberValidator, trigger: 'blur' }],
  temperatureHighLimit: [{ required: true, message: '温度要求上限不能为空', trigger: 'blur' }, { validator: numberValidator, trigger: 'blur' }],
  humidityLowLimit: [{ required: true, message: '湿度要求下限不能为空', trigger: 'blur' }, { validator: numberValidator, trigger: 'blur' }],
  humidityHighLimit: [{ required: true, message: '湿度要求上限不能为空', trigger: 'blur' }, { validator: numberValidator, trigger: 'blur' }],
}) // 表单验证规则

// 逻辑
const resetForm = () => {
  sessionStorage.removeItem('methodFileInfo') // 返回列表时 将缓存中的数据删除
  router.go(-1)
}

// 验证温度要求的逻辑
const validateTemperatureLimit = () => {
  if (temperatureLowEnable.value === false && temperatureHighEnable.value === false) {
    ElMessage.warning('温度上下限阈值不能同时为空，请选择')
    return false
  }

  if (temperatureLowEnable.value === true && temperatureHighEnable.value === true) {
    const lowVal = parseFloat(methodFileInfo.value.temperatureLowLimit)
    const highVal = parseFloat(methodFileInfo.value.temperatureHighLimit)
    if (lowVal >= highVal) {
      ElMessage.warning('温度下限阈值不能超过上限阈值')
      return false
    }
  }

  return true
}

const validateHumidityLimit = () => {
  if (humidityLowEnable.value === false && humidityHighEnable.value === false) {
    ElMessage.warning('湿度上下限阈值不能同时为空，请选择')
    return false
  }

  if (humidityLowEnable.value === true && humidityHighEnable.value === true) {
    const lowVal = parseFloat(methodFileInfo.value.humidityLowLimit)
    const highVal = parseFloat(methodFileInfo.value.humidityHighLimit)
    if (lowVal >= highVal) {
      ElMessage.warning('湿度下限阈值不能超过上限阈值')
      return false
    }
  }

  return true
}

// 添加
const saveFileSystemForm = () => {
  // 将创建时间改为提交的时间
  methodFileInfo.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
  addFileMethod(methodFileInfo.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')
      type.value = 'detail'
      title.value = '现行测试校准检定方法（详情）'
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}
// 编辑
const updateFileSystemById = () => {
  updateFileMethod(methodFileInfo.value).then((res) => {
    if (res.code === 200) {
      // 提示保存成功
      ElMessage.success('保存成功')
      type.value = 'detail'
      title.value = '现行测试校准检定方法（详情）'
    }
    else {
      // 提示失败信息
      ElMessage.error(`保存失败：${res.message}`)
    }
  })
}

// 保存
const saveForm = async () => {
  if (!basicFormRef) { return }

  let succ = false
  succ = validateTemperatureLimit()
  if (succ === false) {
    return
  }

  succ = validateHumidityLimit()
  if (succ === false) {
    return
  }

  await basicFormRef.value.validate((valid: boolean, fields: any) => {
    if (valid === true) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        if (type.value === 'create') {
          saveFileSystemForm()
        }
        else if (type.value === 'update') {
          updateFileSystemById()
        }
      })
    }
  })
}

// 上传请求
const uploadQuarterlyEvaluateFile: any = (file: any) => {
  const fd = new FormData()
  fd.append('multipartFile', file.file)
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  UploadFile(fd).then((res) => {
    if (res.code === 200) {
      ElMessage.success('上传成功')
      methodFileInfo.value.file = res.data[0]
      loading.close()

      basicFormRef.value.validateField('file', () => { })
    }
  }).catch(() => {
    loading.close()
    ElMessage.error('上传失败')
  })
}

// 预览文件
const openFilePreviewDialog = (filename: string) => {
  // 手动新增的
  if (filename.lastIndexOf('.pdf') > 0) {
    refFilePreviewDlg.value.initDialog(filename)
  }
  else {
    refImagePreviewDlg.value.initDialog(filename)
  }
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  type.value = params.type
  id.value = params.id !== undefined ? params.id : ''

  switch (params.type) {
    case 'create':
      title.value = '现行测试校准检定方法（新增）'

      // 创建人和创建时间设置默认值
      methodFileInfo.value.createUserId = userInfo.id
      methodFileInfo.value.createUserName = userInfo.name
      methodFileInfo.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      // 填充部门和实验室
      methodFileInfo.value.labCode = userInfo.bizLabCode
      methodFileInfo.value.groupCode = userInfo.groupNo
      break
    case 'update':
      title.value = '现行测试校准检定方法（编辑）'
      id.value = params.id

      methodFileInfo.value = JSON.parse(sessionStorage.getItem('methodFileInfo')!)
      if (methodFileInfo.value.temperatureLowLimit === '') {
        temperatureLowEnable.value = false
      }
      if (methodFileInfo.value.temperatureHighLimit === '') {
        temperatureHighEnable.value = false
      }
      if (methodFileInfo.value.humidityLowLimit === '') {
        humidityLowEnable.value = false
      }
      if (methodFileInfo.value.humidityHighLimit === '') {
        humidityHighEnable.value = false
      }

      break
    case 'detail':
      title.value = '现行测试校准检定方法（详情）'
      id.value = params.id
      methodFileInfo.value = JSON.parse(sessionStorage.getItem('methodFileInfo')!)

      break
    default:
      title.value = ''
      break
  }
}

// 获取字典值
const getLabCodeDict = () => {
  if (sessionStorage.getItem('bizLabCode') !== null && sessionStorage.getItem('bizLabCode') !== '') {
    labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCode')!)
  }
}
const getGroupCodeDict = () => {
  if (sessionStorage.getItem('bizGroupCode') !== null && sessionStorage.getItem('bizGroupCode') !== '') {
    groupCodeDict.value = JSON.parse(sessionStorage.getItem('bizGroupCode')!)
  }
}

const initDict = () => {
  getLabCodeDict()
  getGroupCodeDict()
}

watch(() => temperatureLowEnable.value, (newVal: boolean) => {
  if (newVal === false) {
    // 当取消选择温度下限时 清除下限值
    methodFileInfo.value.temperatureLowLimit = ''
  }
})

watch(() => temperatureHighEnable.value, (newVal: boolean) => {
  if (newVal === false) {
    // 当取消选择温度上限时 清除上限值
    methodFileInfo.value.temperatureHighLimit = ''
  }
})

watch(() => humidityLowEnable.value, (newVal: boolean) => {
  if (newVal === false) {
    // 当取消选择湿度下限时 清除下限值
    methodFileInfo.value.humidityLowLimit = ''
  }
})

watch(() => humidityHighEnable.value, (newVal: boolean) => {
  if (newVal === false) {
    // 当取消选择湿度上限时 清除上限值
    methodFileInfo.value.humidityHighLimit = ''
  }
})
// 详情tab切换数据
const radioItems = [
  {
    name: '基本信息',
    value: 'base-info',
  },
  {
    name: '更新记录',
    value: 'update-record',
  },
]
// 当前展示tab
const currentLabel = ref('base-info')
onMounted(async () => {
  initDict()
  initDialog(route.query)
})

defineExpose({
  initDialog,
  methodFileInfo,
})
</script>

<template>
  <app-container style="overflow-x: hidden;">
    <detail-page :title="`${title}`" :class="`${type !== 'detail' ? 'hidden-content' : ''}`" class="btn-content">
      <template #btns>
        <el-button v-if="type !== 'detail'" type="primary" @click="saveForm()">
          保存
        </el-button>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>
      <!-- 基本信息/更新记录 tab切换 -->
      <el-radio-group v-if="type === 'detail'" v-model="currentLabel">
        <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.value">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </detail-page>
    <!-- 基本信息 -->
    <detail-page v-show="currentLabel === 'base-info'">
      <el-form
        ref="basicFormRef" :model="methodFileInfo" :rules="methodFileRules" label-position="right"
        label-width="110px" border stripe
      >
        <el-row :gutter="24">
          <!-- 第一行 第一列 -->
          <el-col :span="6">
            <el-form-item label="实验室" prop="labCode">
              <el-select
                v-model="methodFileInfo.labCode" placeholder="请选择实验室" tabindex="1" style="width: 100%;"
                :clearable="true" :disabled="type === 'detail'"
              >
                <el-option v-for="dict in labCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="文件编号" prop="fileNo">
              <el-input
                v-model="methodFileInfo.fileNo" placeholder="请输入文件编号" tabindex="3" :clearable="true"
                :disabled="type === 'detail'"
              />
            </el-form-item>
          </el-col>

          <!-- 第一行 第二列 -->
          <el-col :span="6">
            <el-form-item label="部门" prop="groupCode">
              <el-select
                v-model="methodFileInfo.groupCode" placeholder="请选择部门" tabindex="2" style="width: 100%;"
                :clearable="true" :disabled="type === 'detail'"
              >
                <el-option v-for="dict in groupCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="文件发放编号" prop="fileDistributeNo">
              <el-input
                v-model="methodFileInfo.fileDistributeNo" :clearable="true" placeholder="请输入文件发放编号" tabindex="4"
                :disabled="type === 'detail'"
              />
            </el-form-item>
          </el-col>

          <!-- 第一行 第三列 -->
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="methodFileInfo.createUserName" :disabled="true" />
            </el-form-item>

            <el-form-item label="文件名称" prop="fileName">
              <el-input
                v-model="methodFileInfo.fileName" :clearable="true" placeholder="请输入文件名称" tabindex="5"
                :disabled="type === 'detail'"
              />
            </el-form-item>
          </el-col>

          <!-- 第一行 第四列 -->
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input v-model="methodFileInfo.createTime" :disabled="true" />
            </el-form-item>

            <el-form-item label="启用时间" prop="activeDate">
              <el-date-picker
                v-model="methodFileInfo.activeDate" type="date" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择启用时间" :disabled="type === 'detail'"
                style="width: 100%;" tabindex="6"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row :gutter="24" class="cancelParams">
          <!-- 第一列 -->
          <el-col :span="12">
            <el-form-item label="开展量传参数" prop="transmissionParams">
              <el-input
                v-model="methodFileInfo.transmissionParams" placeholder="请输入开展的量传参数" tabindex="7"
                :clearable="true" :disabled="type === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <!-- 第一列 -->
          <el-col :span="12">
            <el-form-item label="温度要求" class="required">
              <el-checkbox
                v-model="temperatureLowEnable" label="下限" :disabled="type === 'detail'"
                style="margin: 0 10px;"
              />
              <el-form-item v-if="temperatureLowEnable === true" prop="temperatureLowLimit">
                <el-input
                  v-model="methodFileInfo.temperatureLowLimit" placeholder="" tabindex="8" :clearable="true"
                  :disabled="type === 'detail'" style="width: 150px;"
                >
                  <template #append>
                    ℃
                  </template>
                </el-input>
              </el-form-item>

              <el-checkbox
                v-model="temperatureHighEnable" label="上限" :disabled="type === 'detail'"
                style="margin: 0 10px; margin-left: 100px;"
              />
              <el-form-item v-if="temperatureHighEnable === true" prop="temperatureHighLimit">
                <el-input
                  v-model="methodFileInfo.temperatureHighLimit" placeholder="" tabindex="9" :clearable="true"
                  :disabled="type === 'detail'" style="width: 150px;"
                >
                  <template #append>
                    ℃
                  </template>
                </el-input>
              </el-form-item>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="湿度要求" class="required">
              <el-checkbox
                v-model="humidityLowEnable" label="下限" :disabled="type === 'detail'"
                style="margin: 0 10px;"
              />
              <el-form-item v-if="humidityLowEnable === true" prop="humidityLowLimit">
                <el-input
                  v-model="methodFileInfo.humidityLowLimit" placeholder="" tabindex="10" :clearable="true"
                  :disabled="type === 'detail'" style="width: 150px;"
                >
                  <template #append>
                    ％
                  </template>
                </el-input>
              </el-form-item>

              <el-checkbox
                v-model="humidityHighEnable" label="上限" :disabled="type === 'detail'"
                style="margin: 0 10px; margin-left: 100px;"
              />
              <el-form-item v-if="humidityHighEnable === true" prop="humidityHighLimit">
                <el-input
                  v-model="methodFileInfo.humidityHighLimit" placeholder="" tabindex="11" :clearable="true"
                  :disabled="type === 'detail'" style="width: 150px;"
                >
                  <template #append>
                    ％
                  </template>
                </el-input>
              </el-form-item>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row :gutter="24" class="cancelParams">
          <el-col :span="18">
            <el-form-item label="环境条件要求" prop="environmentRequire">
              <el-input
                v-model="methodFileInfo.environmentRequire" placeholder="请输入环境条件要求" tabindex="12"
                type="textarea" :clearable="true" :disabled="type === 'detail'" :rows="5"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row :gutter="24" class="cancelParams">
          <el-col :span="18">
            <el-form-item label="备注">
              <el-input
                v-model="methodFileInfo.remark" placeholder="请输入备注信息" tabindex="13" type="textarea"
                :clearable="true" :disabled="type === 'detail'" :rows="2"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行 -->
        <el-row :gutter="24">
          <el-col :span="20">
            <el-form-item label="文件附件" prop="file">
              <el-input v-model="methodFileInfo.file" type="hidden" />
              <el-link @click="openFilePreviewDialog(methodFileInfo.file)">
                {{ methodFileInfo.file }}
              </el-link>

              <el-upload
                :show-file-list="false" :http-request="uploadQuarterlyEvaluateFile"
                style="width: 50%; margin-left: 20px;"
              >
                <el-button v-if="type !== 'detail'" type="primary">
                  <template v-if="methodFileInfo.file !== ''">
                    替换
                  </template>
                  <template v-else>
                    上传
                  </template>
                </el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <!-- 更新记录 -->
    <detail-page v-if="currentLabel === 'update-record'">
      <update-record :id="id" />
    </detail-page>

    <file-preview-dialog ref="refFilePreviewDlg" />
    <image-preview-dialog ref="refImagePreviewDlg" />
  </app-container>
</template>

<style lang="scss" scoped>
.required {
  ::v-deep(.el-form-item__label) {
    &::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
}

.hidden-content {
  ::v-deep(.content) {
    display: none;
  }
}
</style>

<style scoped>
.my-el-input-number[data-unit] {
  --el-input-number-unit-offset-x: 15px;

  /* 不显示控制按钮 */

  /* --el-input-number-unit-offset-x: 35px; /* 显示控制按钮 */

  position: relative;
}

.my-el-input-number[data-unit]::after {
  content: attr(data-unit);
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: var(--el-input-number-unit-offset-x);
  color: #999;
}

.my-el-input-number[data-unit] .el-input__inner {
  padding-left: 30px;
  padding-right: calc(var(--el-input-number-unit-offset-x) + 12px);
}
</style>