<template>
  <div class="consumConfig">
    <div class="consContent1">
      <div style="display: flex">
        <el-select
          v-model="siteValue"
          placeholder="选择站点"
          @change="siteOption()"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="consSwitch">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :props="defaultProps"
        />
      </div>
    </div>
    <div class="consContent2">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        style="background-color: #fff; height: 100%"
        class="tabsSizeColor consumConfig-tabs"
      >
        <el-tab-pane label="基本配置" name="consBasic">
          <baseic-Table></baseic-Table>
        </el-tab-pane>
        <el-tab-pane label="偏差配置" name="consDeviation">
          <deviation-Table></deviation-Table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { defineComponent, ref } from 'vue'
import baseicTable from './tables/basicTable.vue'
import deviationTable from './tables/deviationTable.vue'

export default defineComponent({
  name: 'consumConfig',
  components: { baseicTable, deviationTable },
  props: {},
  setup() {
    const store = useStore()

    const siteOption = () => {
      console.log(store.state)
    }

    const handleClick = (tab, event) => {
      console.log(tab, event)
    }

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }

    return {
      headClass,
      // ...toRefs(state), //时间选择默认参数
      siteValue: ref(1), //select站点选择
      activeName: ref('consBasic'),
      siteOption, //站点下拉change事件
      handleClick, //tabs切换事件
      data: [
        {
          id: 1,
          label: '设备1',
          children: [
            {
              id: 4,
              label: '母线停电次数',
            },
            {
              id: 4,
              label: '功率因数',
            },
            {
              id: 4,
              label: 'A相功率因数',
            },
          ],
        },
      ],
      options: ref([
        {
          value: 1,
          label: 'Option1',
        },
        {
          value: 2,
          label: 'Option2',
        },
        {
          value: 3,
          label: 'Option3',
        },
        {
          value: 4,
          label: 'Option4',
        },
      ]),
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
})
</script>

<style lang="scss">
.consumConfig {
  display: flex;
  height: calc(100vh - 130px);
  // padding: 30px;
  // margin-top: 50px;
  .consContent1 {
    background-color: #fff;
    width: 15%;
    height: 100%;
    margin-right: 25px;
    padding: 20px;
    min-width: 200px;
    .consSwitch {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      cursor: pointer;
    }
  }
  .consContent2 {
    background-color: #fff;
    width: 85%;
    min-width: 845px;
    height: 100%;
    .consDivOne {
      display: flex;
      margin: 15px 0px 15px 15px;
      .consDivTwo {
        font-weight: 600;
        color: #9d9d9d;
        margin-right: 20px;
      }
    }
    .basicHeader {
      margin-left: 15px;
      margin-top: 15px;
      margin-bottom: 15px;
      overflow: hidden;
      .videoRight {
        margin-right: 15px;
        float: right;
      }
    }
  }
}

// tab重置样式
.tabsSizeColor > .el-tabs__header .el-tabs__item {
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}

.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}
.el-tabs__header {
  margin-bottom: 0;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
</style>

<style lang="less" scoped>
.consumConfig-tabs {
  height: calc(100% - 67px);
}
</style>