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

const { proxy } = getCurrentInstance() as any
const $route = useRoute()
const $router = useRouter()
const query = $route.query
const ruleFormRef = ref<FormInstance>() as any
const detailForm = ref<IApplyDetail>({
  formId: query.formId as string,
  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', 'change'] }],
  outsourcerId: [{ required: true, message: '分包方编号必填', trigger: ['blur', 'change'] }],
  outsourcerName: [{ required: true, message: '公司名称必填', trigger: ['blur', 'change'] }],
  outsourceReason: [{ 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<ISampleList[]>([])// 表格数据
// 表头
const columns = ref<TableColumn[]>([
  { text: '样品编号', value: 'sampleNo', align: 'center', width: '230' },
  { text: '样品名称', value: 'sampleName', align: 'center' },
  { text: '型号', value: 'sampleModel', align: 'center' },
  { text: '出厂编号', value: 'manufacturingNo', align: 'center' },
  { text: '委托书编号', value: 'customerNo', align: 'center' },
  { text: '委托单位', value: 'customerName', align: 'center' },
])

const getDetail = () => {
  detail({ id: $route.params.id }).then((res) => {
    detailForm.value = res.data
    list.value = res.data.sampleList.filter((item: ISampleList) => {
      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 handleSave = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      const loading = ElLoading.service({
        lock: true,
        background: 'rgba(255, 255, 255, 0.8)',
      })
      const _list = list.value.map((item: any) => {
        return {
          orderId: item.orderId ? item.orderId : 0,
          sampleId: item.id,
        }
      })
      const params = {
        id: detailForm.value.id,
        projectName: detailForm.value.projectName,
        outsourcerName: detailForm.value.outsourcerName,
        applicantTime: detailForm.value.applicantTime,
        applyMinioFileName: detailForm.value.applyMinioFileName,
        applyProcessId: detailForm.value.applyProcessId,
        applyRemark: detailForm.value.applyRemark,
        outsourceReason: detailForm.value.outsourceReason,
        outsourceReasonName: detailForm.value.outsourceReasonName,
        outsourcerId: detailForm.value.outsourcerId,
        checkTime: detailForm.value.checkTime,
        checkConclusion: detailForm.value.checkConclusion,
        preCost: detailForm.value.preCost,
        preEndTime: detailForm.value.preEndTime,
        preStartTime: detailForm.value.preStartTime,
        projectNo: detailForm.value.projectNo,
        checkMinioFileName: detailForm.value.checkMinioFileName,
        checkRemark: detailForm.value.checkRemark,
        checkProcessId: detailForm.value.checkProcessId,
        orderSampleList: [..._list],
      }
      save(params).then((res) => {
        detailForm.value.id = res.data.id
        ElMessage.success('保存成功')
        loading.close()
        close()
      })
    }
    else {
      console.log('表单校验不通过')
    }
  })
}

// 提交
const handleSubmit = () => {
  if (detailForm.value.id) {
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    const params = {
      id: detailForm.value.id,
      formId: query.formId, // 表单id
    }
    submit(params).then(() => {
      ElMessage.success('提交成功')
      loading.close()
      close()
    })
  }
  else {
    ElMessage.warning('请先保存再提交！')
  }
}

// 增加行
const addRow = () => {
  const index = list.value.findIndex(item => !item.sampleNo)
  if (index !== -1) {
    ElMessage.warning('请完善上一条设备信息')
    return
  }
  list.value.push({
    orderCode: '',	// 原始记录单编号
    sampleName: '',	// 样品名称
    sampleNo: '',	// 样品编号
    customerNo: '', // 委托方id
    customerName: '', // 委托方名称
    startTime: '',
    endTime: '',
  })
}
const sampleVisible = ref(false)
const projectVisible = ref(false)
const isMulti = ref(false)
const selectIndex = ref(0)
// 点击选择
const handleSelect = (index: number, row: ISampleList) => {
  sampleVisible.value = true // 选择设备对话框显隐
  isMulti.value = false // 是否单选, false单选、true表格多选
  selectIndex.value = index
}

// 点击批量添加
const multiAdd = () => {
  sampleVisible.value = true
  isMulti.value = true
}

const checkoutList = ref([])

// 修改委托方对话框显隐
const changeSampleVisible = (val: boolean) => {
  sampleVisible.value = val
}
// 修改项目选择对话框显隐
const changeProjectVisible = (val: boolean) => {
  projectVisible.value = val
}

// 选好样品
const clickConfirmSample = (val: any) => {
  if (val && val.length) {
    if (isMulti.value) {
      val.forEach((item: ISampleList) => {
        // 只添加列表里不存在的
        const index = list.value.findIndex((i: ISampleList) => item.sampleNo === i.sampleNo)
        if (index === -1) {
          list.value.push(item)
        }
      })
    }
    else {
      const index = list.value.findIndex((i: ISampleList) => val[0].sampleNo === i.sampleNo)
      if (index !== -1) {
        ElMessage.warning('此样品已添加过')
        return
      }
      list.value.splice(selectIndex.value, 1, val[0])
    }
  }
}

// 选择项目id
const clickConfirmProject = (val: any) => {
  // detailForm.value.checkTime = val[0].checkTime
  // detailForm.value.projectName = val[0].projectName
  // detailForm.value.outsourcerId = val[0].outsourcerId
  // detailForm.value.projectNo = val[0].projectNo
  detailForm.value.outsourcerId = val[0].outsourcerNo
  detailForm.value.outsourcerName = val[0].outsourcerName
}

// 选中行
const handleSelectionChange = (e: any) => {
  checkoutList.value = e
}

// 删除行
const delRow = () => {
  if (checkoutList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutList.value.forEach((item: ISampleList) => {
      list.value.forEach((element, index) => {
        if (element.sampleNo === item.sampleNo) {
          list.value.splice(index, 1)
        }
      })
    })
  }
}

// 选择样品对话框关闭
const closeDialog = () => {
  sampleVisible.value = false
}

// 文件上传
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()
  }
  else {
    // 初始化编号,申请人,申请时间
    detailForm.value.projectNo = ''
    detailForm.value.createUser = window.localStorage.getItem('name')!
    detailForm.value.createTime = proxy.dayjs().format('YYYY-MM-DD HH:mm:ss')
  }
})
</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" @click="handleSave">
            保存
          </el-button>
          <el-button type="primary" @click="handleSubmit">
            提交
          </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="id">
              <el-input v-model="detailForm.id" disabled placeholder="系统自动生成" />
            </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="createUser">
              <el-input
                v-model="detailForm.createUser" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请时间:" prop="createTime">
              <el-input
                v-model="detailForm.createTime" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分包方编号:" prop="outsourcerId">
              <el-input
                v-model="detailForm.outsourcerId"
                disabled
              >
                <template v-if="query.title !== '详情'" #append>
                  <el-button
                    size="small"
                    @click="changeProjectVisible(true)"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公司名称:" prop="outsourcerName">
              <el-input
                v-model="detailForm.outsourcerName"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分包原因:" prop="outsourceReason">
              <el-select
                v-model="detailForm.outsourceReason" :disabled="query.title === '详情'"
              >
                <el-option label="无检测能力" value="无检测能力" />
                <el-option label="其他" value="其他" />
              </el-select>
            </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;" />
              </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="样品信息">
      <template v-if="query.title !== '详情'" #btns>
        <el-button type="primary" @click="multiAdd">
          批量添加
        </el-button>
        <el-button type="primary" @click="addRow">
          增加行
        </el-button>
        <el-button type="info" @click="delRow">
          删除行
        </el-button>
      </template>
      <el-table
        :data="list"
        border
        style="width: 100%;"
        max-height="600"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="query.title !== '详情'" 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"
        >
          <template v-if="item.value === 'sampleNo' && ['新建', '编辑'].includes(query.title as string)" #default="scope">
            <el-input v-model="scope.row.sampleNo" placeholder="请选择设备" class="input">
              <template #append>
                <el-button size="small" @click="handleSelect(scope.$index, scope.row)">
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <detail-block v-if="query.approvalStatusName !== '草稿箱' && query.title !== '新建'" title="审批流程">
      <!-- 审批流程 -->
      <approval-record ref="approvalRecord" :approval-record-data="approvalRecordData" />
    </detail-block>
    <!-- 样品增加弹窗 -->
    <select-sample v-model:visible="sampleVisible" :is-multi="isMulti" @click-confirm-sample="clickConfirmSample" @change-visible="changeSampleVisible" />
    <!-- 项目选择 -->
    <select-project-approve
      v-model:visible="projectVisible" :form-id="detailForm.formId" @clickConfirmProject="clickConfirmProject"
      @change-visible="changeProjectVisible(false)"
    />
  </app-container>
</template>

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