<!-- 更换证书 基本信息 -->
<script name="BusinessChangeCertApplyBasic" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormRules } from 'element-plus'
import dayjs from 'dayjs'
import type { IForm } from '../contract-interface'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import selectCustomerExamineList from '@/views/resource/file/grantNotice/dialog/selectCustomerExamineList.vue'
import { SCHEDULE } from '@/utils/scheduleDict'
import { getCustomerInfoList } from '@/api/resource/customer'
import useUserStore from '@/store/modules/user'
import { addCustomerContract, approvalDelete, cancelApproval, draftDelete, failUpdateCustomerContract, getCustomerContractDetail, getCustomerContractList, getInfo, refuseApproval, submit, updateCustomerContract } from '@/api/resource/contract'
const props = defineProps({
  pageType: { // 页面类型 add新建 edit编辑 detail详情
    type: String,
    requre: true,
    default: 'detail',
  },
  id: { // id
    type: String,
    requre: true,
  },
  approvalStatusName: { // 审批状态名称
    type: String,
    requre: true,
  },
  processId: { // 流程实例id
    type: String,
  },
})
const emits = defineEmits(['addSuccess', 'submitSuccess'])
const user = useUserStore() // 用户信息
const form = ref<IForm>({
  labCode: '', // 实验室
  labCodeName: '', // 实验室名称
  groupCode: '', // 部门
  groupCodeName: '', // 部门名称
  formNo: '', //		文件编号
  formName: '', //		文件名称
  createUserId: '', //		创建人id
  createUserName: '', //		创建人
  createTime: '', //		创建时间
  examineId: '', //	合同评审表id
  examineName: '', //	合同评审表名称
  examineNo: '', //	合同评审表编号
  examineNameAndNo: '', // 合同名称及编号
  customerId: '', //	委托方id(存储为deptId)
  customerName: '', //	委托方名称
  changeContent: '', //	变更内容
  changeReason: '', //	变更原因
  customerUserId: '', // 发送给的委托方用户id
})

const ruleFormRef = ref() // 表单ref
const ruleFormBottomRef = 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'] }],
  examineId: [{ required: true, message: '合同名称及编号不能为空', trigger: ['change', 'blur'] }],
  customerName: [{ required: true, message: '委托方不能为空', trigger: ['change', 'blur'] }],
  changeReason: [{ required: true, message: '变更原因不能为空', trigger: ['change', 'blur'] }],
  changeContent: [{ required: true, message: '变更内容不能为空', trigger: ['change', 'blur'] }],
})
// ------------------------------------------字典----------------------------------------------
const labCodeList = ref<dictType[]>([]) // 实验室
const groupCodeList = ref<dictType[]>([]) // 部门

