<template>
  <div class="dashboard-editor-container">
    <el-row>
      <el-col :span="12">
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
          <div style="display: flex;align-items: center;">
            <img src="@/assets/images/waterIcon.png" style="width: 60px;height: 60px;">
            <div style="font-size: 24px;font-weight: 600;">
              智慧用水
            </div>
          </div>
          <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding:0 20px;">
            <div style="width: 50%;display: flex;align-items: center;font-size: 18px;">
              <div style="margin-right: 10px;">日用水量</div>
              <count-to :start-val="0" :end-val="8.56" :duration="2000" class="card-panel-num" />
              <div style="margin-left: 10px;">m³</div>
            </div>
            <div style="width: 50%;display: flex;align-items: center;">
              <div style="margin-right: 10px;">累计用水量</div>
              <count-to :start-val="0" :end-val="168.41" :duration="2000" class="card-panel-num" />
              <div style="margin-left: 10px;">m³</div>
            </div>
          </div>
        </div>
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">近期用水量对比</div> 
          </div>
          <div id="lineChartOne" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
        </div>
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">月度用水量对比</div> 
          </div>
          <div id="lineChartTwo" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
        </div>
      </el-col>
      <el-col :span="12">
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
          <div style="display: flex;align-items: center;">
            <img src="@/assets/images/waterIcon.png" style="width: 60px;height: 60px;">
            <div style="font-size: 24px;font-weight: 600;">
              智慧用电
            </div>
          </div>
          <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding:0 20px;">
            <div style="width: 50%;display: flex;align-items: center;font-size: 18px;">
              <div style="margin-right: 10px;">日用电量</div>
              <count-to :start-val="0" :end-val="34.3" :duration="2000" class="card-panel-num" />
              <div style="margin-left: 10px;">KW</div>
            </div>
            <div style="width: 50%;display: flex;align-items: center;">
              <div style="margin-right: 10px;">累计用电量</div>
              <count-to :start-val="0" :end-val="248.4" :duration="2000" class="card-panel-num" />
              <div style="margin-left: 10px;">KW</div>
            </div>
          </div>
        </div>
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">近期用电量对比</div> 
          </div>
          <div id="lineChartThree" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
        </div>
        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> 
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">月度用电量对比</div> 
          </div>
          <div id="lineChartFour" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>  
        </div>
      </el-col>
    </el-row> 


  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import * as echarts from 'echarts' 
import {  getDataScreeningModelApi,
          getCanteenOrdersAndSalesTrendsApi,
          getSupermarketOrderAndSalesTrendApi,
          getThisMonthSDishSalesRankingApi,
          getProportionOfOrderTypesApi 
        } from "@/api/index";  
