<template>
  <modulen>
    <template #title>当日客货对比及支付方式</template>
    <div class="dayPay-md">
      <div class="day-pay-head">
        <div class="tj-left">
          <div>
            <span class="head-icon"></span>
            <span class="head-text">客货对比</span>
          </div>
          <!-- <div>
            <span class="head-text">其他车辆：</span>
            <span>{{ khData.qtclbl }}%</span>
          </div> -->
        </div>
        <div class="tj-left">
          <div>
            <span class="head-icon" style="background: #6df4ff"></span>
            <span class="head-text">支付方式</span>
          </div>
          <!-- <div>
            <span class="head-text">单位:万元</span>
          </div> -->
        </div>
      </div>
      <div class="day-pay-cont">
        <div class="dpcont-left">
          <div class="dpcont-left-top">
            <div class="dpcont-left-zb">
              <div class="dplzb-text1">客车占比</div>
              <div class="dplzb-text-bg dplzb-text-bg1">
                <div class="dplzb-text2">
                  {{ khData.kcbl }}<sapn style="font-size: 14px">%</sapn>
                </div>
                <div class="dplzb-text3">
                  客车流量（辆）<br /><span>{{
                    formatThousand(khData.kcll)
                  }}</span>
                </div>
                <!-- <div class="dplzb-text3">客车流量（辆）</div>
              <div class="dplzb-text4">{{ formatThousand(khData.kcll) }}</div> -->
              </div>
            </div>
            <div class="dpcont-left-zb">
              <div class="dplzb-text1">货车占比</div>
              <div class="dplzb-text-bg dplzb-text-bg2">
                <div class="dplzb-text2">
                  {{ khData.hcbl }}<sapn style="font-size: 14px">%</sapn>
                </div>
                <div class="dplzb-text3">
                  货车流量（辆）<br /><span>{{
                    formatThousand(khData.hcll)
                  }}</span>
                </div>
                <!-- <div class="dplzb-text3">货车流量（辆）</div>
              <div class="dplzb-text4">{{ formatThousand(khData.hcll) }}</div> -->
              </div>
            </div>
          </div>
          <div class="dpcont-left-bot">
            <span class="dplzb-text1"
              >其他车辆占比：<span class="dplzb-text1-1">{{
                khData.qtclbl
              }}</span
              >%</span
            >
            <span class="dplzb-text4"
              >{{ khData.qtclll }}<span class="dplzb-text4-1">辆</span></span
            >
          </div>
        </div>
        <div class="dpcont-rig">
          <div class="chartspie">
            <Ect :options="ectOpts" :default="ect_default" />
          </div>
          <div class="mt-2">
            <span class="head-text">单位:万元</span>
          </div>
          <div class="legn-bot mt-1">
            <!-- <div class="legn-bot-zf">
              <div class="legn-bot-text1">
                <span class="legn-icon-b" style="background: #6df4ff"></span>
                <span>现金</span>
              </div>
              <div class="legn-bot-text2" style="color: #6df4ff">
                {{ xjcont }}
              </div>
            </div> -->
            <div
              v-for="(item, index) in fxjlist"
              :key="index"
              class="legn-bot-zf"
            >
              <div class="legn-bot-text1">
                <span
                  class="legn-icon-b"
                  :style="{ background: colorList[index] }"
                ></span>
                <span>{{ item.payType }}</span>
              </div>
              <div class="legn-bot-text2" :style="{ color: colorList[index] }">
                {{ item.payAmount }}
              </div>
            </div>
            <!-- <div class="legn-bot-zf-rig">
              <div class="lbzr-top">
                <span class="legn-icon-b" style="background: #3dafff"></span>
                <div class="legn-bot-text1">非现金</div>
                <div class="legn-bot-text3" style="color: #3dafff">
                  {{ fxjcont ? fxjcont.toFixed(2) : 0 }}
                </div>
              </div>
              <div class="lbzr-bot">
                <div
                  class="fxj-item"
                  v-for="(item, index) in fxjlist"
                  :key="index"
                >
                  <div class="legn-bot-text1">
                    <span
                      class="legn-icon-s"
                      :style="{ background: colorList[index] }"
                    ></span
                    >{{ item.payType }}
                  </div>
                  <div
                    class="legn-bot-text2"
                    :style="{ color: colorList[index] }"
                  >
                    {{ item.payAmount }}
                  </div>
                </div>
              </div>
            </div> -->
          </div>
          <!-- <div class="legn-rig">
            <div
              class="legenddiv"
              v-for="(item, index) in msgContent"
              :key="index"
            >
              <div class="legend-tit">
                <span
                  class="head-icon"
                  :style="{ background: index === 0 ? '' : '#6df4ff' }"
                ></span>
                <span class="legend-text1">{{ item.category }}</span>
              </div>
              <div
                class="legend-text2"
                :style="{ color: index === 0 ? '#3dafff' : '' }"
              >
                {{ item.count }}
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </modulen>
</template>

