<template>
  <MOSTY.PageTree :pageTitle="null" :searchType="'01'" @getDeptId="getdeptId">
    <template #header>
      <div class="head mr10">
        <div class="bottom">
          <el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
            <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in tabs" :key="i" />
          </el-tabs>
          <div class="toggle" :class="{ active: !isOpen }" @click="isOpen = !isOpen">
            <span>统计</span>
            <el-icon>
              <DArrowLeft />
            </el-icon>
          </div>
        </div>
      </div>
    </template>
    <template #table>
      <Distributing v-if="activeTab === '1'" :obj="listQuery" :type="'bpdsb'" :isShowTotal="isOpen"
        :tableHeight="isOpen ? '45vh' : '60vh'" />
      <DlaqgqjTable v-else-if="activeTab === '2'" :orgCode="orgCode" :orgname='orgname' :isOpen="isOpen" />
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { reactive, onMounted, ref, computed } from "vue"
import Distributing from "@/components/MyComponents/TabList/Distributing.vue"
import { useStore } from "vuex"
import DlaqgqjTable from "@/views/yxkzgl/zyjk/ldfh/Main/DlaqgqjTable";
const store = useStore()
const emit = defineEmits("changePage")
const orgCode = ref(null);
const isOpen = ref(false);
const orgname = ref('');
const listQuery = reactive({
  type: "0",
  saveBtnShow: true
})
const tabs = [
  {
    label: "变配电和防雷设备设施",
    value: "1"
  },
  {
    label: "电力安全工器具",
    value: "2"
  },
];
const activeTab = ref("1");
//获取部门数据
const getdeptId = val => {
  orgCode.value = val.id;
  orgname.value = val.orgname;
  listQuery.orgid = val.id
  store.state.user.currentDeptName = val.orgname
}
const onTabClick = (tab) => {
  isOpen.value = false;
};
onMounted(() => { })
</script>

<style lang="scss" scoped>
.head {

  .bottom {
    height: 48px;
    padding: 8px 14px 0 13px !important;
    position: relative;
    display: flex !important;
    justify-content: space-between !important;
    overflow: hidden;

    .toggle {
      position: static !important;
      z-index: 0 !important;

      .el-icon {
        transform: rotate(90deg);
        transition: all 0.25s ease;
      }

      &.active {
        .el-icon {
          transform: rotate(-90deg);
        }
      }
    }
  }

  ::v-deep .el-tabs {
    .el-tabs__header {
      margin-bottom: 0;
      border-bottom: 0;

      .el-tabs__nav {
        border: none;
      }

      .el-tabs__item {
        background: var(--el-table-cell-bmx-backgroundcolor) !important;
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        line-height: 38px;
        margin: 0 1px;

        &.is-active {
          background: var(--el-color-primary) !important;
          color: #fff;
          border-top: 2px solid var(--el-color-primary) !important;
          border-bottom: 2px solid var(--el-color-primary) !important;
        }
      }
    }
  }

  .toggle {
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #0f3916;

    .el-icon {
      transform: rotate(90deg);
      transition: all 0.25s ease;
    }

    &.active {
      .el-icon {
        transform: rotate(-90deg);
      }
    }
  }
}
</style>
