<template>
  <div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
    <div class="content">
      <div class="item">
        <div class="container" ref="length">
          <div class="value" ref="valueA"></div>
        </div>
        <div>
          <div class="icon"></div>
          <span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
        </div>
      </div>
      <div class="item">
        <div class="container" ref="length">
          <div class="value" ref="valueB"></div>
        </div>
        <div>
          <div class="icon"></div>
          <span>当月节省量：{{ monthlySavings }}v</span>
        </div>
      </div>
    </div>
    <div class="digital-tunnel">
      <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="top-tag">
          <div class="allUsedEle">
            <div class="use-title">
              12月总用电量
            </div>
            <div class="value">2345v</div>
          </div>
          <div class="allUsedEle">
            <div class="use-title">
              当月节省量
            </div>
            <div class="value">345v</div>
          </div>
        </div>
        <div class="chat-dialog">
          <div id="containerEle"></div>
          <div style="width: 1px;"></div>
        </div>
        <div class="left-bottom-icon"></div>
        <div class="right-bottom-icon"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';

const props = defineProps({
  list: Array,
  eleData: Array
});
let myEcharts = reactive({});
const isVisited = ref(false);
const eleData = ref([])
const electricityConsumptionMonthly = ref()
const monthlySavings = ref(4000)
const length = ref(null);
const valueA = ref();
const valueB = ref(monthlySavings.value);
const bgImage = computed(() =>
    isVisited.value
        ? "bpq_active.png"
        : "bg.png"
);
watch(() => props.eleData, (now) => {
  getBasicData(now.frequencyChangerList)
  setValueA()
}, {deep: true});
watch(() => props.list, (now) => {
  eleData.value.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
        if (newItem.electricityConsumptionDay) {
          electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
          // item.electricityConsumptionDay = newItem.electricityConsumptionDay
          // item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
          // item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
        }
      }
    })
  })
  setValueA()
}, {deep: true});
onMounted(()=>{
  setValueA()
  setValueB()
})
const setValueA=()=> {
  let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
  valueA.value.style.height = `${width}px`;
}
const setValueB=()=> {
  let width = (4000 * length.value.offsetHeight) / 10000;
  valueB.value.style.height = `${width}px`;
}
const getBasicData = (data) => {
  let tranObj = {}
  let tranArr = []
  data?.map(item => {
    electricityConsumptionMonthly.value = item.electricityConsumptionMonthly,
        tranObj = {
          equipmentId: item.equipmentId,
          // equipmentName: item.equipmentName,
          // electricityConsumptionDay: item.electricityConsumptionDay,
          // electricityConsumptionMonthly: item.electricityConsumptionMonthly,
          // electricityConsumptionTotal: item.electricityConsumptionTotal,
        }
    tranArr.push(tranObj)
  })
  eleData.value = tranArr
}
const handleOpenChart = () => {
  console.log('用电量弹窗')
  isVisited.value = true
  nextTick(() => {
    initChart()
  })
}
/**
 * 初始化echarts实例方法
 */
const initChart = () => {
  //3.初始化container容器
  myEcharts = echarts.init(document.getElementById('containerEle'));
  //5.传入数据
  let option = {
    //图例
    legend: {
      left: 0,
      textStyle: {
        color: '#60DDDE',
        fontSize: 45
      },
      itemWidth: 30,
      itemHeight: 30,
      icon: "circle",
    },
    //离容器四侧的距离
    grid: {
      left: 0, // 左边距
      right: 20, // 右边距
      top: 80, // 顶边距
      bottom: 20, // 底边距
      containLabel: true,
    },
    //提示框组件
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: "transparent", // 设置背景颜色为透明
      borderColor: "transparent", // 设置边框颜色为透明
      padding: 0, // 设置内边距为0
      textStyle: {
        fontSize: 40
      },
      formatter: function (params) {
        let content = `
          <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
            <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}日</div>
            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">日用电量: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">日节省量: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
          </div>`;
        return content;
      },
    },
    toolbox: {
      show: false,
      right: 10,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        }
      }
    },
    dataZoom: [{
      type: 'inside'
    }],
    //X轴
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
      axisLabel: {
        textStyle: {
          fontSize: 45,
          color: '#D6F1FA'
        },
      },
    },
    //Y轴
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          fontSize: 45,
          color: '#D6F1FA'
        },
      },
    },
    //配置项
    series: [
      {
        name: '日用电量',
        data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
        type: 'bar'
      },
      {
        name: '日节省量',
        data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
        type: 'bar'
      },
    ]
  }
  myEcharts.setOption(option);
  //图表大小自适应窗口大小变化
  window.onresize = () => {
    myEcharts.resize();
  }
}
const getImageUrl = (name) => {
  return new URL(`../../../assets/images/usedEle/${name}`, import.meta.url).href
}
</script>

<style lang="scss" scoped>
:deep(.el-dialog__header) {
  padding: 0 !important;
}

#used-ele {
  cursor: pointer;
  width: 830px;
  height: 373px;
  color: aliceblue;
  position: absolute;
  top: 1220px;
  //top: 1680px;
  left: 68px;
  background-image: url(../../../assets/images/usedEle/bg.png);
  padding: 21px 62px 35px 62px;

  .title {
    width: 96px;
    height: 42px;
    font-size: 32px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    color: #38cafb;
    line-height: 42px;
  }

  .content {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    .item {
      margin-top: 44px;
      font-size: 28px;
      color: #38CAFB;
      display: flex;
      flex-direction: column;
      align-items: center;
      .container {
        width: 60px;
        height: 210px;
        border-radius: 31px;
        border: 1px solid #0f82af;
        position: relative;
        margin-bottom: 20px;

        .value {
          position: absolute;
          bottom: 0;
          width: 60px;
          height: inherit;
          background: #60ddde;
          border-radius: 31px;
          transition: width 0.5s linear 0s;
        }
      }
      > div:nth-child(2) {
        display: flex;

        .icon {
          margin-right: 10px;
          width: 29px;
          height: 33px;
          background-image: url(../../../assets/images/usedEle/white-ele.png);
        }
      }
    }
  }
}
</style>
