<template>
    <div class="home-container layout-pd">
        <el-row :gutter="15" class="home-card-one mb15">
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"
                    v-for="(v, k) in state.homeOne" :key="k">
                <div class="home-card-item flex">
                    <div class="flex-margin flex w100">
                        <div class="flex-auto">
                            <span class="font30">{{ v.num1 }}</span>
                            <div class="mt10">{{ v.num3 }}</div>
                        </div>
                        <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
                            <i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"
                            ></i>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="15" class="home-card-two mb15">
            <el-col :xs="24" :sm="10" :md="10" :lg="14" :xl="16">
                <div class="home-card-item maxauto">
                    <div class="home-card-item-title">商品房数据</div>
                    <div class="home-monitor">
                        <div class="flex-warp">
                            <div
                                    class="flex-warp-item"
                                    style="height: auto"
                                    v-for="(v, k) in state.homeThree"
                                    :key="k"
                            >
                                <div class="flex-warp-item-box" :class="`home-animation`">
                                    <div class="uconss">
                                        <img src="../../assets/test.svg" alt="" />
                                        <div class="uconsstitle">{{ v.tit }}</div>
                                        <div class="uconsstext">套数:1000套</div>
                                        <div class="uconsstext">面积:11111111m²</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="home-card-item-title">商品房数据</div>
                        <div style="height: 252px; margin-top: 20px" ref="homeLineRef"></div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="8" class="home-media">

                <div class="home-card-item autoheight" >
                    <div class="home-card-item-title">企业数据分析</div>
                    <div class="qiyesj">
                        <div class="qysme">
                            开发企业总数：<span style="font-weight: bold">800</span>家
                        </div>
                        <div class="qysme">
                            有在建在售项目的企业总数：<span style="font-weight: bold">800</span>家
                        </div>
                    </div>
                    <br>
                    <div class="qybt">
                        <div style="width: 220px;height: 200px">
                            <div style="text-align: center">企业资质</div>
                            <uspie ref="pies"></uspie>
                        </div>
                        <div style="width: 220px;height: 200px">
                            <div style="text-align: center">在建在售项目的企业资质</div>
                            <uspie ref="pies1"></uspie>
                        </div>
                    </div>
                </div>
                <div class="home-card-item autoheight" style="margin-top: 20px">
                    <div class="home-card-item-title">预售资金数据分析</div>
                    <div class="yszj">
                        <div class="yszj-block" v-for=" item in state.itemlist">
                            <div class="money yszj-je">10000000</div>
                            <div style="padding-top: 7px">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="home">
    import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from "vue";
    import * as echarts from "echarts";
    import { storeToRefs } from "pinia";
    import { useThemeConfig } from "/@/stores/themeConfig";
    import { useTagsViewRoutes } from "/@/stores/tagsViewRoutes";
    import { homeApi } from "/@/api/home/index";
    // 定义变量内容
    const homeLineRef = ref();
    const homePieRef = ref();
    const homePieRef1 = ref();
    const homeBarRef = ref();
    const storesTagsViewRoutes = useTagsViewRoutes();
    const storesThemeConfig = useThemeConfig();
    const { themeConfig } = storeToRefs(storesThemeConfig);
    const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
    import uspie from "/@/components/pietest/index.vue";
    const pies = ref();
    const pies1 = ref();
    onMounted(() => {
        pies.value.initPieChart();
        pies1.value.initPieChart();
    });
    const state = reactive({
        global: {
            homeChartOne: null,
            homeChartTwo: null,
            homeChartTwo1: null,
            homeCharThree: null,
            dispose: [null, "", undefined],
        } as any,
        homeOne: [
            {
                num1: "125,12",
                num3: "商品房项目总数",
                num4: "iconfont icon-ditu",
                color2: "--next-color-primary-lighter",
                color3: "--el-color-success",
            },
            {
                num1: "653,33",
                num3: "在建项目总数",
                num4: "iconfont icon-ditu",
                color2: "--next-color-primary-lighter",
                color3: "--el-color-success",
            },
            {
                num1: "125,65",
                num3: "在售项目总数",
                num4: "iconfont icon-ditu",
                color2: "--next-color-primary-lighter",
                color3: "--el-color-success",
            },
            {
                num1: "125,65",
                num3: "在售项目总数",
                num4: "iconfont icon-ditu",
                color2: "--next-color-primary-lighter",
                color3: "--el-color-success",
            },
        ],
        itemlist:[
            {
                name:"监管总额度"
            },
            {
                name:"余额"
            },
            {
                name:"资金归集额度"
            },
            {
                name:"资金使用额度"
            },
            {
                name:"资金监管比例"
            },
        ],
        homeThree: [
            {
                tit: "总量",
                icon: "iconfont icon-yangan",
                label: "浅粉红",
                value: "2.1%OBS/M",
                iconColor: "#F72B3F",
            },
            {
                tit: "住宅总量",
                icon: "iconfont icon-wendu",
                label: "深红(猩红)",
                value: "30℃",
                iconColor: "#91BFF8",
            },
            {
                tit: "库存总量",
                icon: "iconfont icon-shidu",
                label: "淡紫红",
                value: "57%RH",
                iconColor: "#88D565",
            },
            {
                tit: "住宅库存总量",
                icon: "iconfont icon-shidu",
                label: "弱紫罗兰红",
                value: "107w",
                iconColor: "#88D565",
            },
            {
                tit: "批售总量",
                icon: "iconfont icon-zaosheng",
                label: "中紫罗兰红",
                value: "57DB",
                iconColor: "#FBD4A0",
            },
            {
                tit: "住宅批售总量",
                icon: "iconfont icon-zaosheng",
                label: "紫罗兰",
                value: "57PV",
                iconColor: "#FBD4A0",
            },
            {
                tit: "销售总量",
                icon: "iconfont icon-zaosheng",
                label: "暗紫罗兰",
                value: "517Cpd",
                iconColor: "#FBD4A0",
            },
            {
                tit: "住宅销售总量",
                icon: "iconfont icon-zaosheng",
                label: "幽灵白",
                value: "12kg",
                iconColor: "#FBD4A0",
            },
        ],
        myCharts: [] as EmptyArrayType,
        charts: {
            theme: "",
            bgColor: "",
            color: "#303133",
        },
    });
    // 接口
    const ApiIndex = async () =>{
        let item = await homeApi().index({
            username: '1',
        });
    }
    // 柱状图
    const initLineChart = () => {
        if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne))
            state.global.homeChartOne.dispose();
        state.global.homeChartOne = markRaw(
            echarts.init(homeLineRef.value, state.charts.theme)
        );
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data: ['面积', '套数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Sun'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 套'
                    }
                },
                {
                    type: 'value',
                    splitLine:{
                        show:false
                    },
                    axisLabel: {
                        formatter: '{value} ㎡'
                    }
                }
            ],
            series: [
                {
                    name: '套数',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' 套';
                        }
                    },
                    data: [
                        20, 49, 70, 232, 256, 767, 1356, 1356
                    ]
                },
                {
                    name: '面积',
                    type: 'bar',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '㎡';
                        }
                    },
                    data: [
                        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 1.6, 1.6
                    ]
                }
            ]
        };
        state.global.homeChartOne.setOption(option);
        state.myCharts.push(state.global.homeChartOne);
    };
    // 饼图1
    const initPieChart1 = () => {

    };
    // 饼图
    const initPieChart = () => {

    };
    // 柱状图
    const initBarChart = () => {
        if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree))
            state.global.homeCharThree.dispose();
        state.global.homeCharThree = markRaw(
            echarts.init(homeBarRef.value, state.charts.theme)
        );
        const option = {
            backgroundColor: state.charts.bgColor,
            title: {
                text: "地热开发利用",
                x: "left",
                textStyle: { fontSize: "15", color: state.charts.color },
            },
            tooltip: { trigger: "axis" },
            legend: { data: ["供温", "回温", "压力值(Mpa)"], right: 0 },
            grid: { top: 70, right: 80, bottom: 30, left: 80 },
            xAxis: [
                {
                    type: "category",
                    data: ["1km", "2km", "3km", "4km", "5km", "6km"],
                    boundaryGap: true,
                    axisTick: { show: false },
                },
            ],
            yAxis: [
                {
                    name: "供回温度(℃）",
                    nameLocation: "middle",
                    nameTextStyle: { padding: [3, 4, 50, 6] },
                    splitLine: { show: true, lineStyle: { type: "dashed", color: "#f5f5f5" } },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { color: state.charts.color, formatter: "{value} " },
                },
                {
                    name: "压力值(Mpa)" ,
                    nameLocation: "middle",
                    nameTextStyle: { padding: [50, 4, 5, 6] },
                    splitLine: { show: false },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { color: state.charts.color, formatter: "{value} " },
                },
            ],
            series: [
                {
                    name: "供温",
                    type: "line",
                    smooth: true,
                    showSymbol: true,
                    // 矢量画五角星
                    symbol: "path://M150 0 L80 175 L250 75 L50 75 L220 175 Z",
                    symbolSize: 12,
                    yAxisIndex: 0,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "rgba(250,180,101,0.3)" },
                            { offset: 1, color: "rgba(250,180,101,0)" },
                        ]),
                        shadowColor: "rgba(250,180,101,0.2)",
                        shadowBlur: 20,
                    },
                    itemStyle: { color: "#FF8000" },
                    // data中可以使用对象，value代表相应的值，另外可加入自定义的属性
                    data: [
                        { value: 1, stationName: "s1" },
                        { value: 3, stationName: "s2" },
                        { value: 4, stationName: "s3" },
                        { value: 9, stationName: "s4" },
                        { value: 3, stationName: "s5" },
                        { value: 2, stationName: "s6" },
                    ],
                },
                {
                    name: "回温",
                    type: "line",
                    smooth: true,
                    showSymbol: true,
                    symbol: "emptyCircle",
                    symbolSize: 12,
                    yAxisIndex: 0,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                { offset: 0, color: "rgba(199, 237, 250,0.5)" },
                                { offset: 1, color: "rgba(199, 237, 250,0.2)" },
                            ],
                            false
                        ),
                    },
                    itemStyle: {
                        color: "#3bbc86",
                    },
                    data: [
                        { value: 31, stationName: "s1" },
                        { value: 36, stationName: "s2" },
                        { value: 54, stationName: "s3" },
                        { value: 24, stationName: "s4" },
                        { value: 73, stationName: "s5" },
                        { value: 22, stationName: "s6" },
                    ],
                },
                {
                    name: "压力值(Mpa)",
                    type: "bar",
                    barWidth: 30,
                    yAxisIndex: 1,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "rgba(108,80,243,0.3)" },
                            { offset: 1, color: "rgba(108,80,243,0)" },
                        ]),
                        //柱状图圆角
                        borderRadius: [30, 30, 0, 0],
                    },
                    data: [
                        { value: 11, stationName: "s1" },
                        { value: 34, stationName: "s2" },
                        { value: 54, stationName: "s3" },
                        { value: 39, stationName: "s4" },
                        { value: 63, stationName: "s5" },
                        { value: 24, stationName: "s6" },
                    ],
                },
            ],
        };
        state.global.homeCharThree.setOption(option);
        state.myCharts.push(state.global.homeCharThree);
    };
    // 批量设置 echarts resize
    const initEchartsResizeFun = () => {
        nextTick(() => {
            for (let i = 0; i < state.myCharts.length; i++) {
                setTimeout(() => {
                    state.myCharts[i].resize();
                }, i * 1000);
            }
        });
    };
    // 批量设置 echarts resize
    const initEchartsResize = () => {
        window.addEventListener("resize", initEchartsResizeFun);
    };
    // 页面加载时
    onMounted(() => {
        initEchartsResize();
    });
    // 由于页面缓存原因，keep-alive
    onActivated(() => {
        initEchartsResizeFun();
    });
    // 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
    watch(
        () => isTagsViewCurrenFull.value,
        () => {
            initEchartsResizeFun();
        }
    );
    // 监听 pinia 中是否开启深色主题
    watch(
        () => themeConfig.value.isIsDark,
        (isIsDark) => {
            nextTick(() => {
                state.charts.theme = isIsDark ? "dark" : "";
                state.charts.bgColor = isIsDark ? "transparent" : "";
                state.charts.color = isIsDark ? "#dadada" : "#303133";
                ApiIndex()
                setTimeout(() => {
                    initLineChart();
                }, 500);
                setTimeout(() => {
                    initPieChart();
                }, 700);
                setTimeout(() => {
                    initPieChart1()
                }, 1000);
            });
        },
        {
            deep: true,
            immediate: true,
        }
    );
