<!-- 任务单列表 -->
<script lang="ts" setup name="TaskTable">
import { ElMessage, ElMessageBox } from 'element-plus'
import { getListExpand, getListTogether } from '@/api/eqpt/measurementPlan/dept'
const $props = defineProps({
  id: {
    type: String,
    required: true,
  },
})
const columns = ref([
  {
    text: '统一编号',
    value: 'equipmentNo',
    align: 'center',
  },
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '规格型号',
    value: 'model',
    align: 'center',
  },
  {
    text: '使用部门',
    value: 'deptName',
    align: 'center',
  },
  {
    text: '使用岗位',
    value: 'usePosition',
    align: 'center',
  },
  {
    text: '负责人',
    value: 'directorName',
    align: 'center',
  },
  {
    text: '检定(校准)单位',
    value: 'checkOrganization',
    align: 'center',
  },
  {
    text: '证书有效期',
    value: 'certificateValid',
    align: 'center',
  },
  {
    text: '执行状态',
    value: 'executeStatusName',
    align: 'center',
  },
  {
    text: '执行时间',
    value: 'executeTime',
    align: 'center',
  },
  {
    text: '检定完成度',
    value: 'checkCompletionName',
    align: 'center',
  },
  {
    text: '检定完成时间',
    value: 'checkFinishTime',
    align: 'center',
  },
])
const total = ref(0)
// 获取聚合表格数据
const togetherLoading = ref(false)
const togetherList = ref([])
const fetchTogetherData = () => {
  togetherLoading.value = false
  getListTogether({ notifyId: $props.id }).then((res) => {
    togetherList.value = res.data
    togetherLoading.value = false
  })
}

watch(() => $props.id, (newVal) => {
  if (newVal) {
    fetchTogetherData()
  }
}, {
  deep: true,
  immediate: true,
})
// 获取展开行内表格数据
const expandLoading = ref(true)
const expandList = ref([])
const fetchExpandData = (params: any) => {
  expandLoading.value = false
  getListExpand({ ...params, notifyId: $props.id }).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-com>
    <table-container>
      <!-- 展开行表格 -->
      <normal-table
        class="nortable-header" :data="[]" :total="0" :columns="columns as any" :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>
            <normal-table
              :data="expandList" :total="0" :columns="columns as any" :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-com>
</template>

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