<template>
    <Module
        class="flex-grow"
        :info="bsMeta && bsMeta['emplCalc']"
        :loading="loading"
        :error="error"
    >
        <template #title>人员统计</template>
        <div
            class="absolute inset-0 flex flex-col employee-box"
            v-if="employeeData?.length > 0"
        >
            <div class="chart-box flex flex-grow">
                <div class="rytj-box-left">
                    <Ect class="ect" :options="ectOpts" />
                </div>
                <div class="rytj-box-rig">
                    <div
                        v-for="(item, index) in employeeData"
                        :key="index"
                        class="rbj-item"
                        :style="{ left: item.left + 'px' }"
                    >
                        <img :src="icons.value[index]" />
                        <div class="rbj-item-text">
                            <div class="rbj-item-name">{{ item.prgName }}</div>
                            <div class="rbj-item-value">
                                {{ formatThousand(item.accval) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Empty v-else-if="!loading" />
        <div class="lengd-box">
            <div class="leng-item">
                <div style="background: #0084fc"></div>
                在编员工
            </div>
            <div class="leng-item">
                <div style="background: #00cbd7"></div>
                项目聘用
            </div>
            <div class="leng-item">
                <div style="background: #ff9a00"></div>
                劳务外包
            </div>
            <!-- <div class="leng-item">
        <div style="background: #5E5EFF"></div>股东委派
      </div> -->
        </div>
        <!-- 图例 -->
    </Module>
</template>

<script lang="ts" setup>
import { computed, watch, reactive } from "vue";
import { useStore } from "vuex";
import { key } from "@/store";
import { useRequest } from "vue-request";
import { formatThousand, formatYearMonth } from "@/utils/util";
import icon1 from "@/assets/images/tollEmployee/rytj-glry.png";
import icon2 from "@/assets/images/tollEmployee/rytj-glywyg.png";
import icon3 from "@/assets/images/tollEmployee/rytj-fwqywyg.png";
import icon4 from "@/assets/images/tollEmployee/rytj-qzywyg.png";
import icon5 from "@/assets/images/tollEmployee/rytj-qtywyg.png";
import { staffEmplyModeCount } from "@/api/businessOverview";

const icons = reactive({
    value: [icon1, icon2, icon3, icon4, icon5],
    // colors: ['#00CBD7', '#FF9A00', '#0084FC', '#5E5EFF', '#46A7FF'],
    colors: ["#0084fc", "#00cbd7", "#ff9a00", "#5e5eff", "#46A7FF"],
});

const store = useStore(key);
const bsMeta = computed(() => store.getters.bsMeta);

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

const { data, refresh } = useRequest<any>(() =>
    staffEmplyModeCount({
        level: selectLevel.value,
        dimension: selectRoadId.value[selectLevel.value - 1],
    })
);
watch(params, refresh);

const employeeData = computed(() => {
    const msg = data.value?.msgContent[0];

    return [
        {
            prgName: "在编员工",
            left: 0,
            accval: msg?.onPayrollCount == null ? 0 : msg?.onPayrollCount,
        },
        {
            prgName: "项目聘用",
            left: 20,
            accval: msg?.employCount == null ? 0 : msg?.employCount,
        },
        {
            prgName: "劳务外包",
            // top:20,
            left: 40,
            accval: msg?.outsourceCount == null ? 0 : msg?.outsourceCount,
        },
        // {
        //     prgName: "股东委派",
        //     // top:60,
        //     left: 0,
        //     accval: msg?.delegateCount == null ? 0 : msg?.delegateCount,
        // },
        // {
        //   prgName: "劳务派遣",
        //   left: 0,
        //   accval: 0,
        // },
    ];
});

const sum = computed(() =>
    employeeData.value
        ?.map((e: any) => Number(e.accval))
        ?.reduce((a: number, b: number) => a + b)
);

const rateList = computed(() => {
    return employeeData.value?.map((e) => {
        return {
            ...e,
            rate: getRate(e.accval),
        };
    });
});
const getRate = (val: number | string) =>
    Math.round((Number(val) * 1000) / sum.value) / 10;

const ectOpts = computed(() => {
    const source = employeeData.value;
    // 最终输出数据
    var result = [];
    // 颜色
    // var color = ['#00CBD7', '#FF9A00', '#0084FC', '#5E5EFF', '#46A7FF']
    var color = ["#0084fc", "#00cbd7", "#FF9A00", "#5e5eff", "#46A7FF"];

    // 循环加入间隔数据
    for (var i = 0; i < source.length; i++) {
        if ((sum.value && source[i].accval) || !sum.value) {
            let i_color = "#000";
            if (source[i].prgName == "在编员工") {
                i_color = "#0084FC";
            } else if (source[i].prgName == "项目聘用") {
                i_color = "#00cbd7";
            } else if (source[i].prgName == "劳务外包") {
                i_color = "#FF9A00";
            } else if (source[i].prgName == "股东委派") {
                i_color = "#5E5EFF";
            } else {
                i_color = "#46A7FF";
            }
            result.push({
                name: source[i].prgName,
                value: source[i].accval,
                itemStyle: {
                    normal: {
                        color: i_color,
                        shadowBlur: 5,
                        shadowColor: color[i],
                        borderRadius: 10,
                        borderColor: "#030E15",
                        borderWidth: 2,
                    },
                },
            });
        }
    }

    var options = {
        title: {
            text: sum.value + "\n总人数",
            top: "40%",
            textAlign: "center",
            left: "47%",
            textStyle: {
                color: "#fff",
                fontSize: 20,
                fontWeight: "400",
            },
        },
        tooltip: {
            trigger: "item",
            formatter: "{b} : <br/>{d}%",
            //formatter: "{b} : {d}% <br/> {c}"
        },
        series: [
            {
                type: "pie",
                radius: ["50%", "60%"], //内 外圆半径
                center: ["50%", "50%"],
                minAngle: 5,
                color: color, // 色块填充颜色
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        borderColor: "#030E15",
                        borderWidth: 5,
                    },
                },
                data: result,
            },
        ], // series end
    };
    return options;
});
</script>

<style lang="postcss" scoped>
.lengd-box {
    position: absolute;
    left: 8%;
    bottom: 0;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.leng-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #f5f5f5;
}
.leng-item div {
    width: 20px;
    height: 5px;
    background: #0084fc;
    margin-right: 5px;
}
.employee-box {
    overflow: hidden;
}
.chart-box {
    width: 100%;
    height: 100%;
}
.rytj-box-left {
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
}
.rytj-box-rig {
    width: 50%;
    position: relative;
}
.rbj-item {
    height: 20%;
    display: flex;
    padding-top: 5px;
    position: relative;
    margin-top: 10px;
}
.rbj-item img {
    width: auto;
    height: 70%;
}
.rbj-item-text {
    margin-left: 5px;
}
.rbj-item-name {
    font-size: 12px;
    color: #d5d7d9;
}
.rbj-item-value {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
}
.icon {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.3);
}
</style>
