<!-- 任务单列表 -->
<script lang="ts" setup name="EditPlatform">
import { ElMessage, ElMessageBox } from 'element-plus'
const columns = ref([
  {
    text: '统一编号',
    value: 'equipmentNo',
    align: 'center',
  },
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '型号规格',
    value: 'model',
    align: 'center',
  },
  {
    text: '使用部门',
    value: 'succeed',
    align: 'center',
  },
  {
    text: '使用岗位',
    value: 'usePosition',
    align: 'center',
  },
  {
    text: '检定(校准)单位',
    value: 'meterIdentify',
    align: 'center',
  },
  {
    text: '证书有效期',
    value: 'checkCycle',
    align: 'center',
  },
  {
    text: '执行状态',
    value: 'certificateValid',
    align: 'center',
  },
  {
    text: '执行时间',
    value: 'certificateValid',
    align: 'center',
  },
  {
    text: '检定完成度',
    value: 'certificateValid',
    align: 'center',
  },
  {
    text: '检定完成时间',
    value: 'certificateValid',
    align: 'center',
  },
])

// 获取聚合表格数据
const togetherLoading = ref(false)
const togetherList = ref([])
const fetchTogetherData = () => {
  togetherLoading.value = false
  // getInfoListTogether(listQuery).then((res) => {
  //   togetherList.value = res.data
  //   togetherLoading.value = false
  // })
}
// 获取展开行内表格数据
const expandLoading = ref(true)
const expandList = ref([])
const fetchExpandData = (params: any) => {
  expandLoading.value = false
  // getInfoList(params).then((res) => {
  //   expandList.value = res.data
  //   expandLoading.value = false
  // })
}
const getRowKeys = (row: any) => { // 获取当前行id
  return row.equipmentName // 这里看这一行中需要根据哪个属性值是id
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
// 控制展开行
const expands = ref()
const expandChange = (row: any, expandedRows: any) => {
  if (expandedRows.length) {
    expands.value = []
    if (row) {
      expands.value.push(row.equipmentName)
    }
  }
  else {
    expands.value = []
  }
}
watch(() => expands.value, (newVal) => {
  fetchExpandData({ equipmentName: newVal[0] })
},
{
  deep: true,
})
</script>

<template>
  <detail-block-switch title="任务单列表">
    <table-container>
      <!-- 展开行表格 -->
      <normal-table
        class="nortable-header" :data="[]" :total="0" :columns="columns" :options="{
          needIndex: false, // 是否需要序号列
          border: true, // 是否需要上方边框
        }
        " :pagination="false" :is-showmulti-select="true"
      />
      <el-table
        v-loading="togetherLoading" :data="togetherList" border style="width: 100%;" :row-key="getRowKeys"
        :expand-row-keys="expands" :show-header="false" @expand-change="expandChange"
      >
        <el-table-column type="expand">
          <template #default="props">
            <normal-table
              :data="list" :total="total" :columns="columns" :list-loading="expandLoading" :options="{
                needIndex: false, // 是否需要序号列
                border: true, // 是否需要上方边框
              }
              " :pagination="false" :is-showmulti-select="true" :show-header="false"
            />
          </template>
        </el-table-column>
        <el-table-column label="设备名称" prop="equipmentName" align="center" />
        <el-table-column label="数量" align="center">
          <template #default="scope">
            共计{{ scope.row.count }}台
          </template>
        </el-table-column>
      </el-table>
    </table-container>
  </detail-block-switch>
</template>

<style lang="scss" scoped>
.nortable-header {
  ::v-deep(.el-table__body-wrapper) {
    display: none;
  }
}
</style>