<template>
  <div ref="homePage" class="page">
    <!-- <el-button 
          type="primary" 
          plain 
          icon="Plus" 
          @click="testsx()">测试失效</el-button> -->
      
    <el-row :gutter="20" class="mgb20">

      <!--运营商-->
      <el-col :span="4">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{background:'#409EFF'}">
              <component is="Promotion" />
            </el-icon>
            <div class="grid-msg-right" style="border: none;" @click="toRout('/vehicle/operator')">
              <div class="grid-msg-num" :style="{ color: '#409EFF'}">
                {{ operatotal }}
              </div>
              <div style="font-size: 16px;">运营商</div>
            </div>
          </div>
        </div>
      </el-col>

      <!--换电站-->
      <el-col :span="6">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{background:'#28b3a1'}">
              <component is="Flag" />
            </el-icon>
            <div class="grid-msg-right" @click="toRout('/swapstation/hdz')">
              <div class="grid-msg-num" :style="{ color: '#28b3a1'}">
                {{ hdztotal }}
              </div>
              <div style="font-size: 16px;">换电站</div>
            </div>
            <div class="grid-msg-right" style="border: none;" @click="toRout('/swapstation/hdz',{status: 1})">
              <div class="grid-msg-num" :style="{ color: '#b5a210'}">
                {{ kyhdz }}
              </div>
              <div style="font-size: 16px;">可用换电站</div>
            </div>
          </div>
        </div>
      </el-col>

      <!--电池总量-->
      <el-col :span="7">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{background:'#67C23A'}">
              <component is="SuccessFilled" />
            </el-icon>
            <div class="grid-msg-right" @click="toRout('/vehicle/company')">
              <div class="grid-msg-num" :style="{ color: '#67C23A'}">
                {{ rzcompany }}
              </div>
              <div style="font-size: 16px;">认证公司</div>
            </div>
            <div class="grid-msg-right" @click="toRout('/vehicle/wxuser')">
              <div class="grid-msg-num" :style="{ color: '#bc92c9'}">
                {{ rzuser }}
              </div>
              <div style="font-size: 16px;">认证用户</div>
            </div>
            <div class="grid-msg-right" style="border: none;" @click="toRout('/vehicle/car')">
              <div class="grid-msg-num" :style="{ color: '#3aaec2'}">
                {{ rzvehicle }}
              </div>
              <div style="font-size: 16px;">认证车辆</div>
            </div>
          </div>
        </div>
      </el-col>

      <!--机器人数量-->
      <el-col :span="7">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{background:'#E6A23C'}">
              <component is="BellFilled" />
            </el-icon>
            <div class="grid-msg-right" @click="toRout('swapstation/robot')">
              <div class="grid-msg-num" :style="{ color: '#E6A23C'}">
                {{ robottotal }}
              </div>
              <div style="font-size: 16px;">机器人总数</div>
            </div>
            <div class="grid-msg-right" style="border: none;" @click="toRout('swapstation/robot')">
              <div class="grid-msg-num" :style="{ color: '#34a312'}">
                {{ kyrobot }}
              </div>
              <div style="font-size: 16px;">可用机器人</div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- <el-col v-for="(item, index) in messageList" :key="index" :span="messageList.length -1 == index?4:5">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{ background: item.color }">
              <component :is="item.icon" />
            </el-icon>
            <div class="grid-msg-right">
              <div class="grid-msg-num" :style="{ color: item.color }">
                {{ item.count }}
              </div>
              <div style="font-size: 16px;">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </el-col> -->

    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <div style="width: 100%;height: 150px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div style="display: flex;justify-content: space-between;cursor:pointer;">
            <div style="width:31%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff;" @click="toRout('/swapstation/battery')">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #409eff;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">电池总量</div>
              <div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #409eff;">{{ dctotal }}</div>
            </div>
            <div style="width:31%;height: 150px;text-align: center;background: #fff;" @click="toRout('')">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #67c23a;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电电池</div>
              <div style="height: 55px;line-height: 100px;font-size: 40px;font-weight: bold;color: #67c23a;">{{cddctotal}}</div>
            </div>
            <div style="width:31%;height: 150px;border-radius: 0 10px 10px 0;text-align: center;background: #fff;" @click="toRout('/swapstation/battery')">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #e6a23c;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">可用电池</div>
              <div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #e6a23c;">{{kydctotal}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="width: 100%;height: 150px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div style="display: flex;justify-content: space-between;">
            <div style="width:31%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #409eff;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">换电订单数</div>
              <div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #409eff;">{{totalOrder}}</div>
            </div>
            <div style="width:31%;height: 150px;border-radius: 10px 0 0 10px;text-align: center;background: #fff; cursor: pointer;" @click="toRout('/order/replabatt')">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #bc92c9;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">待支付订单数</div>
              <div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #bc92c9;">{{dzfOrder}}</div>
            </div>
      
            <div style="width:31%;height: 150px;border-radius: 0 10px 10px 0;text-align: center;background: #fff;">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #e6a23c;border-bottom: 3px solid #ebf5ff;border-radius: 20px 20px 0 0;">收入金额{{totalmoney > 10000000?'（万元）':'（元）'}}</div>
              <div style="height: 100px;line-height: 100px;font-size: 40px;font-weight: bold;color: #e6a23c;">
                {{ totalmoney }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mgb20">
      <el-col :span="9">
        <div ref="refChart4" class="chart-cont2" style="padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
      </el-col>
      <el-col :span="15">
        <div ref="refChart5" class="chart-cont2" style="padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
      </el-col>
    </el-row>
    <el-row >
      <el-col :span="24">
        <div style="width: 100%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <el-table 
            :data="alarmlist"
            border
            stripe
            height="260px"
          >
              <el-table-column label="站点名称" min-width="200" align="center" prop="stationName" :show-overflow-tooltip="true" />
              <el-table-column label="报警类型" min-width="200" align="center" prop="alarmType" :show-overflow-tooltip="true" />
              <el-table-column label="报警时间" min-width="200" align="center" prop="alarmTime" :show-overflow-tooltip="true" />
              
            </el-table>
        </div>
        
          
      </el-col>
      
    </el-row>
  </div>
</template>
<script lang="ts" setup name="homePage">
import { 
  nextTick, 
  onMounted, 
  ref,
  onBeforeUnmount,
  watch
} from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from "echarts"
import { useElementSize } from "@vueuse/core"
import { 
  ptgetotal,
  zbjetotal,
  givealarm
} from '@/api/home'

function glnum(n:any){
  if(n>10000000){
    return Math.round((n/1000000)*100)/100
  }
  return n/100
}


let router = useRouter()
function toRout(path:string,query:Record<string, any> = {}) {
  router.push({
    path,
    query
  })
}

//运营商总数
let operatotal = ref('')
//换电站总数
let hdztotal = ref('')
//可用换电站
let kyhdz = ref('')

//电池总量
let dctotal = ref('')
//充电电池
let cddctotal = ref('')
//可用电池
let kydctotal = ref('')

//机器人总数
let robottotal = ref('')
//可用机器人
let kyrobot = ref('')

//认证公司
let rzcompany = ref('')
//认证用户
let rzuser = ref('')
//认证车辆
let rzvehicle = ref('')

//同比
let tbList = ref<any>([])

//查询运营商 换电站 电池 机器人
ptgetotal().then(rps => {
  operatotal.value = (rps.data as any).proxyNum
  hdztotal.value = (rps.data as any).totalStation
  kyhdz.value = (rps.data as any).workStation
  dctotal.value = (rps.data as any).totalDC
  cddctotal.value = (rps.data as any).chargeDC
  kydctotal.value = (rps.data as any).availableDC
  robottotal.value = (rps.data as any).totalRobot
  kyrobot.value = (rps.data as any).availableRobot

  rzcompany.value = (rps.data as any).totalCompanyNum
  rzuser.value = (rps.data as any).totalUserNum
  rzvehicle.value = (rps.data as any).totalCarNum

})

//告警信息
let alarmlist = ref<any>([])
givealarm().then((rps:any) => {
  if(rps.data && rps.data.length > 0){
    alarmlist.value = rps.data
  }
})

//查询 公司 用户 车辆
// getgyctotal().then(rps => {
//   rzcompany.value = (rps.data as any).conpany
//   rzuser.value = (rps.data as any).totalUser
//   rzvehicle.value = (rps.data as any).totalCar
// })


const messageList = ref([
  {
    type: "mytask",
    name: "运营商",
    count: 0,
    color: "#409EFF",
    icon: "Promotion",
    linkUrl: "/workbench/workflow/task/myProcess",
  },
  {
    type: "todo",
    name: "换电站",
    count: 55,
    color: "#409EFF",
    icon: "Flag",
    linkUrl: "/workbench/workflow/task/todo",
  },
  {
    type: "done",
    name: "电池总量",
    count: 0,
    color: "#67C23A",
    icon: "SuccessFilled",
    linkUrl: "/workbench/workflow/task/done",
  },
  {
    type: "conclude",
    name: "充电电池数量",
    count: 0,
    color: "#67C23A",
    icon: "Checked",
    linkUrl: "/workbench/workflow/task/done",
  },
  {
    type: "message",
    name: "机器人数量",
    count: 0,
    color: "#E6A23C",
    icon: "BellFilled",
    linkUrl: "#",
  },
  // {
  //   type: "warninng",
  //   name: "预警信息",
  //   count: 0,
  //   color: "#F56C6C",
  //   icon: "WarningFilled",
  //   linkUrl: "#",
  // },
]);


// 图标4
const refChart4 = ref();
let myChart4: echarts.EChartsType;
const initChart4 = () => {
  if (refChart4.value) {
    //初始化echarts实例
    myChart4 = echarts.init(refChart4.value);
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '运营商订单占比',
        left: 'center',
        textStyle: {
            color: '#2363a5',
            fontSize: 16
        }
      },
      // grid: {
      //   left: '3%',
      //   top:'20%',
      //   right: '4%',
      //   bottom: '3%',
      //   containLabel: true
      // },
      label: {
          show: true, // 显示标签
          formatter: '{b}({d}%)' // 使用 formatter 来格式化标签，其中 {b} 是名称，{d} 是百分比，{@2019} 是对应年份的数据值（如果需要的话）
      },
      tooltip: {
        trigger: "item",
      },
      // legend: {
      //   type: "scroll",
      //   orient: "horizontal",
      //   left: "center",
      //   bottom: 0,
      // },
      series: [
        {
          name: "数量",
          type: "pie",
          top:'10%',
          radius: ['40%','70%'],
          data: bzdata.value,
          padAngle: 2,
          emphasis: {
            itemStyle: {
              paddingTop:'20px',
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },
          },
          itemStyle:{
            borderRadius: 3
          }
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart4.setOption(option);
  }
};

// 图标5
const refChart5 = ref();
let myChart5: echarts.EChartsType;
const initChart5 = () => {
  if (refChart5.value) {
    //初始化echarts实例
    myChart5 = echarts.init(refChart5.value);
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: "换电站近半年订单统计",
        left: "center",
        textStyle: {
            color: '#2363a5',
            fontSize: 16
        }
      },
      grid: {
        left: '3%',
        top:'25%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      // toolbox: {
      //   feature: {
      //     dataView: { title: "数据视图", show: true, readOnly: false },
      //     magicType: {
      //       title: { line: "折线图", bar: "柱状图" },
      //       show: true,
      //       type: ["line", "bar"],
      //     },
      //     restore: { title: "刷新", show: true },
      //     saveAsImage: { title: "下载", show: true },
      //   },
      // },
      legend: {
        data: [ "订单", "金额"],
        top:25
      //bottom: 0,
      },
      xAxis: [
        {
          type: "category",
          data:xdata.value, //["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "订单",
          // min: 0,
          // max: 50,
          // interval: 50,
          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          type: "value",
          name: "金额",
          // min: 0,
          // max: 50,
          // interval: 50,
          axisLabel: {
            formatter: "{value} 元",
          }
        },
      ],
      series: [
        {
          name: "订单",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: string) {
              return value;
            },
          },
          data:yOrder.value, //[80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          yAxisIndex:0
        },
        {
          name: "金额",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: string) {
              return value + " 元";
            },
          },
          data:yMoney.value, //[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
          yAxisIndex:1
        },
        // {
        //   name: "金额",
        //   type: "line",
        //   tooltip: {
        //     valueFormatter: function (value: string) {
        //       return value + " 元";
        //     },
        //   },
        //   data:yMoney.value //[5.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        // },
        // {
        //   name: "换电量",
        //   type: "line",
        //   tooltip: {
        //     valueFormatter: function (value: string) {
        //       return value + " ml";
        //     },
        //   },
        //   data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        // }
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart5.setOption(option);
  }
};



