<!-- 分包申请详情 -->
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref } from 'vue'
import { filter } from 'lodash'
import type { IApplyDetail, IDetailList } from '../subpackage-interface'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { detail } from '@/api/business/subpackage/apply'
import { fetchApproval, submitApproval } from '@/api/approval'
import showPhoto from '@/views/system/tool/showPhoto.vue'

const $route = useRoute()
const $router = useRouter()
const query = $route.query
const detailForm = ref<IApplyDetail>({
  applicantName: '', // 申请名称
  applicantId: '', // 申请id
  applicantTime: '', // 申请时间
  applyApprovalStatus: '', // 申请状态
  applyMinioFileName: '', // 申请文件名称
  applyProcessId: '', // 申请流程id
  applyRemark: '', // 申请备注
  checkApprovalStatus: '', // 申请状态码
  checkConclusion: '', // 审批结果
  checkMinioFileName: '', // 审核文件名称
  checkProcessId: '', // 审批流程id
  checkRemark: '', // 审核备注
  checkTime: '', // 检查时间
  checkerId: '', // 检查id
  checkerName: '', // 检查名称
  createTime: '', // 创建时间
  createUser: '', // 创建人
  id: '',
  orderSampleList: '', // 订单列表
  outsourceReason: '', // 原因
  outsourceReasonName: '', // 原因名称
  outsourcerId: '', // 原因id
  outsourcerName: '', // 资源名称
  preCost: '', // 价值
  preEndTime: '', // 过期时间
  preStartTime: '', // 开始时间
  projectName: '', // 项目名称
  projectNo: '', // 项目编号
  sampleList: [] as any, // 样品列表
  updateTime: '', // 修改时间
})
// 校验规则
const formRules = ref({
  projectName: [{ required: true, message: '分包项目名称必填', trigger: 'blur' }],
  outsourcerId: [{ required: true, message: '分包方编号必填', trigger: ['blur', 'change'] }],
  outsourcerName: [{ required: true, message: '公司名称必填', trigger: ['blur', 'change'] }],
  outsourceReasonName: [{ required: true, message: '分包原因必填', trigger: ['blur', 'change'] }],
  preCost: [{ required: true, message: '预计费用必填', trigger: ['blur', 'change'] }],
  preStartTime: [{ required: true, message: '预计开始时间必填', trigger: ['blur', 'change'] }],
  preEndTime: [{ required: true, message: '预计结束时间必填', trigger: ['blur', 'change'] }],
})

const list = ref<IDetailList[]>([])// 表格数据
// 表头
const columns = ref<TableColumn[]>([
  { text: '样品编号', value: 'sampleNo', align: 'center', width: '230' },
  { text: '样品名称', value: 'sampleName', align: 'center' },
  { text: '型号', value: 'sampleModel', align: 'center' },
  { text: '出厂编号', value: 'orderCode', align: 'center' },
  { text: '委托书编号', value: 'manufacturingNo', align: 'center' },
  { text: '委托单位', value: 'customerName', align: 'center' },
])

const getDetail = () => {
  detail({ id: $route.params.id }).then((res) => {
    // let interfaceStr = ''
    // for (const key in res.data.sampleList[0]) {
    //   const item = res.data[key]
    //   interfaceStr += `${key}:${typeof (item)}\n`
    // }
    // console.log(interfaceStr)
    detailForm.value = res.data
    list.value = res.data.sampleList.filter((item: IDetailList) => {
      return item !== null
    })
  })
}
const approvalRecordData = ref([]) // 审批流程数据
const getApprovalRecord = (processId: string) => {
  if (query.title !== '新建') {
    if (processId) {
      fetchApproval(processId).then((res) => {
        approvalRecordData.value = res.data
      })
    }
    else {
      ElMessage.warning('流程实例id为空')
    }
  }
}

