<!-- 测试、校准或检定工作分包协议书 基本信息 -->
<script name="SubpackageAgreementBasic" lang="ts" setup>
import dayjs from 'dayjs'
import type { FormRules } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { Ref } from 'vue'
import type { IForm } from '../agreement-interface'
import useOpenPdfinBrowser from '@/commonMethods/useOpenPdfinBrowser'
import SelectOutsourcerReviewDialog from '@/views/business/subpackage/inform/dialog/selectReviewDialog.vue'
import {
  addAgreement,
  failUpdateAgreement,
  getInfo,
  submit,
  updateAgreement,
} from '@/api/business/subpackage/agreement'
import { getInfo as getDirectoriesDetail } from '@/api/business/subpackage/directories'
import { getInfo as getReviewDetail } from '@/api/business/subpackage/Review'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import useUserStore from '@/store/modules/user'
import { SCHEDULE } from '@/utils/scheduleDict'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    requre: true,
    default: 'detail',
  },
  id: {
    type: String,
    requre: true,
  },
  approvalStatusName: { // 审批状态名称
    type: String,
    requre: true,
  },
})
const emits = defineEmits(['addSuccess', 'submitSuccess', 'getInfoSuccess'])
const user = useUserStore() // 用户信息
const form: Ref<IForm> = ref({
  labCode: '', // 实验室
  groupCode: '', // 部门
  protocolNo: '', // 协议书编号
  projectName: '', // 协议书名称
  formId: '',
  outsourcerId: '', // 分包方id
  outsourcerNo: '', // 分包方编号
  outsourcerName: '', // 分包机构名称
  contacts: '', // 联系人
  mobile: '', // 联系电话
  fullAddress: '', // 公司地址-详细地址
  address: '', // 地址
  requireDate: '', // 要求完成日期
  outsourceCost: '', // 分包费用(元)
  director: '', // 机构负责人
  item: '', // 分包项目
  requires: '', // 分包要求
  remark: '', // 其他
  accessId: '', // 分包方评审表id
  accessNo: '', // 分包方评审表编号
  accessOtherFile: '', // 上传版
  accessFile: '', // 系统生成版
})
const ruleFormRef = ref() // 表单ref
const loading = ref(false) // loading
const infoId = ref('') // id

const rules = ref<FormRules>({
  // 表单验证规则
  labCode: [{ required: true, message: '实验室不能为空', trigger: ['blur', 'change'] }],
  groupCode: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }],
  accessNo: [{ required: true, message: '分包方评审表不能为空', trigger: ['blur', 'change'] }],
  contacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
  mobile: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
  address: [{ required: true, message: '地址不能为空', trigger: ['blur', 'change'] }],
  requireDate: [{ required: true, message: '要求完成日期不能为空', trigger: ['blur', 'change'] }],
  outsourceCost: [{ required: true, message: '分包费用不能为空', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '分包费用只能为数字', trigger: ['blur', 'change'] },
  ],
  director: [{ required: true, message: '分包方负责人不能为空', trigger: ['blur', 'change'] }],
  item: [{ required: true, message: '分包项目不能为空', trigger: 'blur' }],
  requires: [{ required: true, message: '分包要求不能为空', trigger: 'blur' }],
  remark: [{ required: true, message: '其他不能为空', trigger: 'blur' }],
})
// ------------------------------------------字典----------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室
const groupCodeList = ref<dictType[]>([]) // 部门
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识
const meterIdentifyMap = ref([]) as any // 计量标识
async function getDict() {
  // 计量标识
  const response = await getDictByCode('eqptMeterIdentify')
  response.data.forEach((item: { value: string; name: string }) => {
    meterIdentifyMap.value[`${item.value}`] = item.name
  })
  meterIdentifyDict.value = response.data
  // 实验室
  getDictByCode('bizGroupCodeEquipment').then((response) => {
    labCodeList.value = response.data
  })
  // 部门
  getDictByCode('bizGroupCode').then((response) => {
    groupCodeList.value = response.data
  })
}
// ----------------------------------------分包项目--------------------------------------
const list = ref([]) // 分包项目
const columns = [
  { text: '受检设备名称', value: 'equipmentName', align: 'center' },
  { text: '规格型号', value: 'model', align: 'center' },
  { text: '出厂编号', value: 'manufactureNo', align: 'center' },
  { text: '计量标识', value: 'meterIdentifyName', align: 'center' },
  { text: '检定有效期', value: 'validDate', align: 'center' },
]
// ----------------------------------------选择分包方评审表--------------------------------------
const selectOutsourcerReviewDialogRef = ref() // 选择分包方组件ref
// 点击选择
const selectOutsourcerReview = () => {
  selectOutsourcerReviewDialogRef.value.initDialog()
}

