<!-- 分包证书管理详情 -->
<script lang="ts" setup name="CertificateEdit">
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, UploadUserFile } from 'element-plus'
import { ref } from 'vue'
import dayjs from 'dayjs'
import type { IForm } from './certificate-interface'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import TemplateTable from '@/views/customer/customerInfo/templateTable.vue'
import { UploadFile } from '@/api/measure/file'
import selectSample from '@/views/business/subpackage/apply/components/selectSample.vue'
import selectProjectApprove from '@/views/business/subpackage/apply/components/selectProjectApprove.vue'

// 初始化router
const $router = useRouter()
const $route = useRoute()
const sampleVisible = ref(false) // 控制选择样品对话框显隐
const projectVisible = ref(false) // 控制选择分包方对话框显隐
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const pageType = ref('add') // 页面类型: add, edit, detail
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const dataForm: Ref<IForm> = ref({
  certificateCode: '', // 证书号
  certificateName: '', // 证书名称
  expirationDate: '', // 证书有效期
  issuanceDate: '', // 证书出具日期
  certificateFile: '', // 证书文件
  originalRecordFile: '', // 原始记录文件
  orderId: '', // 委托书id
  outsourcerId: '', // 分包方id
  outsourcerName: '', // 检测单位名称-分包方名称
  outsourcerNo: '', // 分包方编号
  sampleId: '', // 样品id
  sampleName: '', // 样品名称
  sampleNo: '', // 样品编号
  sampleModel: '', // 型号
  manufacturingNo: '', // 出厂编号
})// 表单
const ruleFormRef = ref<FormInstance>() // 表单ref
// 校验规则
const rules = ref({
  // sampleModel: [{ required: true, message: '要求样品型号不能为空', trigger: 'blur' }],
  // manufacturingNo: [{ required: true, message: '要求出厂编号不能为空', trigger: 'blur' }],
  certificateCode: [{ required: true, message: '要求证书编号不能为空', trigger: 'blur' }],
  certificateName: [{ required: true, message: '要求证书名称不能为空', trigger: 'blur' }],
  expirationDate: [{ required: true, message: '要求证书有效期不能为空', trigger: 'blur, change' }],
  issuanceDate: [{ required: true, message: '要求证书出具日期不能为空', trigger: 'blur, change' }],
  outsourcerName: [{ required: true, message: '要求样检测单位名称不能为空', trigger: 'blur, change' }],
  sampleNo: [{ required: true, message: '要求样品编号不能为空', trigger: 'blur, change' }],
}) // 表单验证规则

// 关闭
const close = () => {
  $router.back()
}

// -----------------------------------------路由参数--------------------------------
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(';;;;;;;;;;;;;;', $route.params)

// ------------------------------------------选择样品---------------------------------------
// 点击选择样品
const handleSelectSample = () => {
  if (!dataForm.value.outsourcerId) {
    ElMessage.warning('请先选择检测单位')
    return
  }
  sampleVisible.value = true // 选择样品对话框显隐
}
// 修改委托方对话框显隐
const changeSampleVisible = (val: boolean) => {
  sampleVisible.value = val
}
// 选好样品
const clickConfirmSample = (val: any) => {

}
// -----------------------------------------选择分包方------------------------------------------
// 修改项目选择对话框显隐
const changeProjectVisible = (val: boolean) => {
  projectVisible.value = val
}
// 点击选择分包方
const handleSelectOutsourcer = () => {
  projectVisible.value = true // 选择分包方对话框显隐
}
// 选择分好包方
const clickConfirmProject = (val: any) => {
  dataForm.value.outsourcerId = val[0].id // 分包方id
  dataForm.value.outsourcerNo = val[0].outsourcerNo // 分包方编号
  dataForm.value.outsourcerName = val[0].outsourcerName // 公司名称
}
// ---------------------------------------------------------------------------------------
// 点击保存
const saveForm = () => {

}
</script>

