<template>
  <div class="demandAnalysis">
    <div class="demContent1">
      <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="demSwitch">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :props="defaultProps"
        />
      </div>
    </div>
    <div class="demContent2">
      <div class="demDivOne">
        <div class="demDivTwo">
          <div class="block">
            <span class="demonstration" style="color: black">日期:</span>
            <el-date-picker
              v-model="value1"
              type="month"
              placeholder="请选择日期"
            ></el-date-picker>
          </div>
        </div>
        <el-radio-group
          v-model="listTabPosition"
          @change="listTabsChange(listTabPosition)"
          style="display: flex"
        >
          <el-radio label="1" style="line-height: 2.5">电费计算周期</el-radio>
          <el-radio label="2" style="line-height: 2.5">自然月</el-radio>

          <div style="margin-left: 10px">
            <el-button icon="el-icon-search" type="primary">查询</el-button>
          </div>
        </el-radio-group>
      </div>
      <div class="demEcharTable">
        <div class="Echarts">
          <div class="ehcartOne">
            <i
              class="el-icon-s-data el-input__icon"
              style="font-size: 20px"
            ></i>
            <span style="font-size: 15px">{{}}每日最大需量趋势</span>
          </div>
          <div>
            <echarts :Height="Height"></echarts>
          </div>
        </div>
        <div class="Tables">
          <el-table
            :data="
              tableData.slice(
                0,
                tableData.length % 2
                  ? tableData.length / 2 + 1
                  : tableData.length / 2
              )
            "
            :height="Height"
            style="width: 100%"
            id="tables1"
          >
            <el-table-column prop="date" label="日期" width="" />
            <el-table-column prop="maximum" label="最大需量(kw)" width="110" />
            <el-table-column prop="time" label="时间" />
          </el-table>
          <el-table
            :data="
              tableData.slice(
                tableData.length % 2
                  ? tableData.length / 2 + 1
                  : tableData.length / 2,
                tableData.length
              )
            "
            :height="Height"
            style="width: 100%"
            id="tables2"
          >
            <el-table-column prop="date" label="日期" width="" />
            <el-table-column prop="maximum" label="最大需量(kw)" width="110" />
            <el-table-column prop="time" label="时间" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { defineComponent, ref, reactive, toRefs } from 'vue'
import echarts from './ehcarts/index.vue'

export default defineComponent({
  name: 'demandAnalysis',
  components: { echarts },
  props: {},
  setup() {
    const store = useStore()

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

    const listTabsChange = (value) => {
      console.log(value)
    }

    const state = reactive({
      value1: '2021-5',
    })

    const Height = ref()
    Height.value = window.innerHeight - 250 + 'px'
    window.onresize = function () {
      Height.value = window.innerHeight - 250 + 'px'
    }

    return {
      Height,
      ...toRefs(state), //时间选择默认参数
      siteValue: ref(1), //select站点选择
      listTabsChange, //单选change事件
      siteOption, //站点下拉change事件
      listTabPosition: ref('1'), //单选按钮
      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',
      },
      tableData: [
        {
          date: '05-01',
          maximum: 'Tom',
          time: '11:01:08',
        },
        {
          date: '05-02',
          maximum: 'Tom',
          time: '09:26:13',
        },
        {
          date: '05-03',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-04',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-05',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-06',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-07',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-08',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-09',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-10',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-11',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-12',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-13',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-14',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-15',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-16',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-17',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-18',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-19',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-20',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-21',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-22',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-23',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-24',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-25',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-26',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-27',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-28',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-29',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-30',
          maximum: 'Tom',
          time: 'No. 189',
        },
        {
          date: '05-31',
          maximum: 'Tom',
          time: 'No. 189',
        },
      ],
    }
  },
})
</script>

<style lang="scss" scoped>
.demandAnalysis {
  display: flex;
  height: calc(100vh - 130px);
  // padding: 30px;
  // margin-top: 50px;
  .demContent1 {
    background-color: #fff;
    width: 15%;
    height: 100%;
    margin-right: 25px;
    padding: 20px;
    min-width: 200px;
    .demSwitch {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      cursor: pointer;
      .demSwitchOne {
        display: flex;
        border: 0.5px solid silver;
        padding: 8px;
        font-size: 13px;
        div:nth-child(1) {
          width: 100%;
        }
      }
      .demSwitchOne:hover {
        background-color: #409eff;
      }
      .demSwitchOne:focus {
        background-color: #409eff;
      }
    }
  }
  .demContent2 {
    background-color: #fff;
    width: 85%;
    min-width: 845px;
    height: 100%;
    .demDivOne {
      display: flex;
      margin: 15px 0px 15px 15px;
      .demDivTwo {
        font-weight: 600;
        color: #9d9d9d;
        margin-right: 20px;
      }
    }
    .demEcharTable {
      display: flex;
      .Echarts {
        width: 60%;
        margin-right: 5px;
        .ehcartOne {
          padding-left: 10px;
          background-color: rgb(233 233 233);
          border-bottom: 1px #bfbfbf solid;
        }
      }
      .Tables {
        width: 40%;
        display: flex;
      }
    }
  }
}
</style>
<style>
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar{
  overflow-y: hidden;
}
</style>