//重新渲染图表
const resizeChart = () => {
  // 折叠板延迟时间
  setTimeout(() => {
    myChart4?.resize()
    myChart5?.resize()
    //myChart6?.resize()
  }, 400);
};

// 监听页面大小变化
const homePage = ref();
const { width: pageWidth } = useElementSize(homePage);
watch(pageWidth, () => {
  resizeChart();
});

//订单总数
let totalOrder = ref('')
let dzfOrder = ref('')

//收入金额
let jyamount = ref<any>('')
let totalmoney = ref<any>('')
//支出金额
let zcamount = ref<any>('')
let totalRefund = ref<any>('')
//换电站订单占比统计
let bzdata = ref<any>([])

//6个月订单统计
let xdata = ref<any>([])
let yMoney = ref<any>([])
let yOrder = ref<any>([])

// 初始化渲染
onMounted(() => {
  nextTick(() => {

    zbjetotal().then(rps => {
      totalOrder.value = (rps.data as any).totalOrderNum	    //订单总数
      totalmoney.value = (rps.data as any).totalFinishAmount  //完成金额(总金额)
      totalmoney.value = glnum(totalmoney.value)
      dzfOrder.value = (rps.data as any).totalPendingOrderNum

      bzdata.value = (rps.data as any).countList.map((n:any) => {
        return {
          name:n.proxyName,
          value:n.quantity
        }
      })
     

      initChart4()

      xdata.value = (rps.data as any).trendList.map((n:any) => {
          return n.month
        })

        yOrder.value = (rps.data as any).trendList.map((n:any) => {
          return n.quantity
        })

        yMoney.value = (rps.data as any).trendList.map((n:any) => {
          return n.totalMoney/100
        }) 

        initChart5()
    })
  })
})

//销毁
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart)
})

// defineExpose无需导入，直接使用
// defineExpose({ value });
</script>

<style lang="less" scoped>
@message-width: 80px;

.page {
  padding-bottom: 20px;
}

.grid-message {
  display: flex;
  align-items: center;
  height: @message-width;
  cursor: pointer;
}

.grid-msg-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
  border-right:1px solid #ccc;
}

.grid-msg-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-msg-icon {
  font-size: 50px;
  width: @message-width;
  height: @message-width;
  text-align: center;
  line-height: @message-width;
  color: #fff;
}

.chart-cont {
  height: 140px;

  > h1 {
    color: #606266;
    font-weight: normal;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
  }

  > p {
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-height: 40px;
  }

  > div {
    height: 60px;
    width: 100%;

    > p {
      margin: 0;
      padding-top: 10px;
      line-height: 20px;
      font-size: 12px;
      color: #909399;
    }
  }
}

.chart-cont2 {
  height: 260px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
