<template>
    <div style="padding: 10px" class="bg">
        <div class="big-title dis" style="justify-content: space-around">
            <div class="titles dis" style="width: 40%">
                <dv-decoration-9 style="width:30px;height:30px;"></dv-decoration-9>
                <div class="cursor-pointer">
                    <dv-button :fontColor="'#ffffff'" @click="dianji(2)" border="Border4">在建在售分析</dv-button>
                </div>
                <div class="cursor-pointer" style="margin-left: 10px">
                    <dv-button :fontColor="'#ffffff'" @click="dianji(1)" border="Border4">市场分析</dv-button>
                </div>
                <div class="cursor-pointer" style="margin-left: 10px">
                    <dv-button color="#1E9ADE" :fontColor="'#ffffff'" @click="dianji(3)"
                        border="Border4">预警监测</dv-button>
                </div>
            </div>
            <div style="width: 20%">
                潍坊市房地产市场监控平台
                <dv-decoration5 :dur="2" style="width:100%;height:40px;" />
            </div>
            <div style="width: 40%;color:#ffffff;text-align: right;font-size: 16px;padding: 7px 10px 0 0">
                <div style="text-shadow: 0 0 20px #49CEF0;">
                    {{ state.daysins }}
                </div>
            </div>
        </div>
        <el-row :gutter="20">
            <el-col :span="7">
                <dv-border-box13 style="height: 25vh;">
                    <div class="block">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                预警监测
                            </div>
                        </div>
                        <br>
                        <vue3-seamless-scroll class="seamlessCss3" :list="tableData" :hover="true" :step="0.2"
                            :wheel="true" :isWatch="true">
                            <div class="inssw">
                                <div style="font-size: 16px;margin-top: 10px" v-for="(item, index) in state.letyvjing"
                                    :key="index">
                                    <span>{{ item.district }}</span>
                                    <span style="color: #ffd600;margin: 0px 7px;">
                                        <span v-if="item.level == 1">Ⅰ预警</span>
                                        <span v-if="item.level == 2">Ⅱ预警</span>
                                        <span v-if="item.level == 3">Ⅲ预警</span>
                                    </span>
                                    {{ item.content }}
                                </div>
                            </div>
                        </vue3-seamless-scroll>
                    </div>
                </dv-border-box13>


                <dv-border-box13 style="height: 32vh;">
                    <div class="block" style="margin-top: 10px">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                停工停建项目占比
                            </div>
                        </div>
                        <div ref="homeEachrt4" v-if="state.determine"
                            style="width: 100%;height: 24.5vh;margin-top: 10px"></div>
                    </div>
                </dv-border-box13>

                <dv-border-box13 style="height: 30vh;">
                    <div class="block" style="margin-top: 10px">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                停工停建面积占比
                            </div>
                        </div>
                        <div ref="homeEachrt1" v-if="state.determine" style="width: 100%;height: 22vh;margin-top: 10px">
                        </div>
                    </div>
                </dv-border-box13>
            </el-col>
            <el-col :span="10">
                <div class="title" style="margin-top: 20px">
                    <div class="dis">
                        <div class="selent">

                        </div>
                    </div>
                    <div class="flex danxuan" style="align-items: center">
                        当前城市：<span style="color: #2DE6E1"></span>
                        <el-select style="width: 100px" v-model="state.select" :teleported="false" placeholder="选择城市"
                            size="small" @change="selectChange">
                            <el-option v-for="(item, index) in state.city" :key="index" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>

                <dv-decoration-12 :color="['#133273', '', '#00ff2c']" style="width:100%;height: 53.3vh;">
                    <div id="map_view" style="width: 100%;height:  53.3vh;z-index: 999"></div>
                </dv-decoration-12>

                <dv-border-box13 style="height: 30vh;">
                    <div class="block" style="margin-top: 10px;">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                逾期交付监测
                            </div>
                        </div>
                        <vue3-seamless-scroll class="seamlessCss8" :list="state.orsdata" :hover="true" :step="0.4"
                            :wheel="true" :isWatch="true">
                            <table class="table">
                                <tr>
                                    <td>区县</td>
                                    <td>项目名称</td>
                                    <td>楼幢编码</td>
                                    <td>交付时间</td>
                                    <td>逾期预警</td>
                                </tr>
                                <tr v-for="(item, index) in state.orsdata" :key="index">
                                    <td>{{ item.areaName }}</td>
                                    <td>{{ item.projectName }}</td>
                                    <td>{{ item.buildingName }}</td>
                                    <td>{{ item.delayDate }}</td>
                                    <td>
                                        <span v-if="item.earlyWarningLevel == 1" class="winer">逾期3个月</span>
                                        <span v-if="item.earlyWarningLevel == 2" class="winer">逾期半年</span>
                                        <span v-if="item.earlyWarningLevel == 3" class="winer">逾期1年以上</span>
                                    </td>
                                </tr>
                            </table>
                        </vue3-seamless-scroll>
                    </div>
                </dv-border-box13>
            </el-col>
            <el-col :span="7">
                <dv-border-box13 style="height: 25vh;">
                    <div class="block">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                去化周期
                            </div>
                        </div>
                        <div ref="homeEachrt6" v-if="state.determine" style="width: 100%;height: 18vh;margin-top: 10px">
                        </div>
                        <!-- <vue3-seamless-scroll class="seamlessCss3" :list="tableData" :hover="true" :step="0.2"
                            :wheel="true" :isWatch="true">
                            <div class="inssw">
                                <div style="font-size: 16px;margin-top: 10px" v-for="(item, index) in state.letyvjing"
                                    :key="index">
                                    <span>{{ item.district }}</span>
                                    <span style="color: #ffd600;margin: 0px 7px;">
                                        <span v-if="item.level == 1">Ⅰ预警</span>
                                        <span v-if="item.level == 2">Ⅱ预警</span>
                                        <span v-if="item.level == 3">Ⅲ预警</span>
                                    </span>
                                    {{ item.content }}
                                </div>
                            </div>
                        </vue3-seamless-scroll> -->
                    </div>
                </dv-border-box13>

                <dv-border-box13 style="height: 32vh;">
                    <div class="block" style="margin-top: 10px">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                销售价格月环比
                            </div>
                        </div>
                        <div ref="homeEachrt2" v-if="state.determine" style="width: 100%;height: 25vh;margin-top: 10px">
                        </div>
                    </div>
                </dv-border-box13>

                <dv-border-box13 style="height: 30vh;">
                    <div class="block" style="margin-top: 10px">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                销售价格半年同比
                            </div>
                        </div>
                        <div v-if="state.determine">
                            <div ref="homeEachrt5" style="width: 100%;height: 22vh;margin-top: 10px"></div>
                        </div>
                    </div>
                </dv-border-box13>

            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { markRaw, onMounted, reactive, ref, defineComponent, defineAsyncComponent } from 'vue';
