<!-- 测试、校准或检定合格分包方名录编辑 -->
<script lang="ts" setup name="SubpackageReviewEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import deviceTable from './deviceTable.vue'
import ApprovalDialog from './ApprovalDialog.vue'
import subpackageDialog from './subpackageDialog.vue'
import showPhoto from '@/views/tested/device/info/components/showPhotoSinge.vue'
import { delTextBtn, editBtn, submitBtn } from '@/utils/applyBtns'
import { getDictByCode } from '@/api/system/dict'
import { SCHEDULE } from '@/utils/scheduleDict'
import { uploadApi } from '@/api/system/notice'
import useUserStore from '@/store/modules/user'
import { getAdminDept, getUserDept } from '@/api/system/user'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
// import { printPdf } from '@/utils/printUtils'
import { getFiles } from '@/utils/download'
import { exportFile, printContent } from '@/utils/exportUtils'
import { cancelReview, deleteReview, editReview, getDetail, printPageApi, submitReview } from '@/api/eqpt/subpackage/task'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const submitId = ref('') // 提交id-保存接口获取
const ruleFormRef = ref<FormInstance>() // from组件
const statusName = $route.query.statusName as string
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
// 表单
const ruleForm = ref({
  id: '',
  equipmentList: [],
  processId: '',
  orderNo: '',
  createCompanyName: '',
  createCompanyId: '',
  createDeptId: '',
  createDeptName: '',
  createTime: '',
  createUserName: '',
  createUserId: '',
  deliverer: '',
  delivererTime: '',
  delivererTel: '',
  subcontractorNo: '',
  subcontractorId: '',
  subcontractorCompanyName: '',
  address: '',
  fax: '',
  postcode: '',
  contact: '',
  contactNumber: '',
})
const deviceRef = ref()
// 表单1验证规则
const rules = ref<FormRules>({
  subcontractorNo: [{ required: true, message: '外送机构必选', trigger: ['blur', 'change'] }],
  deliverer: [{ required: true, message: '送检人必填', trigger: ['blur', 'change'] }],
  delivererTel: [{ required: true, message: '送检人电话必填', trigger: ['blur', 'change'] }],
  delivererTime: [{ required: true, message: '送检时间必选', trigger: ['blur', 'change'] }],
  contact: [{ required: true, message: '联系人必填', trigger: ['blur', 'change'] }],
  contactNumber: [{ required: true, message: '联系人电话必填', trigger: ['blur', 'change'] }],
})

