<template>
  <div class="chainAnalysis">
    <div class="chainContent1">
      <div style="display: flex">
        <el-select
          v-model="store.state.siteId"
          placeholder="选择站点"
          @change="siteChange"
          filterable
        >
          <el-option
            v-for="item in store.state.siteList"
            :key="item.id"
            :label="item.siteName"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>

      <div class="chainSwitch">
        <!-- <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :props="defaultProps"
        /> -->

        <el-tree
          ref="tree"
          :data="store.state.deviceList"
          show-checkbox
          node-key="id"
          accordion
          :check-strictly="true"
          :props="defaultProps"
          @check="currentChecked"
        />
      </div>
    </div>
    <div class="chainContent2">
      <div class="chainDivOne">
        <div class="chainDivTwo">
          <div class="block">
            <span class="demonstration">选择时间范围：</span>
            <el-date-picker
              v-model="dateTime"
              type="datetimerange"
              range-separator="➥"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </div>
        </div>
        <el-radio-group
          v-model="listTabPosition"
          @change="listTabsChange(listTabPosition)"
          style="display: flex"
        >
          <el-radio-button label="allValue">所有值</el-radio-button>
          <el-radio-button label="dailyValue">每日值</el-radio-button>
          <el-radio-button label="monthValue">每月值</el-radio-button>
          <el-select
            v-model="valueCalculation"
            placeholder="Select"
            style="width: 100px; margin-left: 10px"
            v-if="typeSrarch"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <div style="margin-left: 10px">
            <el-button
              icon="el-icon-search"
              type="primary"
              style="padding: 7px 12px"
              @click="searchData()"
            >
              查询
            </el-button>
          </div>
        </el-radio-group>
      </div>
      <div class="chainEcharts"  v-loading="loading">
        <echarts
          v-for="(item, index) in echartsDataObj"
          :key="index"
          :echartsDataOne="item"
          
        ></echarts>
      </div>
    </div>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { defineComponent, ref, reactive, toRefs } from 'vue'
import echarts from './ehcarts/index.vue'

import { ElNotification } from 'element-plus'
import * as api from '@/api/dataManage/chainAnalysis.js'
import { ElMessage } from 'element-plus'
import { parseTime } from '@/utils'