import * as echarts from "echarts";
import { useCurrentInstance } from '/@/method/get'
const { proxy } = useCurrentInstance()
import { useRouter } from "vue-router";
let router = useRouter();
import { NextLoading } from "/@/utils/loading";
import "echarts-gl"; //3D地图插件
import weifang from './weifang.json'
const weifangMap: any = weifang
import { fanChart8, fanChart2, fanChart3, fanChart4, fanChart5, fanChart7, fanChart31 } from "/@/views/LargeScreen/echart"
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { dsjApi } from "/@/api/dsj";
import { entApi } from "/@/api/ent";
import { getApi } from "/@/api/early/overdue";
import { getAll } from "/@/api/sys/index";

defineComponent({
    components: {
        Vue3SeamlessScroll
    }
})
const homeEachrt1 = ref();//柱状图
const homeEachrt2 = ref();//折线图
const homeEachrt3 = ref();//折线图
const homeEachrt4 = ref();
const homeEachrt5 = ref();
const homeEachrt6 = ref();
const tableData: any = ref([])
const getData = () => {
    for (let i = 0; i < 40; i++) {
        tableData.value.push({
            type: `III级${i + 1}`,
        })
    }
}
const state = reactive<any>({
    county: "寿光市" as any,//区县
    orsdata: [],
    radio2: "1",
    select: 370702,
    picker: "",
    picker1: "",
    daysins: "",
    determine: true,
    city: [] as any,
    global: {//图表
        homeChart1: null,
        homeChart2: null,
        homeChart3: null,
        homeChart4: null,
        homeChart5: null,
        homeChart6: null,
    },
    letTop: "",
    letyvjing: "",
    //图表数据
    saleArea: {//去化周期
        xAxis: [],
        saleAmount: [],
    } as any,
    saleNumber: {//月环比折线图（环比）
        xAxis: [],
        saleAmount: [],
    } as any,
    averagePrice: {
        xAxis: [],
        saleAmount: [],
    } as any,
    salePrice: {
        xAxis: [],
        saleAmount: [],
    } as any,
    buyerarea: [] as any,//停工停建项目占比
    saleage: [] as any,//停工停建面积占比
    salemonth: [] as any,

});