// 获取下拉框数据
// const reasonList = ref<{ id: string; value: string; name: string }[]>() // 规模
// const fetchSelectData = () => {
// 分包原因
// getDictByCode('eqptSubpackageReason').then((res) => {
//   reasonList.value = res.data
// })
// }
const isAdmin = ref(false)
const flag = ref(false)
// 创建单位
const companyList = ref<{ id: string; value: string; name: string }[]>([])
const deptList = ref<any>([])
// fetchSelectData()
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string || 'detail'
  ruleFormRef.value?.resetFields()
  getUserDept().then((res) => {
    flag.value = true
    if (res.data.fullName === '顶级' || res.data.version === '1' || res.data.version === 1) {
      isAdmin.value = true
      getAdminDept({}).then((res) => {
        companyList.value = res.data.map((item: any) => ({ id: item.id, value: item.id, name: item.fullName }))
      })
    }
    else {
      isAdmin.value = false
      ruleForm.value.createCompanyId = res.data.id
      ruleForm.value.createCompanyName = res.data.fullName
      ruleForm.value.createDeptId = userStore.deptId
      ruleForm.value.createDeptName = userStore.deptName
    }
    setTimeout(() => {
      flag.value = false
    })
  })
  if (!$route.path.includes('create')) {
    const data = JSON.parse($route.query.row as string)
    getDetail({ id: data.id }).then((res) => {
      flag.value = true
      const data = res.data
      ruleForm.value = data
      setTimeout(() => {
        flag.value = false
      })
    })
  }
  if ($route.path.includes('create')) {
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    ruleForm.value.createUserId = userStore.id
    ruleForm.value.createUserName = userStore.name
    ruleForm.value.deliverer = userStore.name
    // ruleForm.value.createDeptId = userStore.deptId
    // ruleForm.value.createDeptName = userStore.deptName
    // getUserDept().then((res) => {
    //   ruleForm.value.createDeptId = res.data.id
    //   ruleForm.value.createDeptName = res.data.fullName
    // })
  }
}
onMounted(() => {
  initDialog()
})
watch(() => ruleForm.value.createCompanyId, (newVal) => {
  if (newVal) {
    getDeptTreeList({ pid: newVal }).then((res) => {
      deptList.value = toTreeList(res.data.map((item: any) => ({ ...item, label: item.name, value: item.id })))
    })
  }
  if ($route.path.includes('detail') || !isAdmin.value || flag.value) { return }
  ruleForm.value.createDeptId = ''
})
// 关闭弹窗
const close = () => {
  $router.back()
}
const disabledSave = ref(false)
// 保存
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  Promise.all([formEl.validate()]).then(() => {
    // 验证表格
    if (deviceRef.value.checkCertificateList()) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        disabledSave.value = true
        if (submitId.value) {
          ruleForm.value.id = submitId.value
        }
        ruleForm.value.equipmentList = deviceRef.value.list
        if (isAdmin.value) {
          ruleForm.value.createCompanyName = companyList.value.filter(item => item.value === ruleForm.value.createCompanyId)[0]?.name
          ruleForm.value.createDeptName = deptList.value.filter((item: any) => item.value === ruleForm.value.createDeptId)[0]?.label
        }
        editReview(ruleForm.value).then((res) => {
          disabledSave.value = false
          submitId.value = res.data
          if (statusName === '已取消' || statusName === '未通过') {
            submitReview({ id: submitId.value, formId: SCHEDULE.SUBCONTRACT_DELIVERY_APPROVAL }).then((res) => {
              ElMessage.success('已提交')
              close()
            })
          }
          else {
            ElMessage.success('保存成功')
          }
        }).catch(() => {
          disabledSave.value = false
        })
      })
    }
  })
}
// 提交
const submitForm = () => {
  if (submitId.value === '') {
    ElMessage.warning('请先保存')
    return false
  }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then((res) => {
    submitReview({ id: submitId.value, formId: SCHEDULE.SUBCONTRACT_DELIVERY_APPROVAL }).then((res) => {
      ElMessage.success('已提交')
      close()
    })
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}
// 编辑
const editForm = () => {
  $router.push({
    path: '/rtaskpage/update',
    query: { ...$route.query },
  })
}
// 删除
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    deleteReview({ id: ruleForm.value.id }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 取消
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    cancelReview({ id: ruleForm.value.id, processInstanceId: ruleForm.value.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
  const data = JSON.parse($route.query.row as string)
  approvalDialogRef.value.initDialog(type, JSON.parse($route.query.row as string).taskId, data.processId, ruleForm.value.id)
}
// 选择分包方
const subpackageRef = ref()
const selectSubpackage = () => {
  subpackageRef.value.initDialog()
}
// 确认分包方
const confirm = (subpackage: any) => {
  console.log(subpackage, 'subpackage')
  ruleForm.value.subcontractorNo = subpackage.subcontractorNo
  ruleForm.value.subcontractorId = subpackage.id
  ruleForm.value.subcontractorCompanyName = subpackage.subcontractorCompanyName
  ruleForm.value.address = subpackage.address
  ruleForm.value.postcode = subpackage.postcode
  ruleForm.value.fax = subpackage.fax
  ruleForm.value.subcontractorCompanyName = subpackage.companyName
  ruleForm.value.contact = subpackage.directorName
  ruleForm.value.contactNumber = subpackage.telephone
}
const radio = ref('基本信息')

const { proxy } = getCurrentInstance() as any
const permUrl = ref({
  agree: '/tested/subpackage/review/agree',
  reject: '/tested/subpackage/review/reject',
})
// 打印
const printPage = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  printPageApi({
    id: ruleForm.value.id,
    pdf: true,
  }).then((res) => {
    loading.close()
    // printContent(res.data)
    printContent(getFiles(res.data, 'application/pdf;chartset=UTF-8'))
  }).catch(() => {
    loading.close()
  })
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <!-- 分包方弹窗 -->
    <subpackage-dialog ref="subpackageRef" @add="confirm" />
    <detail-page class="base-info-device" :title="`外送申请单-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="statusName === '待审批' && proxy.hasPerm(permUrl.agree)" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="statusName === '待审批' && proxy.hasPerm(permUrl.reject)" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button v-if="editBtn(statusName, dialogStatus)" type="primary" @click="editForm()">
          编辑
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus) && statusName !== '已取消' && statusName !== '未通过'" type="primary" @click="submitForm()">
          提交
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus)" :disabled="disabledSave" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button v-if="delTextBtn(statusName)" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <el-button v-if="statusName === '全部' && $route.path.includes('detail')" type="primary" @click="printPage">
          打印
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com v-if="!$route.path.includes('create') && $route.query.statusName !== '全部' && $route.query.statusName !== '草稿箱'">
      <el-radio-group v-model="radio">
        <el-radio-button label="基本信息" />
        <el-radio-button v-if="$route.query.statusName !== '全部' && $route.query.statusName !== '草稿箱'" label="审批详情" />
      </el-radio-group>
    </detail-block-com>
    <div v-show="radio === '基本信息'">
      <detail-block-com>
        <el-form
          ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="126px" class="form"
          :class="[dialogStatus === 'detail' ? 'isDetail' : '']" :disabled="$route.path.includes('detail')"
        >
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="文件编号" prop="orderNo">
                <el-input v-model.trim="ruleForm.orderNo" placeholder="系统自动生成" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请单位" prop="createCompanyId">
                <!-- <el-input v-model.trim="ruleForm.createCompanyName" placeholder="申请单位" disabled /> -->
                <el-select v-if="isAdmin && !$route.path.includes('detail')" v-model="ruleForm.createCompanyId" clearable filterable placeholder="申请单位" style="width: 100%;">
                  <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-input v-else v-model.trim="ruleForm.createCompanyName" placeholder="申请单位" disabled style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请部门" prop="createDeptId">
                <!-- <el-input v-model.trim="ruleForm.createDeptName" placeholder="申请部门" disabled /> -->
                <el-tree-select
                  v-if="isAdmin && !$route.path.includes('detail')"
                  v-model="ruleForm.createDeptId"
                  style="width: 100%;"
                  :data="deptList"
                  :render-after-expand="false"
                  check-strictly
                  placeholder="申请部门"
                />
                <el-input v-else v-model.trim="ruleForm.createDeptName" placeholder="申请部门" disabled style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请时间" prop="createTime">
                <el-date-picker
                  v-model="ruleForm.createTime" type="date" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" placeholder="申请时间" class="normal-date" style="width: 100%;" disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="申请人" prop="createUserName">
                <el-input v-model.trim="ruleForm.createUserName" placeholder="申请人" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人" prop="deliverer">
                <el-input v-model.trim="ruleForm.deliverer" placeholder="请输入联系人" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="delivererTel">
                <el-input v-model.trim="ruleForm.delivererTel" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请送检时间" prop="delivererTime">
                <el-date-picker
                  v-model="ruleForm.delivererTime" type="date" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" placeholder="申请送检时间" class="normal-date" style="width: 100%;"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="外送机构编号" prop="subcontractorNo">
                <el-input v-model.trim="ruleForm.subcontractorNo" placeholder="外送机构编号" @focus="selectSubpackage">
                  <template v-if="!$route.path.includes('detail')" #append>
                    <span @click="selectSubpackage">选择</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="外送机构名称" prop="subcontractorCompanyName">
                <el-input v-model.trim="ruleForm.subcontractorCompanyName" placeholder="外送机构名称" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地址" prop="address">
                <el-input v-model.trim="ruleForm.address" :placeholder="$route.path.includes('detail') ? ' ' : '地址'" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮编" prop="postcode">
                <el-input v-model.trim="ruleForm.postcode" :placeholder="$route.path.includes('detail') ? ' ' : '邮编'" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="marg">
            <el-col :span="6">
              <el-form-item label="传真" prop="fax">
                <el-input v-model.trim="ruleForm.fax" :placeholder="$route.path.includes('detail') ? ' ' : '传真'" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人" prop="contact">
                <el-input v-model.trim="ruleForm.contact" placeholder="请输入联系人" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="contactNumber">
                <el-input v-model.trim="ruleForm.contactNumber" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </detail-block-com>
      <detail-block-com>
        <device-table ref="deviceRef" :data="ruleForm.equipmentList" :status="dialogStatus" />
      </detail-block-com>
    </div>
    <div v-if="radio === '审批详情'">
      <approval-record-table :process-id="ruleForm.processId" />
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      content: "";
      display: none;
    }
  }
}
</style>