<!-- 测试、校准或检定工作分包通知书列表 -->
<script name="SubpackageReviewList" setup lang="ts">
import type { DateModelType } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { Ref } from 'vue'
import { getCurrentInstance, onMounted, ref, watch } from 'vue'
import type { IList, IListQuery } from './equipment-interface'
import measureCompleteDialog from './dialog/measureCompleteDialog.vue'
import { batchImport, exportEquipmentList, getEquipmentList } from '@/api/business/subpackage/equipment'
import { uploadApi } from '@/api/system/notice'
import useTemplateDownload from '@/utils/useTemplateDownload'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
import type { IMenu } from '@/components/buttonBox/buttonBox'
import ButtonBox from '@/components/buttonBox/buttonBox.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { exportFile } from '@/utils/exportUtils'

const $router = useRouter()
const { proxy } = getCurrentInstance() as any
const active = ref('')
const operateWidth = ref('220') // 操作栏的宽度
const buttonBoxActive = 'businessSubpackageEquipment' // 存储在sessionstorage里面的字段名，用于记录右上角buttonbox点击状态
const approvalDialog = ref() // 审批对话ref
const measureCompleteDialogRef = ref() // 检完组件ref
const tableRef = ref() // 表格组件ref
// 查询条件
const listQuery: Ref<IListQuery> = ref({
  contacts: '', //	联系人
  customerName: '', //	委托方名称
  startTime: '', //	要求检完时间开始
  endTime: '', //	要求检完时间结束
  helpInstruction: '', //	辅助字段
  manufactureNo: '', //	出厂编号
  manufacturer: '', //	生产厂家
  measureStatus: active.value, //	状态（1检测中，2检测完成）
  model: '', //	规格型号
  orderNo: '', //	任务单编号
  outsourcerName: '', //	分包方名称
  outsourcerNo: '', //	分包方编号
  sampleName: '', //	受检设备名称
  offset: 1,
  limit: 20,
})
const total = ref(0) // 数据条数
const loadingTable = ref(false) // 表格loading
const menu = ref<IMenu[]>([]) // 审批状态按钮组合
// 表头
const columns = ref<TableColumn[]>([
  { text: '受检设备名称', value: 'sampleName', align: 'center' },
  { text: '规格型号', value: 'model', align: 'center' },
  { text: '出厂编号', value: 'manufactureNo', align: 'center' },
  { text: '生产厂家', value: 'manufacturer', align: 'center' },
  { text: '辅助字段', value: 'helpInstruction', align: 'center' },
  { text: '任务单编号', value: 'orderNo', align: 'center' },
  { text: '委托方', value: 'customerName', align: 'center' },
  { text: '要求检完时间', value: 'requireOverTime', align: 'center' },
  { text: '分包方名称', value: 'outsourcerName', align: 'center' },
  { text: '联系人', value: 'contacts', align: 'center' },
  { text: '联系电话', value: 'mobile', align: 'center' },
])
const list = ref<IList[]>([]) // 表格数据
const dateRange = ref<[DateModelType, DateModelType]>(['', '']) // 筛选时间段数据
const checkoutList = ref<string[]>([]) // 选中的内容

menu.value = [ // 按钮菜单
  {
    id: '1',
    name: '检测中',
  },
  {
    id: '2',
    name: '检测完成',
  },
]
// ------------------------------------------列表数据-------------------------------------------------------------
// 数据查询
function fetchData(isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  getEquipmentList(listQuery.value).then((response) => {
    list.value = response.data.rows
    total.value = parseInt(response.data.total)
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}
// 搜索
const searchList = () => {
  fetchData(true)
}

// 重置
const clearList = () => {
  listQuery.value = {
    contacts: '', //	联系人
    customerName: '', //	委托方名称
    endTime: '', //	要求检完时间结束
    helpInstruction: '', //	辅助字段
    manufactureNo: '', //	出厂编号
    manufacturer: '', //	生产厂家
    measureStatus: active.value, //	状态（1检测中，2检测完成）
    model: '', //	规格型号
    orderNo: '', //	任务单编号
    outsourcerName: '', //	分包方名称
    outsourcerNo: '', //	分包方编号
    sampleName: '', //	受检设备名称
    startTime: '', //	要求检完时间开始
    offset: 1,
    limit: 20,
  }
  dateRange.value = ['', '']
  fetchData(true)
}

// 多选发生改变时
function handleSelectionChange(e: any) {
  checkoutList.value = e.map((item: { id: string }) => item.id)
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  fetchData(true)
}

// ---------------------------------------按钮---------------------------------------------------------------------
// 切换tab状态
const changeCurrentButton = (val: string) => {
  active.value = val // 此时的tab
  window.sessionStorage.setItem(buttonBoxActive, val) // 记录tab状态
  tableRef.value.clearMulti()
  clearList() // 刷新
}
// 审批结束回调
const approvalSuccess = () => {
  fetchData(true)
}

// 点击批量检完
const batchFinish = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请至少选中一条数据')
    return false
  }
  else {
    measureCompleteDialogRef.value.initDialog(checkoutList.value, 'batchFinish')
  }
}

// 检完成功
const onSuccess = () => {
  fetchData(true)
  tableRef.value.clearMulti()
}
// -------------------------------------表格上方工具栏---------------------------------------------------