const axiosApi = async () => {

    state.saleArea = {
        xAxis: [],//X轴
        saleAmount: [],//销售面积
    },
        state.saleNumber = {
            xAxis: [],//X轴
            saleAmount: [],//销售面积
        },
        state.averagePrice = {
            xAxis: [],//X轴
            saleAmount: [],//销售面积
        },
        state.salePrice = {
            xAxis: [],
            saleAmount: [],
        },
        state.buyerarea = [],
        state.saleage = [],
        state.salemonth = [],

        state.determine = false

    let itemQx = await entApi().typesApi(); //区县数据
    state.city = itemQx.data;

    // let item1 = await dsjApi().warningApi1({
    //     district: state.select,//区县编码
    // })
    // state.letTop = item1.data

    let item2 = await dsjApi().warningApi2({
        district: state.select,//区县编码
    })
    let a = {
        name: '在建在售项目',
        value: item2.data.buildSaleProjectTotal,
    }
    let b = {
        name: '停工停建项目',
        value: item2.data.shutdownProjectTotal,
    }
    let c = {
        name: '在建在售面积',
        value: item2.data.buildAreaTotal,
    }
    let d = {
        name: '停工停建面积',
        value: item2.data.shutdownAreaTotal,
    }
    let e = {
        value: item2.data.buildSaleProjectTotal + item2.data.shutdownProjectTotal,
        itemStyle: { color: 'none' },
        label: { show: false }
    }
    state.buyerarea.push(a, b, e)
    state.saleage.push(c, d)

    let item3 = await dsjApi().warningApi3({
        district: state.select,//区县编码
    })
    item3.data.forEach((item: any) => {
        state.saleArea.xAxis.push(item.name)
        state.saleArea.saleAmount.push(item.num)
    })

    let item4 = await dsjApi().warningApi4({
        district: state.select,//区县编码
    })
    item4.data.forEach((item: any) => {
        state.saleNumber.xAxis.push(item.name)
        state.saleNumber.saleAmount.push(item.num)
    })
    state.saleNumber.saleAmount.reverse();
    state.saleNumber.xAxis.reverse();


    /*let item5 = await dsjApi().warningApi5({
        district:state.select,//区县编码
    })
    item5.data.forEach((item:any)=>{
        state.averagePrice.xAxis.push(item.name)
        state.averagePrice.saleAmount.push(item.num)
    })*/

    let item6 = await dsjApi().warningApi6({
        district: state.select,//区县编码
    })
    item6.data.forEach((item: any, index: any) => {
        if (index > 13) {
            state.salePrice.xAxis.push(item.yearMonth)
            state.salePrice.saleAmount.push(item.unitPriceYoy)
        }

    })

    let item7 = await dsjApi().warningApi7({
        district: state.select,//区县编码
    })
    state.letyvjing = item7.data


    state.determine = true
    newdata()
    setTimeout(() => {
        echartApi()
    }, 500);
}

const newdata = async () => {
    // 项目
    const data = await getApi().getulist({
        district: state.select,//区县编码
    });
    let sdata = data.data;
    let udata = state.city;
    let _data = [] as any;
    sdata.forEach((res: any) => {
        udata.forEach((ures: any) => {
            if (res.areaCode == ures.value) {
                res.areaName = ures.label
                _data.push(res)
            }
        })
    });
    state.orsdata = _data;
}

const pickerchange = (val: any) => {//选择器
    axiosApi()
}
const selectChange = (val: any) => {//选择器

    state.city.forEach((item: any) => {
        if (item.value == val) {
            state.county = item.label
        }
    })
    axiosApi()
}
const dianji = (val: any) => {//选择器
    if (val == 1) {
        router.push({
            path: '/LargeScreen',
        });
    } else if (val == 2) {
        router.push({
            path: '/LargeScreen/housing',
        });
    } else if (val == 3) {
        router.push({
            path: '/LargeScreen/warning',
        });
    } else {

    }
}

