<!-- 测试、校准或检定工作分包通知书列表 -->
<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 { exportEquipmentList, getEquipmentList } from '@/api/business/subpackage/equipment'
import { getStaffList } from '@/api/resource/register'
import { getDeptTreeList } from '@/api/system/dept'
import { getDictByCode } from '@/api/system/dict'
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 type { deptType } from '@/global'
import { exportFile } from '@/utils/exportUtils'
import { SCHEDULE } from '@/utils/scheduleDict'
import { toTreeList } from '@/utils/structure'

const $router = useRouter()
const { proxy } = getCurrentInstance() as any
const active = ref('')
const operateWidth = ref('150') // 操作栏的宽度
const buttonBoxActive = 'businessSubpackageEquipment' // 存储在sessionstorage里面的字段名，用于记录右上角buttonbox点击状态
const approvalDialog = ref() // 审批对话ref
const delRef = ref() // 删除弹窗组件ref
// 查询条件
const listQuery: Ref<IListQuery> = ref({
  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: 'phone', align: 'center' },
])
const list = ref<IList[]>([]) // 表格数据
const dateRange = ref<[DateModelType, DateModelType]>(['', '']) // 筛选时间段数据
const checkoutList = ref<string[]>([]) // 选中的内容

menu.value = [ // 忧伤鸟按钮菜单
  {
    id: 'doing',
    name: '检测中',
  },
  {
    id: 'done',
    name: '检测完成',
  },
]
// ------------------------------------------列表数据-------------------------------------------------------------
// 数据查询
function fetchData(isNowPage = false) {
  loadingTable.value = false
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  list.value = [{
    id: '1',
    sampleName: '测试数据',
    model: '测试数据',
    manufactureNo: '测试数据',
    manufacturer: '测试数据',
    helpInstruction: '测试数据',
    orderNo: '测试数据',
    customerName: '测试数据',
    requireOverTime: '测试数据',
    outsourcerName: '测试数据',
    contacts: '测试数据',
    phone: '测试数据',
  }]

  // 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 = {
    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状态
  clearList() // 刷新
}
// 审批结束回调
const approvalSuccess = () => {
  fetchData(true)
}
// -------------------------------------表格上方工具栏---------------------------------------------------

// 导出
const exportAll = () => {
  ElMessage.info('敬请期待')
  // const loading = ElLoading.service({
  //   lock: true,
  //   text: '下载中请稍后',
  //   background: 'rgba(255, 255, 255, 0.6)',
  // })
  // if (list.value.length > 0) {
  //   const params = {
  //     applicantName: listQuery.value.applicantName, // 申请人
  //     applicantTimeEnd: listQuery.value.applicantTimeEnd, // 申请时间(结束)
  //     applicantTimeStart: listQuery.value.applicantTimeStart, // 申请时间(开始)
  //     approvalStatus: listQuery.value.approvalStatus, // 审批状态类型code
  //     formId: listQuery.value.formId, // 表单id
  //     customerName: listQuery.value.customerName, // 受检单位名称
  //     outsourcerName: listQuery.value.outsourcerName, // 分包机构名称
  //     noticeNo: listQuery.value.noticeNo, // 协议书编号
  //     item: listQuery.value.item, // 分包项目
  //     offset: 1,
  //     limit: 20,
  //     ids: checkoutList.value,
  //   }
  //   exportInformList(params).then((res) => {
  //     const blob = new Blob([res.data])
  //     loading.close()
  //     exportFile(blob, '测试、校准或检定工作分包通知书.xlsx')
  //   })
  // }
  // else {
  //   loading.close()
  //   ElMessage.warning('无数据可导出数据')
  // }
}

// ----------------------------------------------操作---------------------------------------------------
const handleEdit = (row: IList, type: 'detail' | 'finish' | 'upload') => {
  if (type === 'detail') { // 详情
    $router.push({
      path: `/informDoc/${type}/${row.id}`,
      query: {
        approvalStatusName: '全部', // 审批状态名称
        processId: row.processId, // 流程实例id
        taskId: row.taskId, // 任务id
        row: { ...row } as any,
      },
    })
  }
  else if (type === 'finish') { // 检完
    // 检完
  }
  else if (type === 'upload') { // 检完并上传证书
    // 检完并上传证书
  }
}

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

onMounted(async () => {
  await getDict()
  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>

    <table-container>
      <template v-if="active === '0'" #btns-right>
        <icon-button icon="icon-add" title="新建" type="primary" @click="add" />
        <icon-button
          icon="icon-export"
          title="导出"
          type="primary"
          @click="exportAll"
        />
      </template>
      <normal-table
        :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
                v-if="active !== '1' && active !== '6' && active !== '5'"
                size="small"
                type="primary"
                link
                @click="handleEdit(row, 'detail')"
              >
                查看
              </el-button>
              <el-button
                v-if=" active === '1' || active === '6' || active === '5'"
                size="small"
                type="primary"
                link
                @click="handleEdit(row, 'edit')"
              >
                查看
              </el-button>
              <el-button
                v-if="row.approvalStatusName === '待审批'"
                size="small"
                link
                type="primary"
                @click="handleEdit(row, '同意')"
              >
                同意
              </el-button>
              <el-button
                v-if="row.approvalStatusName === '待审批'"
                size="small"
                link
                type="danger"
                @click="handleEdit(row, '拒绝')"
              >
                拒绝
              </el-button>
              <!-- <el-button
                v-if="active === '0'"
                size="small"
                link
                type="primary"
                @click="handleEdit(row, 'edit')"
              >
                编辑
              </el-button> -->

              <!-- 是发起者且审批中可以取消 -->
              <el-button
                v-if="row.approvalStatusName === '审批中' && active !== '7' && active !== '0'"
                size="small"
                link
                type="info"
                @click="handleEdit(row, '取消')"
              >
                取消
              </el-button>
              <el-button
                v-if="active !== '7' && (row.approvalStatusName === '草稿箱' || row.approvalStatusName === '已取消')"
                size="small"
                link
                type="danger"
                @click="handleEdit(row, '删除')"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
    <!-- 审批弹窗 -->
    <approval-dialog
      ref="approvalDialog"
      @on-success="approvalSuccess"
      @refuse="refuse"
    />
    <!-- 右上角按钮集合 -->
    <button-box
      :active="active"
      :menu="menu"
      @change-current-button="changeCurrentButton"
    />
  </app-container>
</template>

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