</script>

<style scoped lang="scss">
    /*  */
    .yszj{
        display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;
        .yszj-block{
            background-color: rgba(243, 224, 224, 0.49);padding: 20px;text-align: center;margin: 7px 15px;
            .yszj-je{
                color: #ff0000;font-weight: bold;font-size: 18px
            }
        }
    }
    .qiyesj{
        display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;
        .qysme{
            background-color: #ebeef5;padding: 16px 20px;
        }

    }
    .qybt{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    /*  */
    .money{
        &::before{
            content: "￥";
            font-size: 12px;
        }
    }
    .smetext {
        &::before {
            content: "套数:";
        }
    }
    .smetexts {
        &::before {
            content: "面积:";
        }
    }
    .uconss {
        text-align: left;
        padding: 10px 20px;

        .uconsstitle {
            font-size: 15px;
            font-weight: bold;
            margin: 8px 0;
        }
        .uconsstext {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        img {
            height: 26px;
        }
    }
    .bold {
        font-weight: bold;
    }
    .maxauto {
        height: auto !important;
    }
    .autoheight {
        height: auto !important;
    }
    $homeNavLengh: 8;
    .home-container {
        overflow: hidden;
        .home-card-one,
        .home-card-two,
        .home-card-three {
            .home-card-item {
                width: 100%;
                height: 130px;
                border-radius: 4px;
                transition: all ease 0.3s;
                padding: 20px;
                overflow: hidden;
                background: var(--el-color-white);
                color: var(--el-text-color-primary);
                border: 1px solid var(--next-border-color-light);
                &:hover {
                    box-shadow: 0 2px 12px var(--next-color-dark-hover);
                    transition: all ease 0.3s;
                }
                &-icon {
                    width: 70px;
                    height: 70px;
                    border-radius: 100%;
                    flex-shrink: 1;
                    i {
                        color: var(--el-text-color-placeholder);
                    }
                }
                &-title {
                    font-size: 15px;
                    font-weight: bold;
                    height: 30px;
                }
            }
        }
        .home-card-one {
            @for $i from 0 through 3 {
                .home-one-animation#{$i} {
                    opacity: 0;
                    animation-name: error-num;
                    animation-duration: 0.5s;
                    animation-fill-mode: forwards;
                    animation-delay: calc($i/4) + s;
                }
            }
        }
        .home-card-two,
        .home-card-three {
            .home-card-item {
                height: 400px;
                width: 100%;
                overflow: hidden;
                .home-monitor {
                    height: 100%;
                    .flex-warp-item {
                        width: 25%;
                        height: 111px;
                        display: flex;
                        .flex-warp-item-box {
                            margin: auto;
                            text-align: center;
                            color: var(--el-text-color-primary);
                            display: flex;
                            border-radius: 5px;
                            background: var(--next-bg-color);
                            cursor: pointer;
                            transition: all 0.3s ease;
                            &:hover {
                                background: var(--el-color-primary-light-9);
                                transition: all 0.3s ease;
                            }
                        }
                        @for $i from 0 through $homeNavLengh {
                            .home-animation#{$i} {
                                opacity: 0;
                                animation-name: error-num;
                                animation-duration: 0.5s;
                                animation-fill-mode: forwards;
                                animation-delay: calc($i/10) + s;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
