<template>
    <Module class="flex-grow" style="width: 100%" :loading="loading" :error="error">
        <!-- :info="bsMeta && bsMeta['emplRate']" -->
        <template #title>通行费收入及收费总车流量</template>
        <template #end>
            <span class="end-date">{{ showDate }}</span>
            <!-- <Switcher :options="options" v-model="isCurrentYear" /> -->
        </template>
        <template v-if="!loading">
            <div class="topTags">
                <div class="topTags-item">
                    <p>收入指标</p>
                    <b>{{ planData.budget || 0 }}</b>
                    <span>万元</span>
                </div>
                <div class="topTags-item">
                    <p>清分收入</p>
                    <b>{{ planData.qingfenAmount || 0 }}</b>
                    <span>万元</span>
                </div>
                <div class="topTags-item">
                    <p>完成占比</p>
                    <b>{{ planData.amountRate || 0 }}</b>
                    <span>%</span>
                </div>
            </div>
            <Ect :options="ectOpts" class="qingfen-canvas" />
            <!-- <Empty v-else /> -->
        </template>
    </Module>
</template>
<script>
import { qingfenNext, yearFlowNext, palnRate } from "@/api/tollManage";
import { qingfenAmount } from "@/api/chargeInfo";
import { formatThousandMoney } from "@/utils/util";
import { mapState } from "vuex";
import moment from "moment";
import * as echarts from "echarts";
export default {
    computed: {
        ...mapState({
            appDate: (state) => state.appDate,
            selectLevel: (state) => state.road.selectLevel,
            selectRoadId: (state) => state.road.selectRoadId,
        }),

        showDate() {
            return this.isCurrentYear
                ? moment(this.appDate).format("yyyy")
                : moment(this.appDate).format("yyyy") - 1;
        },
        showMonth() {
            return moment(this.appDate).format('MM')
        }
    },
    data() {
        return {
            ectOpts: {},
            error: "",
            loading: false,
            options: [
                { name: "去年", value: false },
                { name: "本年", value: true },
            ],
            isCurrentYear: true,
            dataset_qingfen: [],
            dataset_flow: [],
            planData: {},
        };
    },
    async created() {
        this.getAllData();
    },
    watch: {
        isCurrentYear() {
            this.getAllData();
        },
        selectRoadId() {
            this.getAllData();
        },
        appDate(newValue) {
            this.getAllData();

        }
    },
    mounted() { },
    methods: {
        async getAllData() {
            let res_qingfen, res_flow, res_plan;
            res_qingfen = await qingfenNext({
                level: this.selectLevel,
                dimension: this.selectRoadId[this.selectLevel - 1],
                timeflag: this.showDate,
            });

            res_flow = await yearFlowNext({
                level: this.selectLevel,
                dimension: this.selectRoadId[this.selectLevel - 1],
                year: this.showDate,
            });
            res_plan = await qingfenAmount({
                level: this.selectLevel,
                dimension: this.selectRoadId[this.selectLevel - 1],
                timeflag: this.showDate,
                timemode: 'year'
            });

            this.dataset_qingfen = res_qingfen.msgContent;
            this.dataset_flow = res_flow.msgContent;
            this.planData = res_plan.msgContent[0] || {}
            this.getData();
        },
        getData() {
            let dataAxis = this.dataset_flow.map(res => res.orgName)
            const xAxisItemWidth = dataAxis.length
                ? document.querySelector('.qingfen-canvas').clientWidth * 0.8 / dataAxis.length
                : 0
            this.ectOpts = {
                grid: {
                    top: 66,
                },
                tooltip: {
                    show: true,
                },
                dataset: [
                    {
                        dimensions: ["orgName", "qingfenAmount"],
                        source: this.dataset_qingfen || [],
                    },
                    {
                        dimensions: ["orgName", "flowCount"],
                        source: this.dataset_flow || [],
                    },
                ],
                legend: {
                    top: 36,
                    textStyle: {
                        fontSize: 11, //字体大小
                        color: "#CBE7FF", //字体颜色
                    },
                    left: "center",
                    borderRadius: 0,
                    itemWidth: 17,
                    itemHeight: 8,
                },
                xAxis: {
                    type: "category",
                    axisLabel: {
                        inside: false,
                        color: "#fff",
                        interval: 0,
                        formatter: function (value) {
                            const left = 12 * value.length - xAxisItemWidth
                            if (left > 0) {
                                return value.substr(0, Math.ceil(xAxisItemWidth / 12) - 2) + "..."
                            }
                            return value
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    z: 10,
                    data: dataAxis,
                },
                yAxis: [
                    {
                        name: "清分收入(万元)",
                        type: "value",
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#909FAC",
                            interval: 0,
                        },
                        nameTextStyle: {
                            color: "#909FAC",
                            fontSize: 12,
                            fontWeight: "bold",
                        },
                        position: "left",
                        min: 0,
                        scale: true,
                    },
                    {
                        scale: true,
                        name: "车流量(万辆)",
                        type: "value",
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#909FAC",
                            },
                        },
                        nameTextStyle: {
                            color: "#909FAC",
                            fontSize: 12,
                            fontWeight: "bold",
                        },
                        position: "right",
                        min: 0,


                    },
                ],
                series: [
                    {
                        name: "清分收入",
                        datasetIndex: 0,
                        type: "bar",
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: "#3CAEFF" },
                                { offset: 1, color: "#0F2A40" },
                            ]),
                        },
                        barWidth: "6",
                        emphasis: {
                            focus: "series",
                        },
                        yAxisIndex: 0,
                        label: {
                            show: true,
                            position: 'top',
                            color: '#fff'
                        },
                    },
                    {
                        name: "车流量",
                        datasetIndex: 1,
                        type: "line",
                        smooth: 0.6,
                        cursor: "pointer",
                        symbol: "emptyCircle",
                        lineStyle: {
                            color: "#00E3FF",
                        },
                        itemStyle: {
                            width: 2,
                            borderColor: "#00E3FF",
                            color: "#fff",
                        },
                        markLine: {
                            symbol: ["emptyCircle", "emptyCircle"],
                            label: { show: true },
                        },
                        label: {
                            show: false,
                        },
                        legendHoverLink: true,
                        emphasis: {
                            focus: "series",
                        },
                        yAxisIndex: 1
                    },
                ],
            };
        },
        dateMonthToEnglish(date) {
            let year = date.substring(0, 4);
            let month = date.substring(4, 6);
            if (!month || !year) return;
            let monthToEnglish = new Date(`${year}-${month}`)
                .toDateString()
                .split(" ")[1];
            return monthToEnglish;
        },
    },
};
</script>
<style lang="postcss" scoped>
.topTags {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.topTags-item {
    background-image: url("../../assets/images/baseStruct/plan.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 30px;
    padding: 0 6px;
}

.topTags-item p {
    font-size: 6px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #b1dfff;
}

.topTags-item b {
    margin-left: 10px;
    margin-right: 6px;
    font-family: DIN;
    font-weight: 600;
    color: #ffffff;
}

.topTags-item span {
    font-size: 6px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #b1dfff;
}

.jcsstj-outline {
    margin-bottom: 8px;
}

.jcsstj-num {
    width: 20px;
    height: 24px;
    font-size: 13px;
    font-weight: bold;
    color: #badeff;
    text-align: center;
    line-height: 24px;
    font-style: oblique;
    margin-right: 10px;
    padding-right: 2px;
}

.jcsstj-num-top {
    color: #ff9a00;
    background: url("@/assets/images/jcsstj-top-num.png");
    background-size: 100% 100%;
}

.jcsstj-text {
    font-size: 14px;
    color: #909fac;
    width: 90px;
}

.jcsstj-blout {
    width: calc(100% - 180px);
    height: 14px;
    padding: 3px;
    border: 1px solid rgba(0, 132, 251, 0.25);
    background: rgba(0, 132, 251, 0.1);
    position: relative;
}

.jcsstj-blout-top {
    border: 1px solid rgba(255, 154, 0, 0.15);
    background: rgba(255, 154, 0, 0.1);
}

.jcsstj-bl {
    height: 6px;
    background: #0084fb;
    background: linear-gradient(to right, #0084fb, #00cbff);
}

.jcsstj-bl-top {
    background: #ff9a00;
    background: linear-gradient(to right, #ff9a00, #ffd697);
}

.jcsstj-cont {
    font-size: 16px;
    color: #ffdaa5;
    width: 50px;
    margin-left: 10px;
}

.bl-hightlinght {
    position: absolute;
    width: 5px;
    height: 14px;
    top: 0;
    left: 100%;
    margin-left: -3px;
    background: #97eaff;
    box-shadow: #0085f8 0px 0px 10px;
}

.bl-hightlinght-top {
    background: #fff1dc;
    box-shadow: #ff9a00 0px 0px 10px;
}
</style>
