<!-- 证书/报告补充或更换申请单详情 -->
<script name="BusinessCertManageApplyDetail" lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, UploadUserFile } from 'element-plus'
import type { Ref } from 'vue'
import dayjs from 'dayjs'
import type { IForm } from './applt-interface'
import useUserStore from '@/store/modules/user'
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 页面类型字典
const user = useUserStore() // 用户信息
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
const $router = useRouter() // 路由实例
const ruleFormRef = ref() // 表单ref
// 表单
const form: Ref<IForm> = ref({
  sqdbh: '', // 申请单编号
  sqdmc: '', // 申请单名称
  createUserId: '', // 创建人id
  createUserName: '', // 创建人名称
  createTime: '', // 创建时间
  ghzsbh: '', // 更换证书编号
  ghzsbgmc: '', // 更换证书/报告名称
  bglx: '', // 变更类型
  bcghyyjyxfx: '', // 补充/更换原因及影响分析
  zhyxfx: '', // 如果召回被测件、被校件或被检件重新送检，召回原因及影响分析
})

const rules = reactive<FormRules>({ // 表单验证规则
  ghzsbh: [{ required: true, message: '更换证书编号不能为空', trigger: ['change', 'blur'] }],
  bglx: [{ required: true, message: '变更类型不能为空', trigger: ['change', 'blur'] }],
})

// -----------------------------------------路由参数----------------------------------------
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
console.log('页面类型', pageType.value)
// ---------------------------------------------按钮------------------------------------------
// 导出word
const exportWord = () => {
  ElMessage.info('敬请期待')
}
// 导出pdf
const exportPdf = () => {
  ElMessage.info('敬请期待')
}
// 打印
const print = () => {
  ElMessage.info('敬请期待')
}
// 提交
const submitForm = () => {}
// 保存
const saveForm = (ruleFormRef: FormInstance | undefined) => {}
// 关闭
const close = () => {
  $router.back()
}
// --------------------------------------更换证书编号-----------------------------------------
// 点击选择
const selectUpdateCertNo = () => {

}
// -------------------------------获取详情----------------------------------------------------
// 获取详情
const getInfo = () => {

}
// ------------------------------钩子--------------------------------------------------------
onMounted(async () => {
  // await getDict()
  // 非添加页面获取详情
  if (pageType.value === 'edit' || pageType.value === 'detail') {
    getInfo()
  }
  else { // 新建
    form.value.createUserId = user.id// 创建人id
    form.value.createUserName = user.name // 创建人
    form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 创建时间
    form.value.sqdmc = '证书/报告补充或更换申请单' // 申请单名称
  }
})
</script>

<template>
  <app-container>
    <detail-page :title="`证书/报告补充或更换申请单(${textMap[pageType]})`">
      <template #btns>
        <el-button v-if="pageType === 'detail'" v-print="exportWord" type="primary">
          导出word
        </el-button>
        <el-button v-if="pageType === 'detail'" v-print="exportPdf" type="primary">
          导出pdf
        </el-button>
        <el-button v-if="pageType === 'detail'" v-print="print" type="primary">
          打印
        </el-button>
        <el-button v-if="pageType === 'add'" type="primary" @click="submitForm">
          提交
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="form"
        :label-width="134"
        label-position="right"
        :rules="rules"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="申请单编号:" prop="sqdbh">
              <el-input
                v-model="form.sqdbh"
                :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请单名称:" prop="sqdmc">
              <el-input
                v-model="form.sqdmc"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人:">
              <el-input v-model="form.createUserName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间:">
              <el-date-picker
                v-model="form.createTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                disabled
                class="full-width-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="更换证书编号" prop="ghzsbh">
              <el-input
                v-model="form.ghzsbh"
                :placeholder="pageType === 'detail' ? '' : '请选择'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              >
                <template #append>
                  <el-button size="small" @click="selectUpdateCertNo">
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="更换证书/报告名称:" prop="ghzsbgmc">
              <el-input
                v-model="form.ghzsbgmc"
                :placeholder="pageType === 'detail' ? ' ' : '更换证书/报告名称'"
                :class="{ 'detail-input': pageType === 'detail' }"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="变更类型:" prop="bglx">
              <el-radio-group v-model="form.bglx">
                <el-radio label="补充" />
                <el-radio label="更换" />
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="补充/更换原因及影响分析">
      <el-row>
        <el-col :span="24">
          <el-input
            v-model="form.bcghyyjyxfx"
            :rows="4"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 20 }"
            :placeholder="pageType === 'detail' ? '' : '请输入补充/更换原因及影响分析'"
            :class="{ 'detail-input': pageType === 'detail' }"
            :disabled="pageType === 'detail'"
          />
        </el-col>
      </el-row>
    </detail-block>
    <detail-block title="如果召回被测件、被校件或被检件重新送检，召回原因及影响分析">
      <el-row>
        <el-col :span="24">
          <el-input
            v-model="form.zhyxfx"
            :rows="4"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 20 }"
            :placeholder="pageType === 'detail' ? '' : '请输入如果召回被测件、被校件或被检件重新送检，召回原因及影响分析'"
            :class="{ 'detail-input': pageType === 'detail' }"
            :disabled="pageType === 'detail'"
          />
        </el-col>
      </el-row>
    </detail-block>
  </app-container>
</template>