const echartApi = () => {

    state.global.homeChart1 = markRaw(echarts.init(homeEachrt1.value));
    var option = fanChart3(state.saleage);
    state.global.homeChart1.setOption(option, false);

    state.global.homeChart2 = markRaw(echarts.init(homeEachrt2.value));
    var option2 = fanChart8(state.saleNumber, '月环比');
    state.global.homeChart2.setOption(option2, true);

    state.global.homeChart4 = markRaw(echarts.init(homeEachrt4.value));
    var option4 = fanChart31(state.buyerarea);
    state.global.homeChart4.setOption(option4, true);

    state.global.homeChart5 = markRaw(echarts.init(homeEachrt5.value));
    var option5 = fanChart8(state.salePrice, '半年同比');
    state.global.homeChart5.setOption(option5, true);

    state.global.homeChart6 = markRaw(echarts.init(homeEachrt6.value));
    var option6 = fanChart7(state.saleArea, '去化周期');
    state.global.homeChart6.setOption(option6, true);
}
// 地图
const getCodeApi = () => {
    const mapOption = {
        animation: true,
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        /*visualMap: {
            min: 5000,
            max: 50000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            },
            textStyle: {
                color: '#ffffff'
            },
        },*/
        zoom: 0.9,
        series: [
            //配置数据的显示
            {
                map: 'weifang',
                // type: "map3D",  //类型map
                type: "map",  //类型map
                selectedMode: 'single',
                roam: true,// 允许缩放
                zoom: 1.2,
                regionHeight: 4, //模型的高度
                boxWidth: 90, //三维地图在三维场景中的宽度
                boxDepth: 90, //三维地图在三维场景中的深度
                viewControl: {
                    beta: 0, //x轴旋转
                    alpha: 90, //Y轴旋转
                    // panMouseButton: 'center', //平移操作使用的鼠标按键
                    rotateMouseButton: 'left', //旋转操作使用的鼠标按键
                },
                itemStyle: {//放入颜色
                    normal: {
                        areaColor: "#142957",
                        borderColor: "#0692a4",
                    },
                    emphasis: {
                        borderWidth: 1,
                        borderColor: '#0b1c2d',
                        areaColor: '#0b1c2d',
                        label: {
                            color: '#fff'
                        }
                    },
                },
                label: {
                    show: true,
                    position: "top",
                    color: '#fff',
                    fontSize: 12,
                },
                emphasis: {// 选中状态下的多边形和标签样式
                    itemStyle: {
                        color: '#0b1c2d', //地图背景色
                    },
                    label: {
                        color: '#fff'
                    }
                },
                groundPlane: {// 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                    show: false,// 是否显示地面。[ default: false ]
                    color: '#aaa'// 地面颜色。[ default: '#aaa' ]
                },
                select: {
                    label: {
                        // 选中区域的label(文字)样式
                        color: '#fff'
                    },
                    itemStyle: {
                        color: '#0b1c2d',
                        areaColor: "#175888",
                        // 选中区域边框
                        borderColor: "#0CDEFF",
                        borderWidth: 1,
                    },
                },
                /*data:[
                    {name: "寿光市",value: 60000},
                    {name: "青州市",value: 10515},
                    {name: "临朐县",value: 20211},
                    {name: "昌乐县",value: 30201},
                    {name: "寒亭区",value: 8000},
                    {name: "昌邑市",value: 3201},
                    {name: "潍城区",value: 15410},
                    {name: "奎文区",value: 17801},
                    {name: "坊子区",value: 34240},
                    {name: "安丘市",value: 44512},
                    {name: "高密市",value: 34841},
                    {name: "诸城市",value: 15451},
                ],*/
            },
        ],
    }
    const mapChart = echarts.init(document.getElementById('map_view'));
    echarts.registerMap('weifang', weifangMap);
    mapChart.setOption(mapOption);
    mapChart.on('click', function (params: any) {
        state.city.forEach((item: any) => {
            if (item.label == params.name) {
                state.select = item.value
            }
        })
        axiosApi()
    });
};
onMounted(() => {
    NextLoading.done();
    state.picker = new Date().getFullYear().toString()
    state.picker1 = new Date().getFullYear().toString()

    setInterval(() => {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
        const day = currentDate.getDate();
        const currentTime = new Date().toLocaleTimeString();
        state.daysins = year + "-" + month + "-" + day + "-" + currentTime
    }, 1000);

    axiosApi()
    setTimeout(() => {
        getCodeApi()
        getData()
    }, 500);
})

</script>

<style scoped lang="scss">
.winer {
    color: #e9971c;
}

.inssw {
    height: 10vh;
}

.ys-block {
    width: 33%;
    margin-top: 40px;
    text-align: center;

    .ys-top {
        font-size: 24px;
        color: #00ffe9;
        font-weight: bold;
    }

    .ys-but {
        margin-top: 10px;
    }
}

.seamlessCss8 {
    height: 24vh;
    overflow: hidden;
}

.seamlessCss3 {
    height: 10vh;
    overflow: hidden;
}

.imgs {
    margin-top: 10px;
    width: 90px;
    height: 70px;
    margin-right: 20px;
}

.tbyangshi {
    margin-top: 7px;

    span {
        color: #2DDBD1;
    }
}

