<template>
  <el-card class="content-div">
    <div class="all-content">
      <Menus :activeI="0"/>
      <div class="top-div">
        <div class="left-div">
          <el-carousel height="258px" >
            <el-carousel-item v-for="item in imgArr" :key="item">
              <h3><img :src="requireImg(item.src)" alt=""></h3>
            </el-carousel-item> 
          </el-carousel>
          <div id="echartDiv" class="echartDiv"></div>
        </div>
        <div class="right-div">
          <el-calendar>
            <template #date-cell="{ data }">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(2).join('') }}
                {{ data.isSelected ? '✔️' : '' }}
              </p>
            </template>
          </el-calendar>
        </div>
      </div>
      <div class="bottom-div">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>电</span>
          </div>
          <div id="echartE" class="echartDiv100"></div>
          <div class="flex-around s-circle">
            <el-progress type="circle" :stroke-width="10" v-for="item in eleArr" :percentage="item.value">
              <template #default="{ percentage }"> 
                <span class="percentage-label">
                  {{ item.name }}
                </span>
                <span class="percentage-value">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="water">水</span>
          </div>
          <div id="echartW" class="echartDiv100"></div>
          <div class="flex-around s-circle">
            <el-progress type="circle" :stroke-width="10" status="success" v-for="item in waterArr" :percentage="item.value">
              <template #default="{ percentage }"> 
                <span class="percentage-label">
                  {{ item.name }}
                </span>
                <span class="percentage-value">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
        </el-card>
      </div>
    </div>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";
import Menus from "@/components/Menus.vue";
export default {
  name: "home",
  components: {
    Menus
  },
  setup() {
    const state = reactive({
      imgArr: [{
        src: 'bg.png'
      },{
        src: 'bg3.png'
      }],
      eleArr:[{
        name:'实时量',
        value: 50
      },{
        name:'同比',
        value: 50
      },{
        name:'环比',
        value: 50
      }],
      waterArr: [{
        name:'实时量',
        value: 50
      },{
        name:'同比',
        value: 50
      },{
        name:'环比',
        value: 50
      }]
    });

    onMounted(() => {
      drawAll();
      dreawEandW("echartE", "#7CBBF7", "#5470C6", "当日用电", "同比用电");
      dreawEandW("echartW", "#2CFEF7", "#51BDBE", "当日用水", "同比用水");
    });
     
   
    const requireImg = (imgPath) => {
      return new URL(`../assets/${imgPath}`, import.meta.url).href;
    };
    const drawAll = () => {
      var dom = document.getElementById("echartDiv");
      var op = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '能耗用量',
              type: 'pie',
              radius: ['30%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bold'
                }
              },
              data: [
                { value: 20, name: '用电' },
                { value: 20, name: '用水' },
                { value: 40, name: '其他' }
              ]
            }
          ]
      };
      getEchart(dom, op) 
    }
    const getEchart = (dom, op) => {
      
      if (dom) {
        var myChart = echarts.init(dom);
        var option = op;

        option && myChart.setOption(option);
      }
    };
    /***************************************************** */
    
    const dreawEandW = (name, lineColor, barColor, barName, lineName) => {
      var dom = document.getElementById(name);
      if (dom) {
        var myChart = echarts.init(dom);
        var option = {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '5%',
            containLabel: true
          },
          legend: {
            data: [barName, lineName]
          },
          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点']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: barName,
              data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130, 70, 110, 130],
              type: 'bar',
              itemStyle: {
                color: barColor
              }
            },
            {
              name: lineName,
              data: [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230],
              type: 'line',
              itemStyle: {
                color: lineColor
              }
            }
          ]
        };

        option && myChart.setOption(option);
      }
    }
    return {
      ...toRefs(state),
      requireImg,
      getEchart,
      drawAll,
      dreawEandW,
    };
  },
};
</script>
<style lang="scss">
  .el-carousel {
    width: 70% !important;
    .el-carousel__container {
      width: 100% !important;
    }
    .el-carousel__item--card.is-active {
      height: 100%;
      // border: 1px solid red;
      h3 {
        height: 100%;
        // border: 1px solid blue;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .is-selected {
    color: #1989fa;
  }
  .el-calendar__header {
    padding: 0 10px;
  }
  .el-button-group>.el-button {
    border: 0;
  }
  .el-calendar-table .el-calendar-day {
    height: 45px;
    font-size: 12px;
  }
  .el-calendar__body {
    padding: 0;
  }
  .s-circle .el-progress-circle {
    width: 70px !important;
    height: 70px !important;
  }
  .percentage-value {
    display: block;
    margin-top: 10px;
    font-size: 28px;
  }
  .percentage-label {
    display: block;
    margin-top: 10px;
    font-size: 12px;
  }
  .demo-progress .el-progress--line {
    margin-bottom: 15px;
    width: 350px;
  }
  .demo-progress .el-progress--circle {
    margin-right: 15px;
  }
  .bottom-div  > .box-card .flex-around span {
    background:transparent !important;
    color: #333 !important;
    font-size: 12px !important;
    padding: 0 !important;
  }
</style>
<style lang="scss" scoped>
.all-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.top-div {
  height: 35%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  
   
}
.bottom-div {
  height: 55%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 1px solid #c3c3c3;
  border-radius: 20px;
  padding: 20px;
  > .box-card {
    width: 49.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    span {
      display: inline-block;
      padding: 5px 20px;
      background: #0a82f3;
      border-radius: 5px;
      color: #fff;
      &.water {
        background: #3dc21c;
      } 
    }
  }
}
.left-div {
  height: 100%;
  width: 77%;
  border: 1px solid #c3c3c3;
  border-radius: 20px;
  display: flex;
  padding: 20px;
}
.right-div {
  height: 100%;
  width: 22%;
  border: 1px solid #c3c3c3;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 20px;
  display: flex;
}
.echartDiv {
  width: 30%;
  height: 100%;
  margin: 0 auto;
}
.echartDiv100 {
  width: 100%;
  height: 70%;
  margin: 0 auto;
}
.circle {
  height: 38%;
}
.flex-around 
{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  // border: 1px solid red;
}
</style>
