<template>
    <modulen>
        <template #title>门架成功率（当月）</template>
        <div class="gantrySurate-md">
            <div class="gantsur-head">
                <div class="ganhead-a"></div>
                <div class="ganhead-b">名称</div>
                <div class="ganhead-c"></div>
                <div class="ganhead-d">成功率</div>
            </div>
            <div
                class="g-cell-list"
                v-for="(item, index) in dataList"
                :key="index"
            >
                <div
                    class="g-cell-left-icon"
                    :class="
                        index % 2 == 0
                            ? 'g-cell-left-icon1'
                            : 'g-cell-left-icon2'
                    "
                ></div>
                <div
                    class="g-cell-rig"
                    :style="{
                        background:
                            index % 2 == 0 ? 'rgba(73, 153, 255, 0.2)' : 'none',
                    }"
                >
                    <div class="g-cell-text1">{{ item.name }}</div>
                    <div class="g-cell-text2">
                        <div class="proline-bg">
                            <div
                                class="proline"
                                :style="{
                                    width: item.value ? `${item.value}%` : 0,
                                }"
                            ></div>
                            <div
                                class="prolin-icon"
                                :style="{
                                    left: item.value ? `${item.value}%` : 0,
                                }"
                            ></div>
                        </div>
                    </div>
                    <div class="g-cell-text3">
                        {{ item.value ? item.value : 0 }}%
                    </div>
                </div>
            </div>
        </div>
    </modulen>
</template>

<script>
import { gateSuccessRate } from "@/api/chargeInfo.js";
import moment from "moment";
export default {
    data() {
        return {
            dataList: [
                {
                    name: "ETC车牌识别准确率",
                    value: "",
                },
                {
                    name: "CPC车牌识别准确率",
                    value: "",
                },
                {
                    name: "OBU标签交易成功率",
                    value: "",
                },
                {
                    name: "用户卡交易成功率",
                    value: "",
                },
                {
                    name: "CPC交易成功率",
                    value: "",
                },
            ],
            query: {
                timeflag: moment(new Date()).format("yyyyMM"),
                level: "0",
                dimension: localStorage.getItem("sousuId") || "",
            },
        };
    },
    computed: {
        getAppDate() {
            return moment(this.$store.state.appDate).format("yyyyMM");
        },
        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: {
        async getData() {
            this.query.timeflag =
                moment(this.getAppDate).subtract("year").format("YYYY") +
                moment(this.getAppDate).subtract("month").format("MM");
            const RateData = await gateSuccessRate(this.query);
            const cont = RateData.msgContent;
            // console.log('门架成功率',RateData)
            // console.log(97,cont)
            // platereco_success, '车牌识别准确数量',
            // platereco_count, '车牌识别数量',
            // platereco_success_rate, '车牌识别准确率',
            // obu_trade_success, 'OBU标签交易成功数量',
            // obu_trade_count, 'OBU标签交易数量',
            // obu_trade_success_rate, 'OBU标签交易成功率',
            // card_trade_success, '用户卡交易成功数量',
            // card_trade_count, '用户卡交易数量',
            // card_trade_success_rate, '用户卡交易成功率',
            // cpc_trade_success, 'CPC交易成功数量',
            // cpc_trade_count, 'CPC交易数量',
            // cpc_trade_success_rate 'CPC交易成功率'
            // etc_platereco_success_rate, 'ETC车牌识别准确率',
            // cpc_platereco_success_rate, 'CPC车牌识别准确率',
            if (RateData.msgContent.length !== 0) {
                this.dataList[0].value = (
                    cont[0].etcPlaterecoSuccessRate * 100
                ).toFixed(2);
                this.dataList[1].value = (
                    cont[0].cpcPlaterecoSuccessRate * 100
                ).toFixed(2);
                this.dataList[2].value = (
                    cont[0].obuTradeSuccessRate * 100
                ).toFixed(2);
                this.dataList[3].value = (
                    cont[0].cardTradeSuccessRate * 100
                ).toFixed(2);
                this.dataList[4].value = (
                    cont[0].cpcTradeSuccessRate * 100
                ).toFixed(2);
            } else {
                this.dataList[0].value = 0;
                this.dataList[1].value = 0;
                this.dataList[2].value = 0;
                this.dataList[3].value = 0;
                this.dataList[4].value = 0;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.gantrySurate-md {
  width: 100%;
  height: 100%;
  padding-top: 4px;
  .gantsur-head,
  .g-cell-list {
    width: 100%;
    display: flex;
    align-items: center;
    height: vh(39);
    line-height: vh(28);
    box-sizing: border-box;
    padding: vh(5) 0;
  }
  .g-cell-list {
    padding: vh(5) vw(11);
  }
  .ganhead-a {
    width: 70px;
  }
  .ganhead-b {
    width: 150px;
    color: #909fac;
  }
  .ganhead-c {
    width: calc(100% - 280px);
  }
  .ganhead-d {
    width: 80px;
    color: #909fac;
  }
  .g-cell-left-icon {
    width: 20px;
    height: 20px;
    margin-left: 20px;
    margin-right: 10px;
  }
  .g-cell-left-icon1 {
    background: url("@/assets/images/ChargeInfo/ganstu-icon1.png");
    background-size: 100% 100%;
  }
  .g-cell-left-icon2 {
    background: url("@/assets/images/ChargeInfo/ganstu-icon2.png");
    background-size: 100% 100%;
  }
  .g-cell-rig {
    width: calc(100% - 50px);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
  }
  .g-cell-text1 {
    width: 150px;
  }
  .g-cell-text2 {
    width: calc(100% - 220px);
  }
  .g-cell-text3 {
    padding-left: 20px;
    width: 70px;
    font-family: "DinNextRegular";
  }
  .proline-bg {
    width: 100%;
    height: vh(7);
    background: #0b5374;
    position: relative;
  }
  .proline {
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, #0057c7, #6df4ff);
  }
  .prolin-icon {
    width: 20px;
    height: 20px;
    border-radius: 15px;
    border: 1px solid #00e3ff;
    background: rgba(0, 227, 255, 0.3);
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -10px;
  }
  .prolin-icon::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 8px;
    background: #cefaff;
    position: absolute;
    left: 4px;
    top: 4px;
  }
}
</style>