<script>
import { formatThousand } from "@/utils/util";
import { truckornot, cashornot } from "@/api/chargeInfo.js";
import moment from "moment";
export default {
  data() {
    return {
      ect_default: 0,
      ectOpts: {},
      msgContent: [],
      opData: [],
      query: {
        day: String(
          moment(new Date()).subtract("year").format("YYYY") +
            moment(new Date()).subtract("month").format("MM") +
            moment(new Date()).subtract(1, "days").format("DD")
        ),
        // day: moment(new Date()).format("YYYYMMDD"),
        level: "0",
        dimension: "",
      },
      khData: {
        kcll: "", //客车流量
        kcbl: "", // 客车比例
        hcll: "", // 货车流量
        hcbl: "", // 货车比例
        qtclbl: "", // 其他比例
        qtclll: "", //其他车辆流量
      },
      CarMsgContent: [],
      fxjlist: [], // 几个非现金的数据
      xjcont: 0, // 现金总数
      fxjcont: 0, //非现金总数
      colorList: ["#6df4ff", "#fff", "#FF7556", "#3E76E6"],
    };
  },
  computed: {
    getAppDate() {
      return (
        moment(this.$store.state.appDate).subtract("year").format("YYYY") +
        moment(this.$store.state.appDate).subtract("month").format("MM") +
        moment(new Date()).subtract(1, "days").format("DD")
      );
    },
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
  },
  watch: {
    getAppDate(newVal) {
      this.query.day = newVal;
      this.getData();
    },
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel;
      const roadId = newVal ? newVal[level - 1] : "";
      this.query.level = level;
      this.query.dimension = roadId;
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },

  methods: {
    formatThousand,
    async getData() {
      // 获取左上角选择年份，月份，日份为当前日，如果月份为2月，需要特殊处理
      let YYYY = moment(this.$store.state.appDate)
        .subtract("year")
        .format("YYYY");
      let MMDD =
        moment(this.$store.state.appDate).subtract("month").format("MM") +
        moment(new Date()).subtract("days").format("DD");
      //  MMDD等于0229，0230，0231 的时候日份+28   结果等于0228
      if (["0229", "0230", "0231"].includes(MMDD)) {
        YYYY = moment(this.$store.state.appDate)
          .subtract("year")
          .format("YYYY");
        MMDD =
          moment(this.$store.state.appDate).subtract("month").format("MM") +
          "28";
      }
      // MMDD不等于0229，0230，0231 的时候日份 等于当前日
      //  if(["0229","0230","0231"].indexOf(MMDD)!==-1){
      //     YYYY=moment(this.$store.state.appDate).subtract("year").format("YYYY")
      //     MMDD = moment(this.$store.state.appDate).subtract( "month").format("MM")+moment(new Date()).subtract("days").format("DD")
      //  }
      let yyyymmdd = YYYY + MMDD;
      this.query.day = yyyymmdd;
      this.ect_default = 0;
      try {
        // 客货对比
        const data = await truckornot(this.query);
        this.khData.kcll = data.msgContent[1]?.flowCount;
        this.khData.kcbl = data.msgContent[1]?.flowCountPer
          ? (data.msgContent[1].flowCountPer * 100).toFixed(2)
          : "-";
        this.khData.hcll = data.msgContent[0]?.flowCount;
        this.khData.hcbl = data.msgContent[0]?.flowCountPer
          ? (data.msgContent[0].flowCountPer * 100).toFixed(2)
          : "-";
        this.khData.qtclll = data.msgContent[2]?.flowCount;
        this.khData.qtclbl = data.msgContent[2]?.flowCountPer
          ? (data.msgContent[2].flowCountPer * 100).toFixed(2)
          : "-";
      } catch (err) {}

      const { msgContent } = await cashornot(this.query);

      this.msgContent = msgContent;
      this.opData = [];
      this.fxjlist = [];
      this.fxjcont = 0;
      this.xjcont = 0;
      msgContent.forEach((item) => {
        item.payType = item.payType.replace("支付", "");
        this.opData.push({
          name: item.payType || 0,
          value: item.payAmount || 0,
        });
        if (item.payType == "现金") {
          this.xjcont = item.payAmount || 0;
          this.fxjlist.unshift(item);
        } else {
          this.fxjlist.push(item);
          this.fxjcont += item.payAmount || 0;
        }
      });

      this.getCharts();
    },
    getCharts() {
      const total = this.opData.reduce((t, next) => {
        return (t += next.value);
      }, 0);
      // console.log("this.opData", total);
      this.ectOpts = {
        tooltip: {
          show: false,
        },
        color: ["#58D9EE", "#fff", "#E66548", "#3D74FF"],
        series: [
          {
            name: "支付方式",
            type: "pie",
            radius: ["65%", "85%"],
            emphasis: {
              label: {
                show: true,
                formatter: function (val) {
                  return [
                    "{a|" + ((val.data.value * 100) / total).toFixed(1) + "%}",
                    "{b|" + val.data.name + "}",
                  ].join("\n");
                },
                rich: {
                  a: {
                    color: "#fff",
                    lineHeight: 30,
                    fontSize: 22,
                    fontWeight: 800,
                    fontFamily: "DinNextRegular",
                  },
                  b: {
                    color: "#fff",
                    fontSize: 12,
                    height: 20,
                  },
                },
                // fontSize: '40',
                // fontWeight: 'bold'
              },
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#030E15",
              borderWidth: 4,
            },
            data: this.opData,
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

.dayPay-md {
  width: 100%;
  height: 100%;
  .day-pay-head {
    width: 100%;
    height: vh(39);
    border-bottom: 1px solid #10253f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 0 10px;
  }
  .tj-left {
    height: 100%;
    width: 47%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .head-text {
    font-size: vw(12);
    color: #94a8c6;
  }
  .head-icon {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #4999ff;
    margin-right: 10px;
    position: relative;
    top: -2px;
  }
  .day-pay-cont {
    display: flex;
    justify-content: space-between;
  }
  .dpcont-left {
    width: 45%;
    padding: 20px 20px 0 20px;
  }
  .dpcont-left-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  // .dpcont-left-zb {
  //   width: 50%;
  //   padding: 20px 10px 0 20px;
  // }
  .dplzb-text1 {
    flex: 1;
    font-size: vw(12);
    color: #94a8c6;
    // line-height: vw(12)
  }
  .dplzb-text1-1 {
    font-family: "DinNextRegular";
    font-size: vw(18);
    color: #fff;
  }
  .dplzb-text-bg {
    position: relative;
    width: vw(90);
    height: vw(90);
    display: flex;
    align-items: center;
    // margin-top: vh(5);
    background: url("@/assets/images/ChargeInfo/daypay-bg1.png");
    background-size: 100% 100%;
  }
  .dplzb-text-bg:hover .dplzb-text3 {
    display: block;
  }
  .dplzb-text-bg1 {
    background: url("@/assets/images/ChargeInfo/daypay-bg1.png");
    background-size: 100% 100%;
  }
  .dplzb-text-bg2 {
    background: url("@/assets/images/ChargeInfo/daypay-bg2.png");
    background-size: 100% 100%;
  }
  .dplzb-text2 {
    width: 100%;
    text-align: center;
    font-family: "DinNextRegular";
    font-size: vw(18);
  }
  .dplzb-text3 {
    position: absolute;
    left: 0;
    top: -60px;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-family: "DinNextRegular";
    font-size: vw(12);
    background: rgba(31, 83, 120, 0.6);
    display: none;
    span {
      font-size: vw(18);
    }
  }
  .dplzb-text4-1 {
    font-size: vw(12);
  }
  .dplzb-text4 {
    font-family: "DinNextRegular";
    font-size: vw(18);
  }
  .dpcont-left-bot {
    width: 100%;
    height: vh(70);
    // height: 50px;
    margin-top: vh(10);
    padding: 0 12px;
    background: url("@/assets/images/ChargeInfo/daypay-bg3.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .dpcont-rig {
    width: 50%;
    // display: flex;
  }
  .chartstips {
    position: absolute;
    width: vw(70);
    height: vw(70);
    border-radius: vw(90);
    margin-top: vh(76);
    margin-left: vh(26);
    border: 1px solid #1f5378;
    background: rgba(31, 83, 120, 0.3);
  }
  .chartspie {
    margin: auto;
    position: relative;
    width: vw(110);
    height: vw(110);
    // margin-top: vh(50);
  }
  .legend-text1 {
    font-size: vw(12);
    color: #909fac;
  }
  .legend-text2 {
    margin-left: 15px;
    font-size: vw(16);
    font-family: "TRENDS";
    color: #6df4ff;
  }
  .legn-bot {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .legn-bot-zf {
    @apply flex-1 text-center;
    position: relative;
    // top: vh(3);
  }
  .legn-bot-text1 {
    display: flex;
    align-items: center;
    font-size: vw(11);
    color: #94a8c6;
  }
  .legn-icon-b {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 10px;
  }
  .legn-icon-s {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 10px;
  }
  .legn-bot-text2 {
    padding-left: 4px;
    font-family: "DinNextRegular";
    font-size: vw(14);
    margin-top: vh(4);
    color: #909fac;
  }
  .legn-bot-text3 {
    font-family: "DinNextRegular";
    font-size: vw(14);
    margin-left: vw(10);
    position: relative;
    top: vh(-1);
  }
  .lbzr-top {
    display: flex;
    align-items: center;
  }
  .lbzr-bot {
    width: 100%;
    display: flex;
    align-items: center;
    // margin-top: vh(6);
    margin-left: 1px;
  }
  .fxj-item {
    margin-right: vw(10);
  }
  .legn-rig {
    margin-top: vh(30);
    margin-left: vw(20);
    padding: 1px;
  }
  .legenddiv {
    margin-top: vh(25);
  }
}
</style>
