<template>
  <el-table :data="activedPoint" class="w-full" border>
    <el-table-column label="隔离点名称" align="center" prop="ipName">
      <template #default="scope">
        <el-link type="primary" @click="handleDetail(scope)" :underline="false">
          {{ scope.row.ipName }}
        </el-link>
      </template>
    </el-table-column>
    <el-table-column
      v-for="point in activePlan"
      align="center"
      :key="point.id"
      :label="point.ipName"
      :prop="'' + point.id"
    >
      <template #default="scope">
        <el-link
          type="primary"
          @click="handleDetail(scope)"
          :underline="false"
          v-if="getDetailStatus(scope).total > 0"
        >
          <span class="text-green-500 pr-1"> {{ getDetailStatus(scope).completed }} </span>
          <span class="text-gray-500">/ {{ getDetailStatus(scope).total }} </span>
        </el-link>
      </template>
    </el-table-column>
  </el-table>
  <DetailPointModal
    :isolation-point-id="selectedCell.isolationPointId"
    :isolation-plan-id="selectedCell.isolationPlanId"
    ref="detailPointModalRef"
  />
</template>
<script lang="ts" setup>
import { nextTick } from 'vue'
import { useElLockStore } from '@/store/modules/elLock'
import DetailPointModal from '@/components/Lock/DetailPointModal.vue'
defineOptions({ name: 'LockChart' })
const elLockStore = useElLockStore()
let activedPoint = elLockStore.isolationPoints.filter((item) => item.status == 1)
let activePlan = elLockStore.isolationPlans.filter((item) => item.status == 0)
const getDetailStatus = ({ row, column }) =>
  elLockStore.planItemDetails
    .filter((detail) => {
      if (detail.isolationPointId != row.id) {
        return false
      }
      let item = elLockStore.planItems.find((item) => item.id == detail.isolationPlanItemId)
      if (item && item.isolationPlanId == column.property) {
        return true
      }
    })
    .reduce(
      (acc, cur) => {
        acc.total++
        if (cur.lockStatus == 5) {
          acc.completed++
        }
        return acc
      },
      {
        total: 0,
        completed: 0
      }
    )
const detailPointModalRef = ref()
const selectedCell = ref<{ isolationPointId?: number; isolationPlanId?: number }>({
  isolationPointId: undefined,
  isolationPlanId: undefined
})
const handleDetail = ({ row, column }) => {
  selectedCell.value.isolationPointId = row.id
  if (column.property != 'ipName') {
    selectedCell.value.isolationPlanId = +column.property
  } else {
    selectedCell.value.isolationPlanId = undefined
  }
  // 调用detailPanel的show方法显示弹窗
  nextTick(() => {
    detailPointModalRef.value?.show()
  })
}
</script>