// 关闭新增页面的回调
const close = () => {
  $router.back()
}
// 文件上传
const fileRef = ref()
const onFileChange = (event: any) => {
  // 原生上传
  console.log(event.target.files)
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    detailForm.value.applyMinioFileName = event.target.files[0].name
    // UploadFile(fd).then((res) => {
    //   if (res.code === 200) {
    //     sampleForm.value.minioFileName = res.data[0]
    //     // 重置当前验证
    //     ElMessage.success('文件上传成功')
    //   }
    //   else {
    //     ElMessage.error(res.message)
    //   }
    // })
  }
}
const upload = () => {
  fileRef.value.click()
}
onMounted(() => {
  if (query.title !== '新建') {
    getDetail()
  }
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="分包项目申请">
      <template #btns>
        <template v-if="query.approvalStatusName === '待审批'">
          <el-button type="primary">
            同意
          </el-button>
          <el-button type="primary">
            驳回
          </el-button>
          <el-button type="primary">
            拒绝
          </el-button>
        </template>
        <template v-if="['草稿箱', '已取消'].includes(query.approvalStatusName as string)">
          <el-button type="primary">
            提交
          </el-button>
          <el-button type="primary">
            编辑
          </el-button>
          <el-button type="primary">
            删除
          </el-button>
        </template>
        <template v-if="['已通过', '未通过'].includes(query.approvalStatusName as string)">
          <el-button type="primary">
            打印
          </el-button>
        </template>
        <template v-if="query.title === '新建'">
          <el-button type="primary">
            保存
          </el-button>
          <el-button type="primary">
            提交
          </el-button>
        </template>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="detailForm"
        label-width="140"
        label-position="right"
        :rules="formRules"
      >
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="分包项目编号:" prop="projectNo">
              <el-input
                v-model="detailForm.projectNo" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分包项目名称:" prop="projectName">
              <el-input
                v-model="detailForm.projectName"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人:" prop="applicantName">
              <el-input
                v-model="detailForm.applicantName" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请时间:" prop="applicantTime">
              <el-input
                v-model="detailForm.applicantTime" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分包方编号:" prop="outsourcerId">
              <el-input
                v-model="detailForm.outsourcerId"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司名称:" prop="outsourcerName">
              <el-input
                v-model="detailForm.outsourcerName"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分包原因:" prop="outsourceReasonName">
              <el-input
                v-model="detailForm.outsourceReasonName"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计费用:" prop="preCost">
              <el-input
                v-model="detailForm.preCost"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计开始时间:" prop="preStartTime">
              <el-date-picker
                v-model="detailForm.preStartTime"
                type="datetime"
                placeholder="请选择预计开始时间"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计结束时间:" prop="preEndTime">
              <el-date-picker
                v-model="detailForm.preEndTime"
                type="datetime"
                placeholder="请选择预计结束时间"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" />

          <el-col :span="12">
            <el-form-item label="备注:" prop="applyRemark">
              <el-input
                v-model="detailForm.applyRemark"
                :disabled="query.title === '详情'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" />
          <el-col :span="6">
            <el-form-item label="附件:" prop="applyMinioFileName">
              <input v-show="query.title === ''" ref="fileRef" multiple type="file" @change="onFileChange">
              <span v-if="query.title === '详情' && !detailForm.applyMinioFileName">无</span>
              <div v-else style="display: flex;">
                <show-photo :minio-file-name="detailForm.applyMinioFileName || ''" style="display: inline-block;margin: 10px;" />
              </div>
              <el-button v-if="query.title !== '详情'" type="primary" :disabled="query.title === '详情'" @click="upload">
                {{ detailForm.applyMinioFileName ? '更换' : '上传' }}
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="18" />
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="样品详情">
      <el-table
        :data="list"
        border
        style="width: 100%;"
        max-height="600"
      >
        <el-table-column type="selection" width="38" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          show-overflow-tooltip
          align="center"
        />
      </el-table>
    </detail-block>
    <detail-block v-if="query.approvalStatusName !== '草稿箱' && query.title !== '新增'" title="审批流程">
      <!-- 审批流程 -->
      <approval-record ref="approvalRecord" :approval-record-data="approvalRecordData" />
    </detail-block>
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>