function getDict() {
  // 实验室
  getDictByCode('bizLabCode').then((response) => {
    labCodeList.value = response.data
  })
  // 部门
  getDictByCode('bizGroupCode').then((response) => {
    groupCodeList.value = response.data
  })
}
getDict()
// -----------------------------------------------保存----------------------------------------------
/**
 * 点击保存
 * @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.8)',
        })
        const params = {
          ...form.value,
          id: infoId.value,
          processId: props.processId,
        }
        if (props.pageType === 'add') { // 新建
          addCustomerContract({ ...params, sendStatus: '2' }).then((res) => {
            loading.close()
            form.value.formNo = res.data.formNo // 文件编号
            infoId.value = res.data.id // id
            emits('addSuccess', infoId.value)
            ElMessage.success('已保存')
          }).catch(() => {
            loading.close()
          })
        }
        else if (props.pageType === 'edit') { // 编辑
          console.log(props.approvalStatusName)
          if (props.approvalStatusName === '草稿箱' || props.approvalStatusName === '全部') {
            updateCustomerContract(params).then((res) => {
              loading.close()
              emits('addSuccess', infoId.value)
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
          else { // '未通过' || '已取消'
            failUpdateCustomerContract(params).then((res) => {
              loading.close()
              emits('submitSuccess')
              // fetchInfo()
              ElMessage.success('已保存')
            }).catch(() => {
              loading.close()
            })
          }
        }
      })
    }
  })
}

// ----------------------------------------------提交--------------------------------------------
// 提交
/**
 *
 * @param processId 流程实例id
 * @param 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.CONTRACT_EXECUTE_CHANGE }).then((res) => {
    ElMessage.success('已提交')
    emits('submitSuccess')
    loading.close()
  })
}
// -----------------------------------------选择合同名称及编号----------------------------------------------
const selectCustomerExamineListRef = ref() // 选择证书组件ref
// 点击选择委托方合同评审表
const selectContract = () => {
  selectCustomerExamineListRef.value.initDialog()
}

// 查询委托方的deptId
const fetchCustomerDeptId = (customerName: string, customerId: string) => {
  if (!customerName || !customerId) { return }
  const flowFormId = 'zyglwtfml' // 资源管理 - 委托方名录
  const params = {
    customerNo: '', // 委托方编号
    customerName, // 委托方名字
    contacts: '', // 联系人
    createTimeStart: '', // 创建时间-起始
    createTimeEnd: '', // 创建时间-结束
    approvalStatus: '0', // 审批状态
    formId: flowFormId, // 表单id（流程定义对应的表单id，等价于业务id），此处为固定值
    offset: 1,
    limit: 20,
  }
  getCustomerInfoList(params).then((response) => {
    const tempList = response.data.rows.filter((item: { id: string }) => item.id === customerId) || []
    if (tempList.length) {
      // 后台要求委托方id-customerId参数传委托方的deptId
      form.value.customerId = tempList[0].deptId
    }
  })
}

// 确认选择委托方合同评审表
const confirmSelectFile = (val: any) => {
  if (val && val.length) {
    form.value.examineId =	val[0].id
    form.value.examineName =	val[0].formName
    form.value.examineNo =	val[0].formNo
    form.value.examineNameAndNo =	val[0].formName + val[0].formNo
    form.value.customerName =	val[0].customerName // 委托方
    form.value.customerId = val[0].customerId // 这里的customerId就是委托方的deptId
    // fetchCustomerDeptId(val[0].customerName, val[0].customerId)
  }
}

// -----------------------------------------------------------------------------------------------

const router = useRouter()
const changePage = () => {
  router.push({
    query: {
      id: form.value.examineId,
    },
    path: '/customer/examine/approved/detail',
  })
}

// 获取详情
const fetchCustomerContractDetail = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  getCustomerContractDetail({ id: infoId.value }).then((res) => {
    form.value = res.data
    loading.close()
  })
}
// ---------------------------------------------钩子----------------------------------------------
watch(() => props.id, (newValue) => {
  infoId.value = newValue!
}, { immediate: true })
const $route = useRoute()
onMounted(async () => {
  if (props.pageType === 'edit' || props.pageType === 'detail') {
    fetchCustomerContractDetail()
  }
  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.formName = '合同执行变更登记表' // 申请单名称
    form.value.labCode = user.bizLabCode
    form.value.labCodeName = user.labCodeName
    form.value.groupCodeName = user.groupName
    form.value.groupCode = user.groupNo
  }
})

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

<template>
  <el-form
    ref="ruleFormRef"
    :model="form"
    :label-width="130"
    label-position="right"
    :rules="rules"
  >
    <detail-block title="">
      <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="formNo">
            <el-input
              v-model="form.formNo"
              :placeholder="pageType === 'detail' ? '' : '系统自动生成'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文件名称:" prop="formName">
            <el-input
              v-model="form.formName"
              :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-row>
    </detail-block>
    <detail-block title="">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="合同名称及编号" prop="examineId">
            <el-input
              v-if="pageType !== 'detail'"
              v-model="form.examineNameAndNo"
              :placeholder="pageType === 'detail' ? '' : '请选择'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            >
              <template v-if="pageType !== 'detail'" #append>
                <el-button size="small" @click="selectContract">
                  选择
                </el-button>
              </template>
            </el-input>
            <span v-else class="link" @click="changePage">{{ form.examineNameAndNo }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="委托方:" prop="customerName">
            <el-input
              v-model="form.customerName"
              :placeholder="pageType === 'detail' ? ' ' : '委托方'"
              :class="{ 'detail-input': pageType === 'detail' }"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="变更原因:" prop="changeReason">
            <el-input
              v-model="form.changeReason"
              :rows="4"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 20 }"
              :placeholder="pageType === 'detail' ? '' : '变更原因'"
              :class="{ 'detail-input': pageType === 'detail' }"
              :disabled="pageType === 'detail'"
              show-word-limit
              :maxlength="500"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="变更内容:" prop="changeContent">
            <el-input
              v-model="form.changeContent"
              :rows="4"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 20 }"
              :placeholder="pageType === 'detail' ? '' : '变更内容'"
              :class="{ 'detail-input': pageType === 'detail' }"
              :disabled="pageType === 'detail'"
              show-word-limit
              :maxlength="500"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </detail-block>
  </el-form>
  <!-- 选择要求、委托书及合同评审表组件 -->
  <select-customer-examine-list ref="selectCustomerExamineListRef" send-flag="1" :is-multi="false" @confirm="confirmSelectFile" />
</template>

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