<!-- 计量计划-详情-基本信息-聚合列表 -->
<script lang="ts" setup name="PlanDataList">
import { getInfoList, getInfoListTogether } from '@/api/eqpt/measurementPlan/paln'
const $route = useRoute()
const data = JSON.parse($route.query.row as string)
const id = data.id
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: '',
    align: 'center',
  },
  {
    text: '检定完成度',
    value: '',
    align: 'center',
  },
  {
    text: '检定完成时间',
    value: '',
    align: 'center',
  },
])
// 获取聚合表格数据
const togetherLoading = ref(true)
const togetherList = ref([])
const fetchTogetherData = () => {
  togetherLoading.value = true
  getInfoListTogether(id).then((res) => {
    togetherList.value = res.data
    togetherLoading.value = false
  })
}
fetchTogetherData()
// 获取展开行内表格数据
const expandLoading = ref(true)
const expandList = ref([])
const fetchExpandData = (equipmentName: string) => {
  expandLoading.value = true
  getInfoList(id, equipmentName).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(newVal[0])
},
{
  deep: true,
})
</script>

<template>
  <detail-page class="base-info-device" title="计划列表">
    <!-- 展开行表格 -->
    <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=" expandList " :total=" 0 " :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>
  </detail-page>
</template>

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