// 获取分包评审表详情
function fetchgetReviewDetail(id: string) {
  getReviewDetail({ id }).then((response) => {
    form.value.outsourcerName = response.data.outsourcerName // 分包方名称
    form.value.accessId = response.data.id // 分包方评审表id
    form.value.accessNo = response.data.projectNo // 分包方评审表编号
    form.value.outsourcerId = response.data.outsourcerId // 分包方id
    form.value.contacts = response.data.contacts // 联系人
    form.value.mobile = response.data.mobile // 联系电话
    form.value.fullAddress = response.data.fullAddress // 地址
    form.value.address = response.data.fullAddress // 地址
    list.value = response.data.equipmentList.map((item: { validDate: string; meterIdentify: string }) => {
      return {
        ...item,
        validDate: item.validDate ? dayjs(item.validDate).format('YYYY-MM-DD') : item.validDate, // 检定有效期
        meterIdentifyName: `${item.meterIdentify}` ? meterIdentifyMap.value[item.meterIdentify] : item.meterIdentify, // 计量标识
      }
    })
  })
}

// 确定选择分包方
const confirmSelectOutsourcerReview = (val: any) => {
  if (val && val.length) {
    fetchgetReviewDetail(val[0].id) // 获取分包评审表详情
  }
}

// -----------------------------------------其他方法------------------------------------------

// 获取详情
const fetchInfo = () => {
  loading.value = true
  getInfo({ id: infoId.value }).then((res) => {
    loading.value = false
    form.value = res.data
    form.value.fullAddress = res.data.outsourceAssessDetail.fullAddress
    form.value.address = res.data.outsourceAssessDetail.fullAddress
    fetchgetReviewDetail(form.value.accessId)
    emits('getInfoSuccess', form.value.accessOtherFile, form.value.accessFile)
  })
}

// 点击证书报告
const clickPrintFile = (file: string) => {
  useOpenPdfinBrowser(file)
}
const $router = useRouter()

// 点击分包方评审表编号
const handleClickAccessNo = () => {
  $router.push({
    path: `/reviewDoc/detail/${form.value.accessId}`,
    query: {
      approvalStatusName: '全部', // 审批状态名称
    },
  })
}
// -----------------------------------------------保存---------------------------------------
/**
 * 点击保存
 * @param formEl 基本信息表单ref
 */
const saveForm = async () => {
  await ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      // 基本信息表单通过校验
      ElMessageBox.confirm('确认保存吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const loading = ElLoading.service({
          lock: true,
          text: '加载中...',
          background: 'rgba(255, 255, 255, 0.6)',
        })
        const params = {
          ...form.value,
          outsourceAssessDetail: {
            id: form.value.accessId, // 分包评审表id
            equipmentList: list.value,
          },
          item: list.value.map((item: any) => `${item.equipmentName}-${item.model}-${item.manufactureNo}`).join(','), // 模板的分包项目
        }
        if (props.pageType === 'add') {
          // 新建
          addAgreement(params).then((res) => {
            loading.close()
            form.value.protocolNo = res.data.protocolNo // 协议书编号
            infoId.value = res.data.id // id
            emits('addSuccess', infoId.value)
            ElMessage.success('已保存')
          }).catch(() => {
            loading.close()
          })
        }
        else if (props.pageType === 'edit') {
          // 编辑
          if (props.approvalStatusName === '草稿箱' || props.approvalStatusName === '全部') {
            updateAgreement(params).then((res) => {
              loading.close()
              emits('addSuccess', infoId.value)
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
          else {
            // '未通过' || '已取消'
            failUpdateAgreement(params).then((res) => {
              loading.close()
              emits('submitSuccess')
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
        }
      })
    }
  })
}

// ----------------------------------------------提交--------------------------------------------
// 提交
/**
 *
 * @param processId 流程实例id
 * @param id // id
 */
const submitForm = (processId: string, id: string) => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  submit({
    id,
    formId: SCHEDULE.SUBPACKAGE_AGREEMENT_APPROVAL,
    processId,
  }).then((res) => {
    ElMessage.success('已提交')
    emits('submitSuccess')
    loading.close()
  })
}

// ---------------------------------------------钩子----------------------------------------------
watch(
  () => props.id, (newValue) => {
    infoId.value = newValue!
    if (infoId.value) {
      fetchInfo() // 获取详情信息
    }
  },
  { immediate: true },
)

