<template>
  <div class="statisicalAn">
    <div style="display: flex; justify-content: space-between">
      <div class="tab-header">
        <div v-for="item in tabList" :key="item.key" class="tab">
          <span
            :class="[activeKey == item.key ? 'actived' : 'uactived']"
            @click="activeKey = item.key"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <searchBox
        class="searchBox"
        ref="searchBox"
        :btn-option-list="[]"
        :search-options="searchOptions"
        :title-option="{ title: '', info: '' }"
        @onSearch="onSearch"
      >
      </searchBox>
    </div>
    <div class="content">
      <energyEchart
        :chart-options="echartsInfo[activeKey].chartOptions"
        :chart-data="echartsInfo[activeKey].chartData"
        :columns="tableList[activeKey].columns"
        :table-info="tableList[activeKey].tableInfo"
      ></energyEchart>
    </div>
  </div>
</template>

<script>
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
import searchBox from '@/components/SearchBox.vue'
export default {
  name: 'StatisicalAnView',
  components: { energyEchart, searchBox },

  data() {
    return {
      paramsDate: {},

      searchOptions: [
        {
          label: '日期',
          type: 'datePick',
          value: [],
          key: 'time'
        }
      ],
      echartsInfo: {
        0: {
          chartOptions: [
            {
              title: '充放电分析',
              type: 'bar',
              dataKey: 'sales',
              infoKeys: [
                { key: 'key1', label: '日充电电量', lineColor: '#2A82E4' },
                { key: 'key2', label: '日放电电量', lineColor: '#5AABF2' }
              ]
            },
            {
              title: '运行状态分析',
              type: 'bar',
              dataKey: 'users',
              infoKeys: [
                { key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' },
                { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
                { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
              ]
            },
            {
              title: '电压与电流分析',
              type: 'line',
              dataKey: 'stock',
              infoKeys: [
                {
                  key: 'key1',
                  label: '电压',
                  lineColor: '#3F80F2',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                },
                {
                  key: 'key2',
                  label: '电流',
                  lineColor: '#A9A6FF',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            },
            {
              title: '功率分析',
              type: 'line',
              dataKey: 'yearly',
              infoKeys: [
                {
                  key: 'key1',
                  label: '功率',
                  lineColor: '#00FFFB',
                  colorStart: ' rgba(10, 250, 106, 0.15)',
                  colorEnd: ' rgba(171, 255, 249, 0.3)'
                }
              ]
            }
          ],
          chartData: {
            sales: [
              {
                date: '2025-08-30',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-29',
                key1: 8,
                key2: 5,
                key3: 5,
                key4: 7
              },
              {
                date: '2025-08-28',
                key1: 0,
                key2: 10,
                key3: 20,
                key4: 4
              },
              {
                date: '2025-08-27',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-26',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-25',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-24',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-23',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-22',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-21',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-20',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-19',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-18',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-17',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              }
            ],
            users: [
              {
                date: '2025-08-30',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-29',
                key1: 8,
                key2: 5,
                key3: 5,
                key4: 7
              },
              {
                date: '2025-08-28',
                key1: 0,
                key2: 10,
                key3: 20,
                key4: 4
              },
              {
                date: '2025-08-27',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-26',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-25',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-24',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-23',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-22',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-21',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-20',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-19',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-18',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-17',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              }
            ],
            stock: [
              {
                date: '2025-08-30',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-29',
                key1: 8,
                key2: 5,
                key3: 5,
                key4: 7
              },
              {
                date: '2025-08-28',
                key1: 0,
                key2: 10,
                key3: 20,
                key4: 4
              },
              {
                date: '2025-08-27',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-26',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-25',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-24',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-23',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-22',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-21',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-20',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-19',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-18',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-17',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              }
            ],
            yearly: [
              {
                date: '2025-08-30',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-29',
                key1: 8,
                key2: 5,
                key3: 5,
                key4: 7
              },
              {
                date: '2025-08-28',
                key1: 0,
                key2: 10,
                key3: 20,
                key4: 4
              },
              {
                date: '2025-08-27',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-26',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-25',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-24',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-23',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-22',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-21',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-20',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-19',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-18',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              },
              {
                date: '2025-08-17',
                key1: 10,
                key2: 0,
                key3: 15,
                key4: 5
              }
            ]
          }
        }
      },
      activeKey: '0',
      tabList: [
        {
          key: '0',
          name: '储能设备'
        },
        {
          key: '1',
          name: '光伏设备'
        },
        {
          key: '2',
          name: '充电设备'
        }
      ],
      tableList: {
        0: {
          columns: [
            {
              title: '设备ID',
              dataIndex: 'key1',
              key: 'key1',
              width: 120,
              ellipsis: true
            },
            {
              title: '设备名称',
              dataIndex: 'key2',
              key: 'key2',
              width: 120,
              ellipsis: true
            },
            {
              title: '设备类型',
              dataIndex: 'key3',
              key: 'key3',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电电量',
              dataIndex: 'key4',
              key: 'key4',
              width: 120,
              ellipsis: true
            },
            {
              title: '充电时长',
              dataIndex: 'key5',
              key: 'key5',
              width: 120,
              ellipsis: true
            },
            {
              title: '放电时长',
              dataIndex: 'key6',
              key: 'key6',
              width: 120,
              ellipsis: true
            },
            {
              title: '放电电量',
              dataIndex: 'key7',
              key: 'key7',
              width: 120,
              ellipsis: true
            },
            {
              title: '故障次数',
              dataIndex: 'key8',
              key: 'key8',
              width: 120,
              ellipsis: true
            },
            {
              title: '日期',
              dataIndex: 'key9',
              key: 'key9',
              width: 120,
              ellipsis: true
            }
          ],
          tableInfo: {
            tableId: '',
            geturl: ''
          }

          //   tableData:[
          //     {
          //       key1:'1515151515',
          //       key2:'设备1111',
          //       key3:'类型',
          //       key4:'电量',
          //       key5:'时长',
          //       key6:'时长',
          //       key7:'dianl',
          //       key8:'时长',
          //       key9:'时长11',
          //     },
          //     {
          //       key1:'1515151515',
          //       key2:'设备1111',
          //       key3:'类型',
          //       key4:'电量',
          //       key5:'时长',
          //       key6:'时长',
          //       key7:'dianl',
          //       key8:'时长',
          //       key9:'时长11',
          //     },
          //     {
          //       key1:'1515151515',
          //       key2:'设备1111',
          //       key3:'类型',
          //       key4:'电量',
          //       key5:'时长',
          //       key6:'时长',
          //       key7:'dianl',
          //       key8:'时长',
          //       key9:'时长11',
          //     },
          //     {
          //       key1:'1515151515',
          //       key2:'设备1111',
          //       key3:'类型',
          //       key4:'电量',
          //       key5:'时长',
          //       key6:'时长',
          //       key7:'dianl',
          //       key8:'时长',
          //       key9:'时长11',
          //     },
          //   ]
        }
      }
    }
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    onSearch(data) {
      this.paramsDate.startTime = data.time ? data.time[0] : ''
      this.paramsDate.endTime = data.time ? data.time[1] : ''
      this.pageOption.current = 1
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
@import url(@/style/color.scss);
.statisicalAn {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: $bg1-color;
  border-radius: 15px;
  .tab-header {
    display: flex;

    .tab {
      & > span {
        font-size: 14px;
        margin-right: 15px;
        display: inline-block;
        padding: 10px 50px;
        cursor: pointer;
        border: 1px solid $tab-border;
        border-radius: 4px;
      }
    }
  }

  .actived {
    color: #ffffff;

    background-color: $green;
  }
  .uactived {
    color: #a6b8dd;
    background-color: $bg2-color;
  }
}
.content {
  overflow: scroll;
  height: calc(100% - 15px);
  margin-top: 10px;
}
</style>
