<!-- 设备收发管理详情 -- 分包信息 -->
<script lang="ts" setup name="SendReceiveDetailSubpackageInfo">
import { getInfo } from '@/api/business/subpackage/directories'
const props = defineProps({
  subpackageInfo: Object,
})

// 表单
const form = ref({
  outsourcerId: '', // 分包方id
  outsourcerNo: '', // 分包方编号
  outsourcerName: '', // 分包方名称
  director: '', // 机构负责人
  fullAddress: '', // 地址
  postalCode: '', // 邮政编码
  contacts: '', // 联系人
  mobile: '', // 电话
  protocolId: '', //	协议书id
  protocolNo: '', //	协议书编号
  noticeId: '', //	通知书id
  noticeNo: '', //	通知书编号
  accessNo: '', //	评审表编号
  accessId: '', //	评审表id
})
const $router = useRouter()
const clickPrintFile = (type: string) => {
  switch (type) {
    case 'access': // 评审表
      $router.push({
        path: `/reviewDoc/detail/${form.value.accessId}`,
        query: {
          approvalStatusName: '全部', // 审批状态名称
        },
      })
      break
    case 'protocol': // 协议书

      $router.push({
        path: `/agreementDoc/detail/${form.value.protocolId}`,
        query: {
          approvalStatusName: '全部', // 审批状态名称
        },
      })
      break
    case 'notice': // 通知书
      $router.push({
        path: `/informDoc/detail/${form.value.noticeId}`,
        query: {
          approvalStatusName: '全部', // 审批状态名称
        },
      })
      break
  }
}

watch(() => props.subpackageInfo, (newValue) => {
  if (newValue) {
    form.value = {
      outsourcerId: newValue!.outsourcerId, // 分包方id
      outsourcerNo: newValue!.outsourcerNo, // 分包方编号
      outsourcerName: newValue!.outsourcerName, // 分包方名称
      director: newValue!.director, // 机构负责人
      fullAddress: newValue!.fullAddress, // 地址
      postalCode: newValue!.postalCode, // 邮政编码
      contacts: newValue!.contacts, // 联系人
      mobile: newValue!.mobile, // 电话
      protocolId: newValue!.protocolId, //	协议书id
      protocolNo: newValue!.protocolNo, //	协议书编号
      noticeId: newValue!.noticeId, //	通知书id
      noticeNo: newValue!.noticeNo, //	通知书编号
      accessNo: newValue!.accessNo, //	评审表编号
      accessId: newValue!.accessId, //	评审表id
    }
    if (!newValue!.outsourcerNo) { // 没有分包设备编号的话去用分包方id去查
      getInfo({ id: form.value.outsourcerId }).then((res) => {
        form.value.outsourcerNo = res.data.outsourcerNo
      })
    }
  }
}, { deep: true, immediate: true })
</script>

<template>
  <detail-block title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="130"
      label-position="right"
    >
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="分包方编号:" prop="outsourcerNo">
            <el-input
              v-model="form.outsourcerNo"
              placeholder="分包方编号"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分包方名称:" prop="outsourcerName">
            <el-input
              v-model="form.outsourcerName"
              placeholder="分包方名称"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="机构负责人:" prop="director">
            <el-input
              v-model="form.director"
              placeholder="机构负责人"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮政编码:" prop="postalCode">
            <el-input
              v-model="form.postalCode"
              placeholder="邮政编码"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址:" prop="fullAddress">
            <el-input
              v-model="form.fullAddress"
              placeholder="地址"
              class="detail-input"
              type="textarea"
              autosize
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人:" prop="contacts">
            <el-input
              v-model="form.contacts"
              placeholder="联系人"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话:" prop="mobile">
            <el-input
              v-model="form.mobile"
              placeholder="电话"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="测试、校准或检定工作分包评审表：" label-width="240" prop="minioFileName">
            <span v-if="form.accessNo" class="link" @click="clickPrintFile('access')">{{ form.accessNo }}</span>
            <span v-if="!form.accessNo">/</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="测试、校准或检定工作分包通知书：" label-width="240" prop="minioFileName">
            <span v-if="form.noticeNo" class="link" @click="clickPrintFile('notice')">{{ form.noticeNo }}</span>
            <span v-if="!form.noticeNo">/</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg">
        <el-col :span="24">
          <el-form-item label="测试、校准或检定工作分包协议书：" label-width="240" prop="minioFileName">
            <span v-if="form.protocolNo" class="link" @click="clickPrintFile('protocol')">{{ form.protocolNo }}</span>
            <span v-if="!form.protocolNo">/</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
</template>

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