.text-block {
    margin-top: 10px;

    .text {
        font-size: 15px;
        font-weight: bold;
    }

    .hs {
        color: #FDEE7A;
    }

    .ls {
        color: #00ffe9;
    }

    .moth {
        .top {
            font-size: 12px;
        }

        .bottom {
            font-size: 24px;

            span {
                font-size: 12px;
            }
        }
    }

    .mosy {
        font-size: 12px;

        span {
            margin-right: 7px;
            font-size: 24px;
        }
    }
}

/*.text-block{
        margin-top: 10px;
        .text{
            font-size: 15px;
            font-weight: bold;
            margin-top: 10px;
        }
        .hs{
            color:#FDEE7A;
        }
        .ls{
            color:#00ffe9;
        }
        .moth{
            .top{
                font-size: 12px;
                margin-top: 7px;
            }
            .bottom{
                margin-top: 7px;
                font-size: 24px;
                span{
                    font-size: 12px;
                }
            }
        }
        .mosy{
            font-size: 12px;
            margin-top: 15px;
            span{
                margin-right: 7px;
                font-size: 24px;
            }
        }
    }*/



::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
    border-radius: 10px;
    color: #fff;
    //border: 1px solid green;
    border-radius: 0px;
    border-color: #151733;
}

::v-deep .el-select-dropdown {
    //rgba(87,133,87,0.8)
    background: #151733;
    //margin: 0px;
    border: 1px solid #151733;
    //border-radius: 0px;
    //left: 0px !important;
}

::v-deep .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
    display: none;
}

::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
    color: #e5e5e5;
    background: #151733;
}

::v-deep .el-select-dropdown__item.selected {
    color: #e5e5e5;
}











.table {
    margin-top: 10px;
    width: 100%;
    cellpadding: 0;
    border-collapse: collapse;

    tr {
        td {
            padding: 7px 3px;
            text-align: center;
        }

        &:first-child {
            /*background-color: rgba(239, 239, 239, 0.52);*/
            color: #00ffe9;
        }
    }

}

.selent {
    ::v-deep .el-input__wrapper {
        background-color: #e7e7e7;
    }
}

.danxuan {
    :deep .el-input__wrapper {
        background-color: rgb(17, 184, 227, 0.1);
        border: 1px solid #009778;
        color: #ffffff;

        &:hover {
            color: #ffffff;
        }
    }

    :deep .el-input__inner {
        color: #ffffff;
    }

    :deep .el-radio-button__original-radio:checked+.el-radio-button__inner {
        background-color: rgba(25, 172, 208, 0.27);
        border: 1px solid #009778;

        &:hover {
            color: #ffffff;
        }
    }

    :deep .el-radio-button.el-radio-button--small span {
        &:hover {
            color: #009778;
        }
    }
}

.danxuans {
    :deep .el-radio-button__original-radio:checked+.el-radio-button__inner {
        background-color: #219783;
        border: 1px solid #009778;

        &:hover {
            color: #ffffff;
        }
    }

    :deep .el-radio-button__inner {
        &:hover {
            color: #009778;
        }
    }
}

.icon-data-view {
    color: #00ffe3;
}

.mapdibu {
    /*background: url('../../assets/dsj/mapButtom.gif');*/
    background-size: cover;
    height: 200px;
    width: 300px;
    z-index: 1;
    margin: 0px auto;
}

.dis {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.xm {
    width: 49%;
}

.cen-block {
    width: 30%;
    text-align: center;

    .top {
        color: #fff600;
        font-size: 24px;
        font-weight: bold;

        span {
            font-size: 12px;
            color: #ffffff;
            margin-left: 3px;
        }
    }

    .buttom {
        margin-top: 7px;
        font-size: 14px;
    }
}

.top-block {
    text-align: center;
    margin-top: 22px;

    .top {
        color: #46B8FF;
        font-size: 24px;
        font-weight: bold;

        span {
            font-size: 12px;
            color: #ffffff;
        }
    }

    .buttom {
        margin-top: 7px;
        font-size: 14px;
    }
}

.bg {
    background: url('../../assets/dsj/dsj.png');
    /*background: #000000;*/
    background-size: 100% 100%;
    height: 100vh;
    width: 100vw;
}

.big-title {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;

    .titles {
        padding-top: 5px;

        .cursor-pointer {
            margin-left: 250px;
            padding: 0px 10px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;

            &:hover {}
        }
    }
}


.title {
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

.block {
    padding: 20px;
    color: #e5e5e5;

    /*border: 1px solid rgba(255, 255, 255, 0.1);*/
    &:hover {}
}
</style>
