<!--
  Description: 台账管理
  Author: 李亚光
  Date: 2024-07-22
 -->
<script lang="ts" setup name="LedgerManage">
import type { TabsPaneContext } from 'element-plus'
import wellList from './components/wellList.vue'
import gridList from './components/gridList.vue'
const { proxy } = getCurrentInstance() as any
const activeName = ref(
  proxy.hasPerm('/ledger/manage/well')
    ? '闸井'
    : proxy.hasPerm('/ledger/manage/station')
      ? '场站'
      : proxy.hasPerm('/ledger/manage/grid')
        ? '网格'
        : '',
)
const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
}
</script>

<template>
  <!-- 布局 -->
  <app-container>
    <div class="tabs">
      <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane v-if="proxy.hasPerm('/ledger/manage/well')" label="闸井" name="闸井">
          <well-list v-if="activeName === '闸井'" type="1" />
        </el-tab-pane>
        <el-tab-pane v-if="proxy.hasPerm('/ledger/manage/station')" label="场站" name="场站">
          <well-list v-if="activeName === '场站'" type="2" />
        </el-tab-pane>
        <el-tab-pane v-if="proxy.hasPerm('/ledger/manage/grid')" label="网格" name="网格">
          <grid-list v-if="activeName === '网格'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
// .tabs{
//   // background-color: #fff;
// }
// style="background-color: #F0F1F3;"

::v-deep(.container-card) {
  background-color: #f0f1f3;
}

::v-deep(.el-tabs__content) {
  padding: 0;
  border: none;
  // border-top: 1px solid #dcdfe6;
}

::v-deep(.el-tabs__header) {
  // margin-bottom: 100px;
  background-color: #fff;
}
</style>