<template>
  <div>
    <!-- 布局 -->
    <app-container>
      <detail-page v-loading="loading" :title="`分包证书管理-${textMap[pageType]}`">
        <template #btns>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm">
            保存
          </el-button>
          <el-button type="info" @click="close">
            关闭
          </el-button>
        </template>
        <div id="form">
          <el-form
            ref="ruleFormRef"
            :model="dataForm"
            :label-width="120"
            label-position="right"
            :rules="rules"
          >
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="证书编号:" prop="certificateCode">
                  <el-input
                    v-model="dataForm.certificateCode"
                    :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="证书名称:" prop="certificateName">
                  <el-input
                    v-model.trim="dataForm.certificateName"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书名称'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col><el-col :span="6">
                <el-form-item label="证书有效期 :" prop="expirationDate">
                  <el-date-picker
                    v-model="dataForm.expirationDate"
                    type="date"
                    style="width: 100%;"
                    :placeholder="pageType === 'detail' ? '' : '请选择证书有效期'"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="证书出具日期  :" prop="issuanceDate">
                  <el-date-picker
                    v-model="dataForm.issuanceDate"
                    type="date"
                    style="width: 100%;"
                    :placeholder="pageType === 'detail' ? '' : '请选择证书出具日期 '"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="检测单位:" prop="outsourcerName">
                  <el-input
                    v-model="dataForm.outsourcerName"
                    :placeholder="pageType === 'detail' ? '' : '请选择检测单位'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  >
                    <template #append>
                      <el-button size="small" @click="handleSelectOutsourcer">
                        选择
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="样品编号:" prop="sampleNo">
                  <el-input
                    v-model="dataForm.sampleNo"
                    :placeholder="pageType === 'detail' ? '' : '请选择样品'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  >
                    <template #append>
                      <el-button size="small" @click="handleSelectSample">
                        选择
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="样品名称:" prop="sampleName">
                  <el-input
                    v-model="dataForm.sampleName"
                    :placeholder="pageType === 'detail' ? '' : ''"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="样品型号:" prop="sampleModel">
                  <el-input
                    v-model="dataForm.sampleModel"
                    :placeholder="pageType === 'detail' ? '' : ''"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出厂编号:" prop="manufacturingNo">
                  <el-input
                    v-model="dataForm.manufacturingNo"
                    :placeholder="pageType === 'detail' ? '' : ''"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="marg">
              <el-col :span="14">
                <el-form-item label="原始记录附件:">
                  <show-photo v-if="dataForm.originalRecordFile" :minio-file-name="dataForm.originalRecordFile" />
                  <span v-else-if="pageType === 'detail'">无</span>
                  <input v-show="pageType === ''" ref="fileRef" type="file" @change="onFileChange">
                  <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': dataForm.originalRecordFile === '' ? '0px' : '20px' }" @click="upload">
                    {{ dataForm.originalRecordFile === '' ? '上传' : '更换附件' }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="marg">
              <el-col :span="14">
                <el-form-item label="证书报告附件:">
                  <show-photo v-if="dataForm.certificateFile" :minio-file-name="dataForm.certificateFile" />
                  <span v-else-if="pageType === 'detail'">无</span>
                  <input v-show="pageType === ''" ref="fileRef" type="file" @change="onFileChange">
                  <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': dataForm.certificateFile === '' ? '0px' : '20px' }" @click="upload">
                    {{ dataForm.certificateFile === '' ? '上传' : '更换附件' }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </detail-page>
      <!-- 项目选择 -->
      <select-project-approve
        v-model:visible="projectVisible" @clickConfirmProject="clickConfirmProject"
        @change-visible="changeProjectVisible(false)"
      />
      <!-- 样品增加弹窗 -->
      <select-sample v-model:visible="sampleVisible" :is-multi="false" @click-confirm-sample="clickConfirmSample" @change-visible="changeSampleVisible" />
    </app-container>
  </div>
</template>