<template>
  <div class="page" v-if="userName == 'admin'">
    <div class="left">
      <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>
    <div class="rights">
      <div class="check_li">
        <span>时间：</span>
        <el-select
          v-model="data"
          filterable
          placeholder="请选择排序时间"
          clearable
          @change="changetime"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <span>类型：</span>
        <el-select
          v-model="type"
          filterable
          placeholder="请选择排序类型"
          clearable
          @change="changetype"
        >
          <el-option
            v-for="item in optionss"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="li">
        <div class="li_txt"  style="width: 34%;justify-content: flex-start;">运营区</div>
        <div class="li_txt">订单金额</div>
        <div class="li_txt">订单数</div>
        <div class="li_txt">进行中的订单</div>
      </div>
      <div class="li" v-for="(item, index) in leaderboardList" :key="index">
        <div class="li_txt" style="width: 34%;justify-content: flex-start;">
         
          <div class="paim" >
            {{ index + 1 }}
          </div>
          {{ item.areaName }}
        </div>
        <div class="li_txt">
          {{ item.orderFee }}
        </div>
        <div class="li_txt">
          {{ item.orderCount }}
        </div>
        <div class="li_txt">
          {{ item.inProgressOrderCount }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAdminStatistics, getleaderboard } from "@/api/system/area";
import * as echarts from "echarts";
export default {
  name: "Index",
  data() {
    return {
      StatisticsInfo: {},
      userName: undefined,
      chartInstance: null,
      data: "1",
      options: [
        {
          value: "1",
          label: "今天",
        },
        {
          value: "2",
          label: "本周",
        },
      ],
      optionss: [
        {
          value: "1",
          label: "订单数",
        },
        {
          value: "2",
          label: "订单金额",
        },

        {
          value: "3",
          label: "进行中的订单",
        },
      ],
      type: "2",
      leaderboardList: [],
    };
  },
  created() {},
  mounted() {
    this.userName = this.$store.state.user.name;
    this.AdminStatistics();
    window.addEventListener("resize", this.handleResize);
    this.getlibord();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    changetype(value) {
      this.getlibord();
      console.log("点击了", value);
    },
    changetime(value) {
      this.getlibord();
      console.log("点击了", value);
    },
    AdminStatistics() {
      getAdminStatistics().then((response) => {
        this.StatisticsInfo = response.data;
        this.StatisticsInfo.incomeVoList.reverse();
        setTimeout(() => {
          this.drawLine();
        }, 1000);

        console.log("areaOptions", this.areaOptions);
      });
    },
    getlibord() {
      getleaderboard(this.type, this.data).then((response) => {
        this.leaderboardList = response.data;
        // 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-wrap: nowrap;
  flex-direction: row;
  .rights {
    width: 27%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #fff;
    align-content: flex-start;
    flex-direction: row;

    .check_li {
      padding: 0 1rem;
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      height: 3rem;
      span {
        width: 3.5rem;
        font-size: 0.8rem;
      }
    }

    .li {
      margin-top: 0.5rem;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-around;
      width: 90%;
      height: 2.5rem;
      background: #fff;
      // box-shadow: 0px 10px 64px 0px rgba(0, 0, 0, 0.08);
      border-radius: 10%;

      .li_txt {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        // text-align: center;
        justify-content: center;
        width: 22%;
        font-size: 0.8rem;
        img {
          width: 37px;
          height: 23.6px;
        }
        .paim {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 37px;
          height: 37px;
          border-radius: 50%;
          //  background-color: #ccc;
        }
      }
    }
  }
  .left {
    width: 72%;
    .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: 1rem;
                color: #1d252f;
                z-index: 1;
              }

              .num {
                margin-top: 1.08rem;
                margin-bottom: 0.44rem;
                font-weight: 500;
                font-size: 1.5rem;
                color: #1d252f;
                z-index: 1;
              }

              .txt1 {
                font-size: 1rem;
                color: #1d252f;
                line-height: 1.58rem;
                z-index: 1;
              }

              img {
                position: absolute;
                right: 1.75rem;
                top: 1.42rem;
                width: 3.5rem;
                height: 3.5rem;
                z-index: 0;
              }
            }
          }
        }

        .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;
                  z-index: -1;
                }

                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: center;
                width: 100%;
                font-weight: 500;
                font-size: 1rem;
                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;
      width: 100%;
      .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,
        .num,
        .txt1 {
          font-weight: 500;
          position: relative; // 确保文字相对于父容器定位
          z-index: 10; // 确保文字在图片上方
          color: #1d252f;
        }

        .txt {
          font-size: 1rem;
        }

        .num {
          margin-top: 1.08rem;
          margin-bottom: 0.44rem;
          font-size: 1.5rem;
        }

        .txt1 {
          font-size: 1rem;
          line-height: 1.58rem;
        }

        img {
          position: absolute;
          right: 1.25rem;
          top: 1.42rem;
          width: 3.5rem;
          height: 3.5rem;
          z-index: 0; // 确保图片在文字下方
        }
      }

      .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>