// 导出
const exportAll = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '下载中请稍后',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  if (list.value.length > 0) {
    const params = {
      contacts: listQuery.value.contacts, //	联系人
      customerName: listQuery.value.customerName, //	委托方名称
      endTime: listQuery.value.endTime, //	要求检完时间结束
      helpInstruction: listQuery.value.helpInstruction, //	辅助字段
      manufactureNo: listQuery.value.manufactureNo, //	出厂编号
      manufacturer: listQuery.value.manufacturer, //	生产厂家
      measureStatus: listQuery.value.measureStatus, //	状态（1检测中，2检测完成）
      model: listQuery.value.model, //	规格型号
      orderNo: listQuery.value.orderNo, //	任务单编号
      outsourcerName: listQuery.value.outsourcerName, //	分包方名称
      outsourcerNo: listQuery.value.outsourcerNo, //	分包方编号
      sampleName: listQuery.value.sampleName, //	受检设备名称
      startTime: listQuery.value.startTime, //	要求检完时间开始
      offset: 1,
      limit: 20,
      ids: checkoutList.value,
    }
    exportEquipmentList(params).then((res) => {
      const blob = new Blob([res.data])
      loading.close()
      exportFile(blob, '分包设备管理.xlsx')
    })
  }
  else {
    loading.close()
    ElMessage.warning('无数据可导出数据')
  }
}

// 模板下载
const templateDownload = () => {
  useTemplateDownload('分包管理')
}

const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('file', event.target.files[0])
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    // 调批量导入接口
    batchImport(fd).then((res) => {
      ElMessage.success('导入成功')
      event.target.value = null
      loading.close()
      fetchData(true)
      loading.close()
    }).catch(() => {
      event.target.value = null
      loading.close()
    })
  }
}

// 批量上传证书
const batchUploadCert = () => {
  fileRef.value.click()
}

// ----------------------------------------------操作---------------------------------------------------
const handleEdit = (row: IList, type: 'detail' | 'finish' | 'upload' | 'finishUpload') => {
  if (type === 'detail') { // 详情
    $router.push({
      path: `equipment/${type}/${row.id}`,
      query: {
        subpackageInfo: JSON.stringify(row),
        equipmentId: row.sampleId,
        orderId: row.orderId,
      },
    })
  }
  else {
    measureCompleteDialogRef.value.initDialog([row.id], type, row)
  }
}

// ----------------------------------------------钩子------------------------------------------------------
watch(dateRange, (val) => { // 要求检完时间
  if (val) {
    listQuery.value.startTime = `${val[0]}`
    listQuery.value.endTime = `${val[1]}`
  }
  else {
    listQuery.value.startTime = ''
    listQuery.value.endTime = ''
  }
})

onMounted(async () => {
  if (window.sessionStorage.getItem(buttonBoxActive)) {
    active.value = window.sessionStorage.getItem(buttonBoxActive)!
  }
  else {
    active.value = menu.value.find(item => item.name === '检测中')!.id as string // 全部
  }
})
</script>

<template>
  <app-container>
    <search-area :need-clear="true" @search="searchList" @clear="clearList">
      <search-item>
        <el-input
          v-model.trim="listQuery.sampleName"
          placeholder="受检设备名称"
          class="short-input"
          clearable
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.model"
          placeholder="规格型号"
          class="short-input"
          clearable
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.manufactureNo"
          placeholder="出厂编号"
          class="short-input"
          clearable
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.helpInstruction"
          placeholder="辅助字段"
          class="short-input"
          clearable
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.orderNo"
          placeholder="任务单编号"
          class="short-input"
          clearable
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.customerName"
          placeholder="委托方"
          class="short-input"
          clearable
        />
      </search-item>
      <search-item>
        <el-date-picker
          v-model="dateRange"
          class="short-input"
          type="datetimerange"
          range-separator="至"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="要求检完时间(开始)"
          end-placeholder="要求检完时间(结束)"
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.outsourcerName"
          placeholder="分包方名称"
          class="short-input"
          clearable
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.contacts"
          placeholder="联系人"
          class="short-input"
          clearable
        />
      </search-item>
    </search-area>
    <input v-show="false" ref="fileRef" type="file" accept="pdf/*" @change="onFileChange">
    <table-container>
      <template #btns-right>
        <icon-button v-if="active === '1'" icon="icon-template" title="模板下载" type="primary" @click="templateDownload" />
        <icon-button v-if="active === '1'" icon="icon-batch-finish" title="批量检完" type="primary" @click="batchFinish" />
        <icon-button v-if="active === '1'" icon="icon-batch" title="批量上传证书" type="primary" @click="batchUploadCert" />
        <icon-button icon="icon-export" title="导出" type="primary" @click="exportAll" />
      </template>
      <normal-table
        ref="tableRef"
        :data="list"
        :total="total"
        :columns="columns"
        :query="listQuery"
        :list-loading="loadingTable"
        is-showmulti-select
        @change="changePage"
        @multi-select="handleSelectionChange"
      >
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
        <template #columns>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            :width="operateWidth"
          >
            <template #default="{ row }">
              <el-button
                size="small"
                type="primary"
                link
                @click="handleEdit(row, 'detail')"
              >
                查看
              </el-button>
              <el-button
                v-if="active === '1'"
                size="small"
                type="primary"
                link
                @click="handleEdit(row, 'finish')"
              >
                检完
              </el-button>
              <el-button
                v-if="active === '1'"
                size="small"
                type="primary"
                link
                @click="handleEdit(row, 'finishUpload')"
              >
                检完并上传证书
              </el-button>
              <el-button
                v-if="active === '2'"
                size="small"
                type="primary"
                link
                @click="handleEdit(row, 'upload')"
              >
                上传证书
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
    <!-- 审批弹窗 -->
    <approval-dialog
      ref="approvalDialog"
      @on-success="approvalSuccess"
    />
    <!-- 右上角按钮集合 -->
    <button-box
      :active="active"
      :show-bridge="false"
      :menu="menu"
      @change-current-button="changeCurrentButton"
    />

    <!-- 检完 -->
    <measure-complete-dialog ref="measureCompleteDialogRef" @on-success="onSuccess" />
  </app-container>
</template>

<style lang="ts" scoped></style>