export default { 
  name: 'Index',
  components: {
    CountTo
  },
  data() {
    return {
      topAreaOptions:[
        {
          "num": 0,
          "rate": "0.00",
          "name": "今日食堂营业额（元）",
          "lastDate": "2025-05-15"
        },{
          "num": 0,
          "rate": "0.00",
          "name": "今日食堂订单量（个）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.00",
          "name": "今日就餐人数（个）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.00",
          "name": "今日菜品数量（个）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.0",
          "name": "今日超市营业额（元）",
          "lastDate": "2025-05-15"
        },
        {
          "num": 0,
          "rate": "0.0",
          "name": "今日超市订单量（个）",
          "lastDate": "2025-05-15"
        }
      ],   
      
      myCharts1:null,
      myCharts2:null,
      myCharts3:null,
      myCharts4:null,
    }
  },
  mounted(){
    // this.getTopData()
    this.InitEChartsOne()
    this.InitEChartsTwo()
    this.InitEChartsThree()
    this.InitEChartsFour()
    window.addEventListener('transitionend', this.$_sidebarResizeHandler) 
  },
  methods: {
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        console.log(e)
        setTimeout(() => {
          this.myCharts1.resize();
          this.myCharts2.resize();
          this.myCharts3.resize();
          this.myCharts4.resize();
        }, 500);
      }
    },
    getTopData(){ 
      getDataScreeningModelApi({}).then((response) => {
          this.topAreaOptions = response.data.data; 
      }); 
    }, 
    InitEChartsOne() {
      let chartData=[]
      let weekDate=['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
      let monthDate = []
      let xDate = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
      let salesData = [6.8,7.5,6,7.4,6.9,2.2,1.8]
      let orderData = [6.4,7.1,6.8,7.1,7.5,1.5,2]  
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["本周", "上周"],
          icon:"rect",
          bottom: "0%",
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "20%",
          bottom: "10%",
          containLabel: true,
        },
        color: ["#4FA7FF", "#58F5CE"], 
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xDate,
          },
        ],
        yAxis: {
          name: "本周/上周",
          type: "value",
        },
        series: [
          {
            name: "本周",
            type: "line",
            areaStyle: {
              normal: {
                type: "default",
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(79, 167, 255, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(79, 167, 255, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            smooth: true,
            itemStyle: {
              normal: { areaStyle: { type: "default" } },
            },
            data: salesData,
          },
          {
            name: "上周",
            type: "line",
            areaStyle: {
              normal: {
                type: "default",
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(92, 255, 214, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(92, 255, 214, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            smooth: true,
            itemStyle: { normal: { areaStyle: { type: "default" } } },
            data: orderData,
          },
        ],
      };
      this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
      this.myCharts1.setOption(option)    
    }, 
    InitEChartsTwo() {
      let chartData=[] 
      let monthDate = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
      let xDate = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
      let salesData = [47,43,48,42,44,45,42,46,47,48,50,51]
      // let orderData = [0,0,0,0,0,0,0,0,0,0,0,0]   
      var option = {
        // title: {
        //   text: "食品经营情况", 
        // },
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["本周", "上周"],
        //   icon:"rect",
        //   bottom: "0%",
        // },
        grid: {
          left: "5%",
          right: "5%",
          top: "20%",
          bottom: "10%",
          containLabel: true,
        },
        color: ["#4FA7FF"], 
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xDate,
          },
        ],
        yAxis: {
          name: "用水",
          type: "value",
        },
        series: [
          {
            name: "用水",
            type: "line",
            areaStyle: {
              normal: {
                type: "default",
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(79, 167, 255, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(79, 167, 255, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            smooth: true,
            itemStyle: {
              normal: { areaStyle: { type: "default" } },
            },
            data: salesData,
          }
        ],
      };
      this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
      this.myCharts2.setOption(option)    
    },
    InitEChartsThree() {  
      let chartData=[]
      let weekDate=['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
      let monthDate = []
      let xDate = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
      let salesData = [31,33,36,32,38,16,18]
      let orderData = [30,34,36,32,36,15,14]  
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["本周", "上周"],
          icon:"rect",
          bottom: "0%",
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "20%",
          bottom: "10%",
          containLabel: true,
        },
        color: ["#4FA7FF", "#58F5CE"], 
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xDate,
          },
        ],
        yAxis: {
          name: "本周/上周",
          type: "value",
        },
        series: [
          {
            name: "本周",
            type: "line",
            areaStyle: {
              normal: {
                type: "default",
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(79, 167, 255, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(79, 167, 255, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            smooth: true,
            itemStyle: {
              normal: { areaStyle: { type: "default" } },
            },
            data: salesData,
          },
          {
            name: "上周",
            type: "line",
            areaStyle: {
              normal: {
                type: "default",
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(92, 255, 214, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(92, 255, 214, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            smooth: true,
            itemStyle: { normal: { areaStyle: { type: "default" } } },
            data: orderData,
          },
        ],
      };
      this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
      this.myCharts3.setOption(option)  
      // // 根据页面大小自动响应图表大小
      // window.addEventListener("resize3", function () {
      //     myCharts3.resize();
      // }); 
    },
    InitEChartsFour() {
      let chartData=[] 
      let monthDate = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
      let xDate = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
      let orderData = [175,180,182,174,176,189,196,189,175,178,174,178] 
       var option = {
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["用电"],
        //   icon:"rect",
        //   bottom: "0%",
        // },
        grid: {
          left: "5%",
          right: "5%",
          top: "20%",
          bottom: "10%",
          containLabel: true,
        },
        color: ["#58F5CE"], 
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xDate,
          },
        ],
        yAxis: {
          name: "用电",
          type: "value",
        },
        series: [
          {
            name: "用电",
            type: "line",
            areaStyle: {
              normal: {
                type: "default",
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(92, 255, 214, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(92, 255, 214, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            smooth: true,
            itemStyle: { normal: { areaStyle: { type: "default" } } },
            data: orderData,
          },
        ],
      };
      this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'));
      this.myCharts4.setOption(option)  
      // 根据页面大小自动响应图表大小
      // window.addEventListener("resize4", function () {
      //     myCharts4.resize();
      // });
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 15px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.card-panel-num {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000;
}
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
