<template>
  <div class="page" v-if="userName == 'admin'">
    <div class="info_li">
      <div class="card1">
        <div class="txt">运营商数</div>
        <div class="num">{{StatisticsInfo.operatorCount }}</div>
        <div class="txt1">独立小程序：{{StatisticsInfo.appCount }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/uZdZtiQN8BGMcSEamOmj" alt="">
      </div>
      <div class="card1" style="background: linear-gradient( 270deg, #A6A6E7 0%, rgba(166,166,231,0.44) 100%);">
        <div class="txt">商户总余额</div>
        <div class="num">{{StatisticsInfo.totalBalance }}</div>
        <div class="txt1">已提现金额：{{ StatisticsInfo.withdrawn }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/uy7fzOouY8czRqSuh76D" alt=""
          style="width: 6.42rem;height: 7rem;">
      </div>
      <div class="card1" style="background: linear-gradient( 270deg, #64B6A7 0%, rgba(100,182,167,0.44) 100%);">
        <div class="txt">运营区数</div>
        <div class="num">{{StatisticsInfo.areaCount }}</div>
        <div class="txt1">已提现金额：{{StatisticsInfo.otalOrderCount }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/uErTaNSlejRXjjzHAdym" alt="">
      </div>
      <div class="card1" style="background: linear-gradient( 270deg, #60ADFD 0%, rgba(148,198,250,0.5) 100%), #FFFFFF;">
        <div class="txt">车辆总数</div>
        <div class="num">{{StatisticsInfo.vehicleVo.allNum }}</div>
        <div class="txt1">车辆型号：{{StatisticsInfo.modelCount }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/uTBhrhUajBERKs81lJSe" alt=""
          style="width: 7.33rem;height: 6.08rem;">
      </div>
      <div class="card1"
        style="background: linear-gradient( 270deg, #FFB2B2 0%, rgba(255,178,178,0.36) 100%), #FFFFFF;">
        <div class="txt">用户总数</div>
        <div class="num">{{StatisticsInfo.userCount }}</div>
        <div class="txt1">今日新增：{{StatisticsInfo.todayUserCount }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/uyqanVA0Qi2ZWg0cNmwg" alt=""
          style="width: 7.33rem;height: 7.42rem;">
      </div>
    </div>
    <div class="info_li" style="margin-top: 1.25rem;">
      <div class="card2">
        <div class="txt">今日订单数</div>
        <div class="num">{{StatisticsInfo.todayOrderCount }}</div>
        <div class="txt1">总订单数：{{StatisticsInfo.totalOrderCount }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN" alt="">
      </div>
      <div class="card2">
        <div class="txt">今日订单金额</div>
        <div class="num">{{StatisticsInfo.todayOrderFee }}</div>
        <div class="txt1">订单总金额：{{StatisticsInfo.totalOrderFee }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W" alt="">
      </div>
      <div class="card2">
        <div class="txt">今日退款金额</div>
        <div class="num">{{StatisticsInfo.todayRefundFee }}</div>
        <div class="txt1">总退款金额：{{StatisticsInfo.totalRefundFee }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/uwJ6enKaUs6qMMXC7xEt" alt="">
      </div>
      <div class="card2">
        <div class="txt">待付款订单金额</div>
        <div class="num">{{StatisticsInfo.unpaidOrderFee }}</div>
        <div class="txt1">待付款订单数：{{StatisticsInfo.unpaidOrderCount }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/un9hBy1mNXjAsRnrSt14" alt="">
      </div>
      <div class="card2">
        <div class="txt">待审核还车押金扣款</div>
        <div class="num">{{StatisticsInfo.returnOrderDeductFee }}</div>
        <div class="txt1">还车待审核订单数:{{StatisticsInfo.returnOrderCount }}</div>
        <img src="https://lxnapi.ccttiot.com/bike/img/static/uBV6yOFFWUvTValGnmfw" alt="">
      </div>
    </div>
    <div class="cont_box">
      <div class="echart_box">
        <div class="tit"> 营收统计</div>
        <div class="echarts_cont">
          <div id="myChart" style="width: 100%;height: 100%;"></div>
        </div>
      </div>
      <div class="right_box">
        <div class="right_box_top">
          <div class="info_li">
            <div class="card2">
              <div class="txt">今日支付手续费</div>
              <div class="num">{{StatisticsInfo.todayHandlingFee }}</div>
              <div class="txt1">总支付手续费：{{StatisticsInfo.totalHandlingFee }}</div>
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN" alt="">
            </div>
            <div class="card2">
              <div class="txt">今日服务费</div>
              <div class="num">{{StatisticsInfo.todayServiceFee }}</div>
              <div class="txt1">总服务费：{{StatisticsInfo.totalServiceFee }}</div>
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W" alt="">
            </div>

          </div>
        </div>
        <div class="car_info_box">
          <div class="tit">车辆统计</div>

          <div class="info_li">
            <div class="info_cont">
              <div class="info_cont_top">
                <img src="https://lxnapi.ccttiot.com/bike/img/static/uUSztvtXXdRtxHzQVWgH" alt="">投放中（辆）
              </div>
              <div class="info_cont_txt">
                {{ StatisticsInfo.vehicleVo.inOperation }}
              </div>
            </div>
            <div class="info_cont">
              <div class="info_cont_top">
                <img src="https://lxnapi.ccttiot.com/bike/img/static/uUAe2gRT4blxwsIKs0id" alt="">骑行中（辆）
              </div>
              <div class="info_cont_txt">
                {{ StatisticsInfo.vehicleVo.ridingNum }}
              </div>
            </div>
            <div class="info_cont">
              <div class="info_cont_top">
                <img src="https://lxnapi.ccttiot.com/bike/img/static/uAoVo6LxxZ4PthTHZtiH" alt="">仓库中（辆）
              </div>
              <div class="info_cont_txt">
                {{ StatisticsInfo.vehicleVo.inStashNum }}
              </div>
            </div>
          </div>
          <div class="info_li">
            <div class="info_cont">
              <div class="info_cont_top">
                <img src="https://lxnapi.ccttiot.com/bike/img/static/uxx6Ajx0ne7Ho6LH8Bfg" alt="">禁用中（辆）
              </div>
              <div class="info_cont_txt">
                {{ StatisticsInfo.vehicleVo.disabledNum }}
              </div>
            </div>
            <div class="info_cont">
              <div class="info_cont_top">
                <img src="https://lxnapi.ccttiot.com/bike/img/static/uUgJO8VOMNI48H7ab5yU" alt="">调度中（辆）
              </div>
              <div class="info_cont_txt">
                {{ StatisticsInfo.vehicleVo.dispatchNum }}
              </div>
            </div>
            <div class="info_cont">
              <div class="info_cont_top">
                <img src="https://lxnapi.ccttiot.com/bike/img/static/uAKVUuosyqvFJx5Ynjbp" alt="">离线（辆）
              </div>
              <div class="info_cont_txt">
                {{ StatisticsInfo.vehicleVo.offlineNum }}
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
    <div class="bot_box">
      <div class="tit">运维状态</div>
      <div class="cont_box">

        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU" alt="">4g解锁失败
          </div>
          <div class="cont_li_bot">
            {{ StatisticsInfo.operationVo.failedUnlockCount }}
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv" alt="">蓝牙解锁数
          </div>
          <div class="cont_li_bot">
            {{ StatisticsInfo.operationVo.bluetoothUnlockCount}}
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE" alt="">设备离线率
          </div>
          <div class="cont_li_bot">
            {{ StatisticsInfo.operationVo.deviceOfflineRate }}%
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU" alt="">异常排查车辆
          </div>
          <div class="cont_li_bot">
            {{ StatisticsInfo.operationVo.faultOrderCount }}
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv" alt="">待换电
          </div>
          <div class="cont_li_bot">
            {{ StatisticsInfo.operationVo.replacementOrderCount }}
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE" alt="">待维修
          </div>
          <div class="cont_li_bot">
            {{ StatisticsInfo.operationVo.repairCount }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { getAdminStatistics } from '@/api/system/area'
import * as echarts from 'echarts';
export default {
  name: "Index",
  data() {
    return {
      StatisticsInfo: {},
      userName: undefined,
      chartInstance:null
    };
  },
  created() {

  },
  mounted() {
    this.userName = this.$store.state.user.name;
    this.AdminStatistics();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    AdminStatistics() {
      getAdminStatistics().then(response => {
        this.StatisticsInfo = response.data;
        this.StatisticsInfo.incomeVoList.reverse();
        setTimeout(() => {
          this.drawLine()
        }, 1000);

        console.log("areaOptions", this.areaOptions);
      });
    },
    drawLine() {
      this.chartInstance  = echarts.init(document.getElementById("myChart"));
      // 设置图表的配置项和数据
      this.chartInstance.setOption({
        grid: {
          left: 60,
          right: 50,
          top: 10,
          bottom: 20,
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['订单金额', '订单']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.StatisticsInfo.incomeVoList.map(item => item.day)
        },
        yAxis: [
          {
            type: 'value',
            name: '订单金额',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#5470C6'
              }
            },
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '订单',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#91CC75'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '订单金额',
            type: 'line',
            data: this.StatisticsInfo.incomeVoList.map(item => item.orderFee),
            yAxisIndex: 0,
            itemStyle: {
              color: '#5470C6'
            },
            smooth: true
          },
          {
            name: '订单',
            type: 'line',
            data: this.StatisticsInfo.incomeVoList.map(item => item.orderNum),
            yAxisIndex: 1,
            itemStyle: {
              color: '#91CC75'
            },
            smooth: true
          }
        ]
      });
    }
  }
};
</script>

<style scoped lang="scss">
.page {
  padding: 1.92rem;
  background: #F7F8FA;
  width: 100%;
  // height: 100vh;
  display: flex;
  flex-direction: column;

  .cont_box {
    width: 100%;
    margin-top: 1.33rem;
    display: flex;
    flex-wrap: nowrap;

    .echart_box {
      padding: 1.08rem;
      margin-right: 1.17rem;
      width: 59%;
      height: 31.83rem;
      background: #FFFFFF;
      border-radius: 0rem 0rem 0rem 0rem;

      .echarts_cont {
        width: 100%;
        height: 27.17rem;
        /* 可以设置为百分比或视口单位 */
      }

      .tit {
        font-weight: 500;
        font-size: 1.33rem;
        color: #1D252F;
      }
    }

    .right_box {
      display: flex;
      width: 39%;
      flex-wrap: wrap;

      .right_box_top {
        width: 100%;

        .info_li {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          // justify-content: space-between;
          height: 10.42rem;

          .card2:last-child {
            margin-right: 0;
          }

          .card2 {
            margin-right: 3%;
            padding: 1.42rem 1.75rem 1.33rem;
            position: relative;
            width: 49%;
            height: 10.42rem;
            background: #fff;
            border-radius: 0rem 0rem 0rem 0rem;

            .txt {
              font-weight: 500;
              font-size: 1.33rem;
              color: #1D252F;
            }

            .num {
              margin-top: 1.08rem;
              margin-bottom: 0.44rem;
              font-weight: 500;
              font-size: 2rem;
              color: #1D252F;
            }

            .txt1 {
              font-size: 1.17rem;
              color: #1D252F;
              line-height: 1.58rem;
            }

            img {
              position: absolute;
              right: 2.75rem;
              top: 1.42rem;
              width: 4.5rem;
              height: 4.5rem;
            }
          }



        }
      }

      .car_info_box {
        margin-top: 1.17rem;
        padding: 0.75rem 1.67rem;
        width: 100%;
        height: 20.25rem;
        background: #FFFFFF;
        border-radius: 0rem 0rem 0rem 0rem;

        .tit {
          font-weight: 500;
          font-size: 1.33rem;
          color: #1D252F;
        }

        .info_li {
          margin-top: 1.25rem;
          display: flex;
          flex-wrap: nowrap;
          width: 100%;
          height: 40%;
          .info_cont {
            width: 33%;

            .info_cont_top {
              img {
                width: 1.33rem;
                height: 1.33rem;
                margin-right: 0.58rem;
              }

              display: flex;
              flex-wrap: nowrap;
              justify-content: center;
              align-items: center;
              width: 100%;
              font-weight: 500;
              font-size: 1.33rem;
              color: #757575;
            }

            .info_cont_txt {
              margin-top: 0.33rem;
              width: 100%;
              text-align: center;
              font-weight: 500;
              font-size: 2rem;
              color: #3D3D3D;
            }
          }
        }
      }
    }

  }

  .bot_box {
    margin-bottom: 2rem;
    padding: 1.08rem;
    margin-top: 1.33rem;
    width: 100%;
    height: 12.42rem;
    background: #FFFFFF;
    border-radius: 0rem 0rem 0rem 0rem;

    .tit {
      width: 100%;
      font-weight: 500;
      font-size: 1.33rem;
      color: #1D252F;
    }

    .cont_box {
      width: 100%;
      height: 5.67rem;

      .cont_li {
        width: 16.6%;
        height: 5.67rem;
        border-right: 1px solid #D8D8D8;

        .cont_li_top {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;

          img {
            margin-right: 0.83rem;
            width: 1.29rem;
            height: 1.13rem;
          }

          font-weight: 700;
          font-size: 1.33rem;
          color: #3D3D3D;

        }

        .cont_li_bot {
          margin-top: 1.17rem;
          width: 100%;
          text-align: center;
          font-weight: 500;
          font-size: 1.67rem;
          color: #3D3D3D;
        }

      }
    }
  }

  .info_li {
    display: flex;
    flex-wrap: nowrap;
    // justify-content: space-between;
    height: 10.42rem;

    .card2 {
      margin-right: 1%;
      padding: 1.42rem 1.75rem 1.33rem;
      position: relative;
      width: 20%;
      height: 10.42rem;
      background: #fff;
      border-radius: 0rem 0rem 0rem 0rem;

      .txt {
        font-weight: 500;
        font-size: 1.33rem;
        color: #1D252F;
      }

      .num {
        margin-top: 1.08rem;
        margin-bottom: 0.44rem;
        font-weight: 500;
        font-size: 2rem;
        color: #1D252F;
      }

      .txt1 {
        font-size: 1.17rem;
        color: #1D252F;
        line-height: 1.58rem;
      }

      img {
        position: absolute;
        right: 2.75rem;
        top: 1.42rem;
        width: 4.5rem;
        height: 4.5rem;
      }
    }

    .card1 {
      margin-right: 1%;
      padding: 1.42rem 1.75rem 1.33rem;
      position: relative;
      width: 20%;
      height: 10.42rem;
      background: linear-gradient(270deg, #60ADFD 0%, rgba(148, 198, 250, 0.5) 100%);
      border-radius: 0rem 0rem 0rem 0rem;

      .txt {
        font-weight: 500;
        font-size: 1.33rem;
        color: #FFFFFF;
      }

      .num {
        margin-top: 1.08rem;
        margin-bottom: 0.44rem;
        font-weight: 500;
        font-size: 2rem;
        color: #FFFFFF;
      }

      .txt1 {
        font-size: 1.17rem;
        color: #FFFFFF;
        line-height: 1.58rem;
      }

      img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 7rem;
        height: 7.25rem;
      }
    }

  }
}
</style>
