<template>
  <div class="energyReport">
    <div class="energContent1">
      <div style="display: flex">
        <el-select v-model="siteValue" placeholder="选择站点">
          <el-option
            v-for="item in siteOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="energSwitch">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :props="defaultProps"
        />
      </div>
    </div>
    <div class="energContent2">
      <div class="energDivOne">
        <div style="width: 60%">
          <div class="energDivTwo">
            <div class="block">
              <span>日期：</span>
              <el-date-picker
                style="width: 150px"
                v-model="dateValue"
                type="date"
              ></el-date-picker>
            </div>
            <div class="pointOfTime">
              <span>时间点：</span>
              <el-select
                v-model="timeValue"
                multiple
                collapse-tags
                placeholder="请选择时间点"
                class="pointSelect"
              >
                <el-option
                  v-for="item in timeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>

              <el-select
                v-model="clickValue"
                clearable
                placeholder="一键选择"
                class="clickSelect"
              >
                <el-option
                  v-for="item in clickOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>

              <el-button
                icon="el-icon-search"
                type="primary"
                style="padding: 7px 12px"
              >
                查询
              </el-button>
            </div>
          </div>
        </div>

        <div style="width: 40%">
          <div style="display: flex; float: right; margin-right: 15px">
            <el-button style="padding: 7px 12px">
              <svg-icon iconClass="modification"></svg-icon>
              一键纠正
            </el-button>
            <el-button
              icon="el-icon-download"
              type="primary"
              style="padding: 7px 12px"
            >
              导入
            </el-button>
            <el-button
              icon="el-icon-upload2"
              type="primary"
              style="padding: 7px 12px"
            >
              导出
            </el-button>
            <el-button
              icon="el-icon-s-order"
              type="primary"
              style="padding: 7px 12px"
            >
              保存
            </el-button>
          </div>
        </div>
      </div>
      <div class="energEcharts">
        <tables :Height="Height"></tables>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs } from 'vue'
// import echarts from './ehcarts/index.vue'
import tables from './tables/index.vue'

export default defineComponent({
  name: 'energyReport',
  components: { tables },
  props: {},
  setup() {
    const state = reactive({
      dateValue: '2021-10-16',
    })

    const Height = ref()
    Height.value = window.innerHeight - 205 + 'px'
    window.onresize = function () {
      Height.value = window.innerHeight - 205 + 'px'
    }
    return {
      Height,
      ...toRefs(state),
      siteValue: ref(''), //站点下拉列表v-model
      checked: ref(false),
      data: [
        {
          id: 1,
          label: '设备1',
          children: [
            {
              id: 4,
              label: '母线停电次数',
            },
            {
              id: 4,
              label: '功率因数',
            },
            {
              id: 4,
              label: 'A相功率因数',
            },
          ],
        },
      ],
      siteOptions: ref([
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
        {
          value: 'Option4',
          label: 'Option4',
        },
        {
          value: 'Option5',
          label: 'Option5',
        },
      ]),
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      timeOptions: ref([
        {
          value: 1,
          label: '00:00',
        },
        {
          value: 2,
          label: '00:05',
        },
        {
          value: 3,
          label: '00:10',
        },
        {
          value: 4,
          label: '00:15',
        },
        {
          value: 5,
          label: '00:20',
        },
      ]),
      timeValue: ref([]),

      clickOptions: ref([
        {
          value: 1,
          label: '所有整点',
        },
        {
          value: 2,
          label: '所有点',
        },
        {
          value: 3,
          label: '清除时间点',
        },
      ]),
      clickValue: ref([]),
    }
  },
})
</script>

<style lang="scss" scoped>
.energyReport {
  display: flex;
  height: calc(100vh - 130px);
  // padding: 30px;
  // margin-top: 50px;
  .energContent1 {
    background-color: #fff;
    width: 15%;
    height: 100%;
    margin-right: 25px;
    padding: 20px;
    min-width: 200px;
    .energSwitch {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      cursor: pointer;
      .energSwitchOne {
        display: flex;
        border: 0.5px solid silver;
        padding: 8px;
        font-size: 13px;
        div:nth-child(1) {
          width: 100%;
        }
      }
      .energSwitchOne:hover {
        background-color: #409eff;
      }
      .energSwitchOne:focus {
        background-color: #409eff;
      }
    }
  }
  .energContent2 {
    background-color: #fff;
    width: 85%;
    min-width: 845px;
    height: 100%;
    .energDivOne {
      display: flex;
      margin: 15px 0px 15px 15px;
      .energDivTwo {
        display: flex;
        font-weight: 600;
        color: #9d9d9d;
        // margin-left: 20px;
        width: 100%;
        .block {
          display: flex;
          width: 25%;
          span {
            line-height: 30px;
            white-space: nowrap;
          }
        }
        .pointOfTime {
          display: flex;
          margin: 0 15px;
          width: 75%;
          span {
            white-space: nowrap;
            line-height: 30px;
          }
          .pointSelect {
            width: 15rem;
            margin-right: 15px;
          }
          .clickSelect {
            width: 10rem;
            margin-right: 15px;
          }
        }
      }
    }
  }
}

// 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>