<template>
    <Module>
        <template #title>运营里程{{ getTotal }}(km) </template>
        <div class="malc-box">
            <!-- <div class="mdhead">
                <span>运营里程(km):</span>
                <span class="macl-rig">{{ getTotal }}</span>
            </div> -->
            <div v-for="(item, index) in dataList" :key="index" class="mdlc-cont">
                <el-tooltip placement="right-end">
                    <template #content>
                        <div class="mb-2">{{ item.name }}</div>
                        <div v-if="item.yy">运营：{{ item.yy }}</div>
                        <div>控股：{{ item.kg }}</div>
                        <div>参股：{{ item.cg }}</div>
                    </template>
                    <div>
                        <div class="malc-tit whitespace-nowrap">
                            <span>{{ item.name || '其他' }}</span>
                            <span v-if="item.yy">（运营里程：{{ item.yy }}km）</span>
                        </div>
                        <div class="malc-line">

                            <div class="malc-left malc-left2"></div>
                            <div v-if="item.width" class="malc-center malc-center2" :style="`width:${item.width}`">
                                <div class="malc-center-in malc-center-in2"></div>
                            </div>
                            <div class="macl-rig">{{ item.value }}</div>
                        </div>
                    </div>
                </el-tooltip>
            </div>
        </div>
    </Module>
</template>
<script lang="ts" setup>
import { computed, defineProps, watch } from "vue";
import { useRouter } from "vue-router";
import { useRequest } from "vue-request";
import { useStore } from "vuex";
import { comInfo } from "@/store/state";
import { key } from "@/store";
import { useGradient } from "@/utils/color";
import { getMngSectionLen, mngSectionLenChild } from "@/api/businessOverview";

/*const geoCoordMap: any = {
  甬台温高速: [120.699879, 27.930926],
  桂林公司: [110.308324, 25.374422],
  贵黄公司: [106.544594, 26.579682],
  重庆公司: [106.552688, 29.582314],
  九瑞高速: [115.894544, 29.624725],
  鄂东大桥: [115.078523, 30.264948],
  宁波交通科技: [121.793249, 29.896431],
  亳阜高速: [115.875878, 33.832651],
  京津塘高速: [116.58485, 39.75525],
  招商中铁: [108.376098, 22.82454],
}*/

const geoCoordMap: any = {
    中铁建昆仑投资集团: [104.065633, 30.547988],
    // 建新公司: [106.40309,29.80243],
    // 双合公司: [106.403243,29.802354],
    // 遂渝公司: [106.519111,29.620469],
};
const store = useStore(key);
const router = useRouter();
const activeCom = computed(() => store.state.activeCom);
const bsMeta = computed(() => store.getters.bsMeta);

const activeCenter = computed(() => {
    let name: any = "";
    if (activeCom.value === "list") {
        return [117.98561551896913, 31.205000490896193];
    }
    let item = comInfo.find((e) => e.code === activeCom.value);
    name = item?.name;
    return geoCoordMap[name];
});

const selectLevel = computed(() => store.state.road?.selectLevel);
const selectRoadId = computed(() => store.state.road?.selectRoadId);
const params = computed(() => selectLevel.value + "&" + selectRoadId.value);


const { data, loading, error, refresh } = useRequest<any>(() =>
    mngSectionLenChild(
        selectLevel.value,
        selectRoadId.value[selectLevel.value - 1]
    )
);



watch(params, () => {
    refresh();
});

const getTotal = computed(() => {
    return data.value?.msgContent.reduce((cur, pre) => {
        return (cur += Math.round(pre.mngSectionLen));
    }, 0) || 0;
});


const dataList = computed(() => {
    const total = getTotal.value;

    return data.value?.msgContent
        ?.sort((a: any, b: any) => b.mil - a.mil)
        .map(
            (
                { mngSectionLen, orgCode, orgName, kongguLen, quanziLen, canguLen, ...e }: any,
                index,
                list
            ) => {
                console.log(333, mngSectionLen, list)
                let name = orgName
                // if (orgCode === '201') {
                //     name += '（运营里程：114.15km）'
                // } else if (orgCode === '401') {
                //     name += '（运营里程：109km）'
                // }
                const kg = (kongguLen || 0) + (quanziLen || 0);
                const cg = canguLen || 0;
                // let yy
                // if (orgCode === '201') {
                //     yy = 114.15
                // } else if (orgCode === '401') {
                //     yy = 109
                // }
                return {
                    name,
                    orgCode,
                    value: Math.round(mngSectionLen),
                    width: (60 * mngSectionLen * list.length) / total + "%",
                    kg: Math.round(kg),
                    cg: Math.round(cg),
                    //   yy,
                    kgWidth: !kg ? 0 : (60 * kg * list.length) / total + "%",
                    cgWidth: !cg ? 0 : (60 * cg * list.length) / total + "%",
                    ...e,
                };
            }
        );
});






</script>

<style lang="postcss" scoped>
.area_popper {
    background-color: #3d513f !important;
    border-radius: 6px !important;
    opacity: 0.9 !important;
    font-size: 12px !important;
    color: #ffffff !important;
    padding: 0 !important;
    transform: translateY(12px);
}

.popper__arrow::after {
    border-top-color: #3d513e !important;
}

.malc-box {
    width: 100%;
    height: 100%;
}

.mdhead {
    font-size: 13px;
    font-weight: bold;
    font-style: oblique;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.macl-outbox {
    width: 100%;
    height: 100%;
    position: relative;
}

.mdlc-cont {
    width: 100%;
}

.malc-tit {
    font-size: 14px;
    padding-left: 10px;
}

.malc-line {
    @apply flex items-center;
}

.malc-left {
    width: 5px;
    height: 12px;
    background: #ff9a00;
    margin-right: 5px;
}

.malc-center {
    width: 50%;
    height: 12px;
    padding: 3px;
    /* border: 1px solid red; */
    border: 1px solid rgba(174, 146, 107, 0.35);
    background: rgba(255, 154, 0, 0.1);
}

.malc-center-in {
    height: 4px;
    background: #ff9a00;
    background: linear-gradient(to right, transparent, rgba(255, 154, 0, 1));
    width: 100%;
}

.malc-left2 {
    background: #0084fb;
    margin-right: 5px;
}

.malc-center2 {
    /* border: 1px solid red; */
    border: 1px solid rgba(0, 132, 251, 0.25);
    background: rgba(0, 132, 251, 0.1);
}

.malc-center-in2 {
    background: linear-gradient(to right, transparent, rgba(0, 132, 251, 1));
}

.macl-rig {
    font-size: 16px;
    margin-left: 10px;
}

.macl-mapbg {
    width: 600px;
    height: 420px;
    background: url("@/assets/images/map.png");
    background-size: 100% 100%;
    margin: auto;
}
</style>