export default defineComponent({
  name: 'chainAnalysis',
  components: { echarts },
  props: {},
  setup() {
    const store = useStore()
    const listTabsChange = (value) => {
      if (value == 'allValue') {
        typeSrarch.value = 0
      } else if (value == 'dailyValue') {
        typeSrarch.value = 1
        valueCalculation.value = 1
      } else {
        typeSrarch.value = 2
        valueCalculation.value = 1
      }
    }
    const flag = ref(false)
    const flag2 = ref(false)
    const typeSrarch = ref(0)
    const treeCheckedList = ref([])
    const valueCalculation = ref()
     const loading=ref(false)
    // const dateTime = ref([
    //   new Date(2021, 9, 1, 10, 10),
    //   new Date(2021, 9, 30, 10, 10),
    // ])
    const dateTime = ref('')
    const ecahrtsData = ref({})
    const echartsDataCurrent = ref([])
    const echartsDataBefore = ref([])
    const echartsDataObj = ref([])
    const state = reactive({
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
    })

    //通过站点切换下拉框 change事件改变 tree树中的数据
    const siteChange = () => {
      store.commit('publicDeviceList')
       treeCheckedList.value=[]
    }
    const currentChecked = (nodeObj, SelectedObj) => {
      nodeObj, SelectedObj
      treeCheckedList.value = SelectedObj.checkedNodes
      treeCheckedList.value = []
      SelectedObj.checkedNodes.forEach((item) => {
        treeCheckedList.value.push(item.deviceCode)
        remove(treeCheckedList.value, item.deviceCode)
      })
    }

    function remove(arr, item) {
      let newArr = arr.filter((ele) => {
        return ele !== item
      })
      return newArr
    }

    async function searchData() {
      if (!dateTime.value) {
         loading.value=false
        ElNotification({
          title: '提示',
          message: '请选择开始和结束时间',
          type: 'warning',
        })
        return
      }
      loading.value=true;

      if (treeCheckedList.value.length > 0) {
        store.commit('TimeAll_function', dateTime.value)
        const time = store.state.Time_Data

        // 时间处理start


        var startA = new Date(time[0]) //开始
        startA = startA.getTime()

        var endA = new Date(time[1])
        endA = endA.getTime() //结束

        var distance = endA - startA //时间差值

        var endB = startA - 60 * 1000 //前一个结束时间
        var startB = endB - distance //前一个开始时间
       

        // 时间处理end

        await api
          .ringRatioList({
            startTime: time[0],
            endTime: time[1],
            type: typeSrarch.value,
            valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
            displayField: treeCheckedList.value,
          })
          .then((requset) => {
          
            if (requset.status === 'SUCCESS') {
              flag.value = true
              echartsDataCurrent.value = requset.data
            } else {
              ElMessage.error(requset.msg)
            }
          })

        await api
          .ringRatioList({
            startTime: parseTime(startB),
            endTime: parseTime(endB),
            type: typeSrarch.value,
            valueCalculation: typeSrarch.value ? valueCalculation.value : 0,
            displayField: treeCheckedList.value,
          })
          .then((requset) => {
            if (requset.status === 'SUCCESS') {
              
              flag2.value = true
              echartsDataBefore.value = requset.data
            } else {
              ElMessage.error(requset.msg)
            }
          })
        if(echartsDataBefore.value&& echartsDataCurrent.value){
           loading.value=false

        }
        var jsona = JSON.stringify(echartsDataCurrent.value)
        var jsonb = jsona.replace(/"list"/g, '"list2"')
        jsonb = jsonb.replace(/"listDate"/g, '"listDate2"')
        var obj1 = JSON.parse(jsonb)

        var obj2 = echartsDataBefore.value
        echartsDataObj.value = obj1.map((item, index) => {
          return { ...item, ...obj2[index] }
        })
       
        if (echartsDataObj.value.length == []) {
          ElMessage.warning('暂无结果')
        }
      } else {
         loading.value=false
        console.log('', 1)
        ElNotification({
          title: '提示',
          message: '请选择测点',
          type: 'warning',
        })
      }
    }

    return {
      store,
      ...toRefs(state),
      loading,
      listTabPosition: ref('allValue'),
      data: [
        {
          id: 1,
          label: '设备1',
          children: [
            {
              id: 4,
              label: '母线停电次数',
            },
            {
              id: 4,
              label: '功率因数',
            },
            {
              id: 4,
              label: 'A相功率因数',
            },
          ],
        },
      ],
      value: ref(''),
      options: ref([
        {
          value: 1,
          label: '平均值',
        },
        {
          value: 2,
          label: '最大值',
        },
        {
          value: 3,
          label: '最小值',
        },
        {
          value: 4,
          label: '累计值',
        },
      ]),
      defaultProps: {
        children: 'children',
        label: 'deviceName',
        deviceCode: 'deviceCode',
        id: 'id',
      },
      dateTime,
      ecahrtsData,
      echartsDataCurrent,
      echartsDataBefore,
      echartsDataObj,

      valueCalculation,
      typeSrarch,
      flag,
      flag2,
      listTabsChange,
      siteChange,
      currentChecked,
      searchData,
    }
  },
})
</script>

<style lang="scss" scoped>
.chainSwitch::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
}
.chainSwitch::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgb(226, 224, 224);
}
.chainSwitch::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 10px;
  background: rgb(245, 245, 265);
}

.chainAnalysis {
  display: flex;
  height: calc(100vh - 130px);
  // padding: 30px;
  // margin-top: 50px;
  .chainContent1 {
    background-color: #fff;
    width: 15%;
    height: 100%;
    margin-right: 25px;
    padding: 20px;
    min-width: 200px;
    // overflow-y: auto;
    .chainSwitch {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      cursor: pointer;
      height: calc(100% - 50px);
      overflow-y: auto;
      .chainSwitchOne {
        display: flex;
        border: 0.5px solid silver;
        padding: 8px;
        font-size: 13px;
        div:nth-child(1) {
          width: 100%;
        }
      }
      .chainSwitchOne:hover {
        background-color: #409eff;
      }
      .chainSwitchOne:focus {
        background-color: #409eff;
      }
    }
  }
  .chainContent2 {
    background-color: #fff;
    width: 85%;
    min-width: 845px;
    height: 100%;
    .chainEcharts {
      height: calc(100vh - 192px);
      overflow-y: auto;
    }
    .chainDivOne {
      display: flex;
      margin: 15px 0px 15px 15px;
      .chainDivTwo {
        font-weight: 600;
        color: #9d9d9d;
        margin-right: 20px;
      }
    }
  }
}
.chainEcharts::-webkit-scrollbar {
  display: none;
}
</style>
<style lang="less">
.chainSwitch {
  .el-tree-node__content .el-checkbox__input {
    display: none;
  }
  .el-tree-node
    .el-tree-node__children
    .el-tree-node__content
    .el-checkbox__input {
    display: block;
  }
}
</style>