<template>
    <div style="padding: 10px" class="bg">
        <div class="big-title dis" style="justify-content: space-around">
            <div style="font-size: 14px;width: 30%" class="dis">
                <div>菜单类别</div>
                <div>菜单类别</div>
            </div>
            <div>潍坊市房地产市场监控平台</div>
            <div style="font-size: 14px;width: 30%" class="dis">
                <div>菜单类别</div>
                <div>菜单类别</div>
            </div>
        </div>
        <el-row :gutter="20">
            <el-col :span="7">
                <div class="block" style="height: 23vh;">
                    <div class="title">
                        <div>
                            <i class="iconfont icon-data-view"></i>
                            总量统计
                        </div>
                    </div>
                    <div class="dis" style="justify-content: space-between">
                        <div style="width: 30%;">
                            <div class="top-block">
                                <div class="top">
                                    {{proxy?.$method.numFormat(state.letTop.corpTotal)}}
                                </div>
                                <div class="buttom">全部企业</div>
                            </div>
                            <div class="top-block">
                                <div class="top">{{state.letTop.buildCorpTotal}}</div>
                                <div class="buttom">在建在售企业</div>
                            </div>
                        </div>
                        <div class="dis" style="width: 70%;">
                            <div class="top-block xm">
                                <div class="top">{{state.letTop.projectTotal}}</div>
                                <div class="buttom">项目总数</div>
                            </div>
                            <div class="top-block xm">
                                <div class="top">
                                    {{proxy?.$method.numFormat(state.letTop.totalArea)}}
                                    <span>万㎡</span>
                                </div>
                                <div class="buttom">总面积</div>
                            </div>
                            <div class="top-block xm">
                                <div class="top">{{state.letTop.buildProjectTotal}}</div>
                                <div class="buttom">在建在售项目</div>
                            </div>
                            <div class="top-block xm">
                                <div class="top">
                                    {{proxy?.$method.numFormat(state.letTop.buildAreaTotal)}}
                                    <span>万㎡</span>
                                </div>
                                <div class="buttom">在建在售面积</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="block" style="margin-top: 10px">
                    <div class="title">
                        <div>
                            <i class="iconfont icon-data-view"></i>
                            年度住宅销售情况
                        </div>
                    </div>
                    <div ref="homeEachrt4" style="width: 100%;height: 25vh;margin-top: 10px"></div>
                </div>

                <div class="block" style="margin-top: 10px">
                    <div class="title">
                        <div>
                            <i class="iconfont icon-data-view"></i>
                            预售资金
                        </div>
                    </div>
                    <div ref="homeEachrt1" style="width: 100%;height: 25vh;margin-top: 10px"></div>
                </div>

            </el-col>
            <el-col :span="10">
                <div class="">
                    <div class="title">
                        <div class="dis">
                            <div>
                                <!--<el-date-picker
                                        size="default"
                                        v-model="state.picker"
                                        type="month"
                                        placeholder="选择年限"
                                />-->
                            </div>
                        </div>
                        <div class="flex">
                            当前城市：<span style="color: #2DE6E1">{{state.county}}</span>
                            <div class="cursor-pointer" @click="state.county = '潍坊市'" style="margin-left: 20px;color: #008d87">返回</div>
                        </div>
                    </div>
                    <div id="map_view" style="width: 100%;height: 63vh;z-index: 999"></div>
                </div>
                <div class="block" style="margin-top: 10px;">
                    <div class="title">
                        <div>
                            <i class="iconfont icon-data-view"></i>
                            月销售统计
                        </div>
                    </div>
                    <table class="table">
                        <tr>
                            <td>日期</td>
                            <td>销售套数</td>
                            <td>环比</td>
                            <td>同比</td>
                            <td>销售总额(万元)</td>
                            <td>环比</td>
                            <td>同比</td>
                            <td>销售单价(元/㎡)</td>
                            <td>环比</td>
                            <td>同比</td>
                        </tr>
                        <tr>
                            <td>2021-01</td>
                            <td>8000</td>
                            <td>1.3%</td>
                            <td>2.6%</td>
                            <td>5,465,445</td>
                            <td>1.3%</td>
                            <td>2.6%</td>
                            <td>7,784</td>
                            <td>1.1%</td>
                            <td>2.4%</td>
                        </tr>
                        <tr>
                            <td>2021-02</td>
                            <td>8000</td>
                            <td>1.3%</td>
                            <td>2.6%</td>
                            <td>5,465,445</td>
                            <td>1.3%</td>
                            <td>2.6%</td>
                            <td>7,784</td>
                            <td>1.1%</td>
                            <td>2.4%</td>
                        </tr>
                        <tr>
                            <td>2021-03</td>
                            <td>8000</td>
                            <td>1.3%</td>
                            <td>2.6%</td>
                            <td>5,465,445</td>
                            <td>1.3%</td>
                            <td>2.6%</td>
                            <td>7,784</td>
                            <td>1.1%</td>
                            <td>2.4%</td>
                        </tr>
                    </table>

                </div>
            </el-col>
            <el-col :span="7">

                <div class="block">
                    <div class="title">
                        <div>
                            <i class="iconfont icon-data-view"></i>
                            预警监测
                        </div>
                    </div>
                    <vue3-seamless-scroll class="seamlessCss" :list="tableData" :hover="true" :step="0.4" :wheel="true" :isWatch="true">
                        <div class="dis" style="margin-top: 10px;justify-content: space-between"  v-for="a in  10">
                            <div>
                                <span style="color: #ff8800;margin-left: 10px;font-weight: bold">III级</span>
                                昌乐县全市范围内商品住宅网签备案成交均价连续三个月环比涨幅超过3%</div>
                        </div>
                    </vue3-seamless-scroll>
                </div>



                <div class="block" style="margin-top: 10px">
                    <div class="title">
                        <div>
                            <i class="iconfont icon-data-view"></i>
                            房地产指标趋势图
                        </div>
                        <div class="danxuan">
                            <el-radio-group v-model="state.radio2" size="small" @change="radioChange">
                                <el-radio-button label="1">商品房</el-radio-button>
                                <el-radio-button label="2">商品房住宅</el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <div style="margin: 7px 20px" class="danxuans">
                        <el-radio-group v-model="state.radio2" size="small" @change="radioChange2">
                            <el-radio-button label="1">去化周期</el-radio-button>
                            <el-radio-button label="2">商品房预售</el-radio-button>
                            <el-radio-button label="3">商品房销售</el-radio-button>
                            <el-radio-button label="4">商品房库存</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div ref="homeEachrt2" style="width: 100%;height: 26vh;margin-top: 10px"></div>
                </div>

                <div class="block" style="margin-top: 10px">
                    <div class="title">
                        <div>
                            <i class="iconfont icon-data-view"></i>
                            购房人年龄分析
                        </div>
                    </div>
                    <div style="height: 20vh">
                        <div ref="homeEachrt3" style="width: 100%;height: 22vh;margin-top: 10px"></div>
                    </div>
                </div>

            </el-col>
        </el-row>
        <el-row :gutter="20">

        </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 { NextLoading } from "/@/utils/loading";
    import "echarts-gl"; //3D地图插件
    import weifang from './weifang.json'
    const weifangMap:any = weifang
    import { fanChart1,fanChart2,fanChart3,fanChart4 } from "/@/views/LargeScreen/echart"
    import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
    import { dsjApi } from "/@/api/dsj";
    defineComponent({
        components: {
            Vue3SeamlessScroll
        }
    })
    const homeEachrt1 = ref();//柱状图
    const homeEachrt2 = ref();//折线图
    const homeEachrt3 = ref();//折线图
    const homeEachrt4 = ref();

    const tableData: any = ref([])
    const getData = () => {
        for (let i = 0; i < 40; i++) {
            tableData.value.push({
                type: `III级${i + 1}`,
                name: `寿光市全市范围内商品住宅网签备案成交均价连续三个月环比涨幅超过3%${i + 1}`,
                content: `多情键客无情键${i + 1}`
            })
        }
    }

    const state = reactive<any>({
        county:"潍坊市" as any,//区县
        radio2:"1",
        picker:"",
        global: {//图表
            homeChart1: null,
            homeChart2: null,
            homeChart3: null,
            homeChart4: null,
        },
        letTop:"",
    });

    const axiosApi = async () => {
        const item = await dsjApi().searchApi();
        state.letTop = item.data.screenTotal
    }
    const radioChange = (val:any) => {

    }
    function radioChange2 (val:any) {

    }

    const echartApi = () => {
        const dataData = {

        }
        state.global.homeChart1 = markRaw(echarts.init(homeEachrt1.value));
        var option = fanChart1();
        state.global.homeChart1.setOption(option);

        state.global.homeChart2 = markRaw(echarts.init(homeEachrt2.value));
        var option2 = fanChart2();
        state.global.homeChart2.setOption(option2);

        state.global.homeChart3 = markRaw(echarts.init(homeEachrt3.value));
        var option3 = fanChart3();
        state.global.homeChart3.setOption(option3);

        state.global.homeChart4 = markRaw(echarts.init(homeEachrt4.value));
        var option4 = fanChart4();
        state.global.homeChart4.setOption(option4);
    }
    // 地图
    const getCodeApi = () => {
        const mapOption = {
            animation: true,
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (元/㎡)'
            },
            /*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: "map3D",  //类型map
                    roam: true,// 允许缩放
                    regionHeight: 4, //模型的高度
                    boxWidth: 90, //三维地图在三维场景中的宽度
                    boxDepth: 90, //三维地图在三维场景中的深度
                    viewControl: {
                        beta: 0, //x轴旋转
                        alpha: 90, //Y轴旋转
                        // panMouseButton: 'center', //平移操作使用的鼠标按键
                        rotateMouseButton: 'left', //旋转操作使用的鼠标按键
                    },
                    label: {
                        show: true,
                        position: "top",
                        color: '#fff',
                        fontSize: 12,
                    },
                    // 选中状态下的多边形和标签样式
                    emphasis: {
                        itemStyle: {
                            color: '#0048ff', //地图背景色
                            borderColor: '#000000', //省市边界线00fcff 516a89
                            borderWidth: 2
                        },
                        label: {
                            color: '#fff'
                        }
                    },
                    groundPlane: {// 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                        show: false,// 是否显示地面。[ default: false ]
                        color: '#aaa'// 地面颜色。[ default: '#aaa' ]
                    },
                    itemStyle: {
                        color: "#00a5ff",
                        opacity: 0.8,
                        borderWidth: 1,
                        borderColor: "#666666",
                    },
                    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.county = params.data.name
        });
    };
    onMounted(() => {
        NextLoading.done();
        axiosApi()
        setTimeout(() => {
            getCodeApi()
            echartApi()
            getData()
        }, 500);
    })

</script>

<style scoped lang="scss">
    .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;
        }
    }
    .seamlessCss1{
        height: 5vh;
        overflow: hidden;
    }
    .seamlessCss{
        height: 16vh;
        overflow: hidden;
        margin-top: 20px;
    }
    .imgs{
        margin-top: 10px;
        width: 90px;
        height: 70px;
        margin-right: 20px;
    }
    .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;
            }
        }
    }*/
    .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;
            }
        }

    }
    .danxuan {
        :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%;
    }
    .top-block{
        text-align: center;
        margin-top: 22px;
        .top{
            color: #2DE6E1;
            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;
        margin-bottom: 4vh;
        .titles{
            div{
                font-size: 18px;
            }
        }
    }
    .title{
        font-weight: bold;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        color: #ffffff;
    }
    .block{
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.1);
        color: #e5e5e5;
        border: 1px solid rgba(255, 255, 255, 0.1);
        &:hover{
            border-image-source: radial-gradient(70% 70%, transparent 0px, transparent 100%, cyan 100%);
            border-image-slice: 1;
            border-width: 1px;
            border-style: solid;
        }
    }
</style>
