<!-- 计量计划-详情-基本信息-聚合列表 -->
<script lang="ts" setup name="PlanDataList">
import { getInfoList, getInfoListTogether, getInfoListTogetherStatus } from '@/api/eqpt/measurementPlan/paln'
const $props = defineProps({
  togetherList: {
    type: Array,
    default: () => ([]),
  },
  customList: {
    type: Boolean,
    default: false,
  },
  customExpand: {
    type: Boolean,
    default: false,
  },
})
const $emits = defineEmits(['fetchExpandData'])
const $route = useRoute()
const data = JSON.parse($route.query.row as string)
const isAll = ref($route.query.statusName === '全部')
const id = data?.id
const columns = ref([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '规格型号',
    value: 'model',
    align: 'center',
  },
  {
    text: '出厂编号',
    value: 'manufactureNo',
    align: 'center',
  },
  {
    text: '生产厂家',
    value: 'manufacturer',
    align: 'center',
  },
  {
    text: '使用部门',
    value: 'deptName',
    align: 'center',
  },
  {
    text: '使用岗位',
    value: 'usePosition',
    align: 'center',
  },
  {
    text: '负责人',
    value: 'directorName',
    align: 'center',
  },
  {
    text: '计量标识',
    value: 'meterIdentifyName',
    align: 'center',
  },
  {
    text: '检定(校准)单位',
    value: 'checkOrganization',
    align: 'center',
  },
  {
    text: '证书有效期',
    value: 'certificateValid',
    align: 'center',
  },
  {
    text: '检定去向',
    value: 'checkDestinationName',
    align: 'center',
  },
  {
    text: '计划送检时间',
    value: 'planDeliverTime',
    align: 'center',
  },
  {
    text: '计划送检单位',
    value: 'planMeasureCompany',
    align: 'center',
  },
])
const columnsAll = ref([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '总计(台)',
    value: 'count',
    align: 'center',
  },
])

const columns1 = ref([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '规格型号',
    value: 'model',
    align: 'center',
  },
  {
    text: '出厂编号',
    value: 'manufactureNo',
    align: 'center',
  },
  {
    text: '生产厂家',
    value: 'manufacturer',
    align: 'center',
  },
  {
    text: '使用部门',
    value: 'deptName',
    align: 'center',
  },
  {
    text: '使用岗位',
    value: 'usePosition',
    align: 'center',
  },
  {
    text: '负责人',
    value: 'directorName',
    align: 'center',
  },
  {
    text: '计量标识',
    value: 'meterIdentifyName',
    align: 'center',
  },
  {
    text: '检定(校准)单位',
    value: 'checkOrganization',
    align: 'center',
  },
  {
    text: '证书有效期',
    value: 'certificateValid',
    align: 'center',
  },
  // {
  //   text: '检定去向',
  //   value: 'checkDestinationName',
  //   align: 'center',
  // },
  {
    text: '计划送检时间',
    value: 'planDeliverTime',
    align: 'center',
  },
  {
    text: '计划送检单位',
    value: 'planMeasureCompany',
    align: 'center',
  },
  {
    text: '实际送检单位',
    value: 'realMeasureCompany',
    align: 'center',
  },
  {
    text: '实际送检时间',
    value: 'realDeliverTime',
    align: 'center',
  },
  {
    text: '检定完成时间',
    value: 'checkFinishTime',
    align: 'center',
  },
])
const columnsAll1 = ref([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '总计(台)',
    value: 'count',
    align: 'center',
  },
  {
    text: '未送检(台)',
    value: 'uncheck',
    align: 'center',
  },
  {
    text: '检定中(台)',
    value: 'incheck',
    align: 'center',
  },
  {
    text: '已检完(台)',
    value: 'checked',
    align: 'center',
  },
])
// 获取聚合表格数据
const togetherLoading = ref(true)
const togetherList = ref([])
const fetchTogetherData = () => {
  if ($props.customList) {
    togetherLoading.value = false
    return
  }
  togetherLoading.value = true;
  (isAll.value ? getInfoListTogetherStatus : getInfoListTogether)(id).then((res) => {
    togetherList.value = res.data
    togetherLoading.value = false
  })
}
watch(() => $props.togetherList, (newVal) => {
  if (newVal) {
    togetherList.value = newVal as any
  }
}, {
  deep: true,
})
fetchTogetherData()
// 获取展开行内表格数据
const expandLoading = ref(true)
const expandList = ref([])
const fetchExpandData = (equipmentName: string) => {
  expandLoading.value = true
  if ($props.customExpand) {
    $emits('fetchExpandData', equipmentName, (val) => {
      expandList.value = val.data.map((item: any) => ({ ...item, checkDestinationName: item.checkDestination === '1' ? '计量室' : '外送' }))
      expandLoading.value = false
    })
  }
  else {
    getInfoList(id, equipmentName).then((res) => {
      expandList.value = res.data.map((item: any) => ({ ...item, checkDestinationName: item.checkDestination === '1' ? '计量室' : '外送' }))
      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-block class="base-info-device" title="计划列表">
    <!-- 展开行表格 -->
    <normal-table
      class="nortable-header" :data=" [] " :total=" 0 " :columns="isAll ? columnsAll1 : columnsAll 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" width="38">
        <template #default="">
          <normal-table
            :data=" expandList " :total=" 0 " :columns="isAll ? columns1 : columns as any " :list-loading=" expandLoading " :options="
              {
                needIndex: false, // 是否需要序号列
                border: true, // 是否需要上方边框
              }
            " :pagination=" false " :is-showmulti-select=" true "
          />
        </template>
      </el-table-column>
      <template v-if="!isAll">
        <el-table-column label="设备名称" prop="equipmentName" align="center" />
        <el-table-column label="数量" align="center">
          <template #default=" scope ">
            共计{{ scope.row.count }}台
          </template>
        </el-table-column>
      </template>
      <template v-if="isAll">
        <!-- <el-table-column label="设备名称" prop="equipmentName" align="center" /> -->
        <el-table-column v-for="item in columnsAll1" :key="item.value" :label="item.text" :prop="item.value" align="center" />
      </template>
    </el-table>
  </detail-block>
</template>

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