onMounted(async () => {
  await getDict() // 获取字典
  if (props.pageType !== 'add' && infoId.value) {
    fetchInfo() // 获取详情信息
  }
  if (props.pageType === 'add') {
    form.value.labCode = user.bizLabCode
    form.value.groupCode = user.groupNo
    form.value.projectName = '测试、校准或检定工作分包协议书' // 评审表名称
  }
})

defineExpose({ saveForm, submitForm, form })
</script>

<template>
  <detail-block v-loading="loading" title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="130"
      label-position="right"
      :rules="rules"
    >
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="实验室" prop="labCode">
            <el-select
              v-model="form.labCode"
              :placeholder="pageType === 'detail' ? ' ' : '请选择实验室'"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option
                v-for="item in labCodeList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门" prop="groupCode">
            <el-select
              v-model="form.groupCode"
              :placeholder="pageType === 'detail' ? ' ' : '请选择部门'"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            >
              <el-option
                v-for="item in groupCodeList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文件编号:" prop="protocolNo">
            <el-input
              v-model="form.protocolNo"
              :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文件名称:" prop="projectName">
            <el-input
              v-model.trim="form.projectName"
              :placeholder="pageType === 'detail' ? '' : '文件名称'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分包方评审表:" prop="accessNo">
            <el-input
              v-if="pageType !== 'detail'"
              v-model="form.accessNo"
              disabled
              :placeholder="pageType === 'detail' ? '' : '请选择分包方评审表'"
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button size="small" @click="selectOutsourcerReview">
                  选择
                </el-button>
              </template>
            </el-input>
            <span v-if="pageType === 'detail'" class="link" @click="handleClickAccessNo">{{ form.accessNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分包方名称:" prop="outsourcerName">
            <el-input
              v-model="form.outsourcerName"
              :placeholder="pageType === 'detail' ? '' : '分包机构名称'"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人:" prop="contacts">
            <el-input
              v-model="form.contacts"
              :placeholder="pageType === 'detail' ? '' : '联系人'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话:" prop="mobile">
            <el-input
              v-model="form.mobile"
              :placeholder="pageType === 'detail' ? ' ' : '请输入电话'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址:" prop="fullAddress">
            <el-input
              v-model="form.fullAddress"
              :placeholder="pageType === 'detail' ? '' : '地址'"
              disabled
              type="textarea"
              autosize
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="要求完成日期:" prop="requireDate">
            <el-date-picker
              v-model="form.requireDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :placeholder="pageType === 'detail' ? ' ' : '请选择要求完成日期'"
              :disabled="pageType === 'detail'"
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分包费用(元):" prop="outsourceCost">
            <el-input-number
              v-model="form.outsourceCost"
              placeholder="请输入分包费用"
              :disabled="pageType === 'detail'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <normal-table
        :data="list"
        :columns="columns"
        :pagination="false"
        style="margin: 20px 0;"
      >
        <!-- 序号 -->
        <template #preColumns>
          <el-table-column label="#" width="55" align="center" fixed>
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
      </normal-table>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="分包要求:" prop="requires">
            <el-input
              v-model="form.requires"
              type="textarea"
              :placeholder="pageType === 'detail' ? ' ' : '请输入分包要求'"
              :autosize="{ minRows: 3 }"
              :disabled="pageType === 'detail'"
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="其他:" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              :placeholder="pageType === 'detail' ? ' ' : '请输入其他'"
              :disabled="pageType === 'detail'"
              :autosize="{ minRows: 3 }"
              :class="{ 'detail-input': pageType === 'detail' }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
  <detail-block v-if="props.approvalStatusName === '全部'" v-loading="loading" title="">
    <el-form
      :model="form"
      :label-width="320"
      label-position="right"
    >
      <el-form-item label="测试、校准或检定工作分包协议书(系统生成版)：" prop="minioFileName">
        <span v-if="form.accessFile" class="link" @click="clickPrintFile(form.accessFile)">{{ form.accessFile }}</span>
        <span v-if="!form.accessFile">/</span>
      </el-form-item>
      <el-form-item label="测试、校准或检定工作分包协议书(上传版)：" prop="minioFileName">
        <span v-if="form.accessOtherFile" class="link" @click="clickPrintFile(form.accessOtherFile)">{{ form.accessOtherFile }}</span>
        <span v-if="!form.accessOtherFile">/</span>
      </el-form-item>
    </el-form>
  </detail-block>

  <!-- 选择分包方评审表 -->
  <select-outsourcer-review-dialog ref="selectOutsourcerReviewDialogRef" @confirm="confirmSelectOutsourcerReview" />
</template>

<style lang="scss" scoped>
.link {
  color: #5da0ff;
  text-decoration: underline;
  cursor: pointer;
  margin-right: 8px;
}
</style>