<template>
    <div class="seccontainer" v-show="btnVisible">
        <div class="titles">统计图表</div>
        <div class="echartscontainer">
            <div class="echartsbox1 echartsbox">
                <div class="textbox">数据统计</div>
                <div class="flex jc-c secbox wrap">
                    <div class="flex ai-c libox">
                        <AreaChartOutlined style="fontSize: 24px" />
                        <div class="flex ml-1 column">
                            <div class="text">区域面积</div>
                            <div>
                                <span class="num">{{ mapTotleData.qymj }}</span>
                                <span>km²</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex ai-c libox">
                        <UsergroupAddOutlined style="fontSize: 24px" />
                        <div class="flex ml-1 column">
                            <div class="text">地块数量总量</div>
                            <div>
                                <span class="num">{{ mapTotleData.dkzs }}</span>
                                <span>块</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex ai-c libox">
                        <GroupOutlined style="fontSize: 24px" />
                        <div class="flex ml-1 column">
                            <div class="text">企业数量</div>
                            <div>
                                <span class="num">{{ mapTotleData.qysl }}5</span>
                                <span>家</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex ai-c libox">
                        <MoneyCollectOutlined style="fontSize: 24px" />
                        <div class="flex ml-1 column">
                            <div class="text">年度利润总数</div>
                            <div>
                                <span class="num">{{ mapTotleData.ndlr }}</span>
                                <span>万元</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="echartsbox2 echartsbox">
                <div class="textbox">企业占地面积分乡镇情况</div>
                <div class="flex secbox">
                    <div id="rightEchartsId" v-if="echartsVislble" class="coverDiv"></div>
                </div>
            </div>
            <div class="echartsbox3 echartsbox">
                <div class="textbox">企业收入分乡镇情况</div>
                <div class="flex secbox">
                    <div id="rightEchartsId1" v-if="echartsVislble" class="coverDiv"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="handlebtn" :class="btnVisible?'':'btnactive'" @click="btnClick">
        {{btnVisible?'收起':'展开'}}
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import {
    AreaChartOutlined,
    UsergroupAddOutlined,
    GroupOutlined,
    MoneyCollectOutlined
} from '@ant-design/icons-vue';
import { LoadMapTotalData,LoadChartData,LoadgongxianChartData } from '@/api/ziranziyuan/index';


const emits = defineEmits([
    'changeLeftMenuShow'
]);

const echartsVislble = ref(true)
const btnVisible = ref(true)
const mapTotleData = ref({})

onMounted(() => {
    getMapTotalData()
    getChartsData1()
    getChartsData2()
})
function btnClick(){
    btnVisible.value = !btnVisible.value
    emits('changeLeftMenuShow',btnVisible.value);
}
const getMapTotalData = () =>{
    LoadMapTotalData().then(res =>{
        console.log('aaa',res)
        mapTotleData.value = res
    })
}
const getChartsData1 = () =>{
    LoadChartData().then(res =>{
        const nameData:any = ref([])
        const landValue:any = ref([])
        const houseValue:any = ref([])
        res.forEach(item =>{
            nameData.value.push(item.djqmc)
            landValue.value.push(item.tdmj)
            houseValue.value.push(item.fcmj)
            handRightEcharts(nameData.value,landValue.value,houseValue.value)
        })
    })
}
const getChartsData2 = () =>{
    LoadgongxianChartData().then(res =>{
        const nameData:any = ref([])
        const landValue:any = ref([])
        const houseValue:any = ref([])
        res.forEach(item =>{
            nameData.value.push({
                text: item.djqmc
            })
            landValue.value.push(item.tdgx)
            houseValue.value.push(item.fcgx)
            handRightEcharts1(nameData.value,landValue.value,houseValue.value)
        })
    })
}
const handRightEcharts = (nameData,landValue,houseValue) =>{
    let chartBox = echarts.init(document.getElementById("rightEchartsId"));
    
    let option = {
        legend: {
            left: 'right',
            top: '5',
            textStyle: {
                color: '#fff',
            },
        },
        tooltip: {},
        grid: {
            left: '2%',
            right: '2%',
            top: '20%',
            bottom: '2%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: nameData,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 2,
                    color: '#f00',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 12,
                color: '#fff',
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    width: 2,
                    color: '#2B7BD6',
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#153D7D',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                fontSize: 14,
            },
        },
        series: [
            {
                name: '土地面积',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: (e) => {
                            return e.value ;
                        },
                        fontSize: 12,
                        color: '#fff',
                    },
                },
                itemStyle: {
                    color: '#F6BD16',
                },
                tooltip: {},
                data: landValue,
            },
            {
                name: '房产面积',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: (e) => {
                            return e.value ;
                        },
                        fontSize: 12,
                        color: '#fff',
                    },
                },
                itemStyle: {
                    color: '#2391FF',
                },
                tooltip: {},
                data: houseValue,
            },
        ],
    };


    chartBox.setOption(option);
    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
        chartBox.resize();
    })
}
const handRightEcharts1 = (nameData,landValue,houseValue) =>{
    let chartBox = echarts.init(document.getElementById("rightEchartsId1"));

    let option = {
        color: ['#4A78D2', '#4CB997'],
        legend: {
            left: 'right',
            top: 'middle',
            orient: 'vertical',
            icon: 'circle',
            textStyle: {
                color: '#fff',
            },
        },
        tooltip: {},
        radar: [
            {
                indicator: nameData,
                center: ['38%', '50%'],
                radius: 70,
                startAngle: 90,
                splitNumber: 4,
                // shape: 'circle',
                axisName: {
                    formatter: '{value}',
                    color: '#fff'
                },
                splitArea: {
                    areaStyle: {
                        color: ['##0B2545', '#0B2545', '#0B2545', '#0B2545'],
                        shadowColor: 'rgba(0, 0, 0, 0.2)',
                        shadowBlur: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                    color: 'rgba(211, 253, 250, 0.8)'
                    }
                },
                splitLine: {
                    lineStyle: {
                    color: '#4B97DB'
                    }
                }
            },
        ],
        series: [
            {
                type: 'radar',
                emphasis: {
                    lineStyle: {
                        width: 2
                    }
                },
                data: [
                    {
                        value: landValue,
                        name: '土地',
                        areaStyle: {
                            color: 'rgba(80,129,225, 0.6)'
                        }
                    },
                    {
                        value: houseValue,
                        name: '房产',
                        areaStyle: {
                            color: 'rgba(90,216,166, 0.6)'
                        }
                    }
                ]
            },
        ]
    };


    chartBox.setOption(option);
    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
        chartBox.resize();
    })
}                 
</script>
<style scoped>
.flex{
    display: flex;
}
.ai-c{
    align-items: center;
}
.jc-c{
    justify-content: center;
}
.jc-sb{
    justify-content: space-between;
}
.wrap{
    flex-wrap: wrap;
}
.column{
    flex-direction: column
}
.ml-1{
    margin-left: 10px;
}
.coverDiv{
    width: 100%;
    height: 100%;
}
.seccontainer{
    width: 360px;
    padding: 10px 20px;
    height: calc(100% - 70px);
    background: rgba(0,0,0, 0.6);
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
    border-radius: 6px;
    position: absolute;
    left: 0;
    top: 70px;
    .titles{
        height: 50px;
        line-height: 50px;
        color: #fff
    }
    .echartscontainer{
        height: calc(100% - 50px);
        .echartsbox1{
            height: 20%;
            margin-bottom: 2%
        }
        .echartsbox2{
            height: 40%;
            margin-bottom: 1%
        }
        .echartsbox3{
            height: 36%;
        }
        .echartsbox{
            .textbox{
                width: 100%;
                height: 27px;
                background: url(/public/images/cim/titlebg.png);
                background-size: 100% 100%;
                text-align: left;
                line-height: 18px;
                color: #fff;
                padding-left: 20px;
                font-size: 14px;
            }
            .secbox{
                height: calc(100% - 27px);
                .libox{
                    width: 50%;
                    height: 50%;
                    color: #fff;
                    font-size: 14px;
                    padding-left: 22px;
                    .text{
                        line-height: 20px;
                    }
                    .num{
                        font-size: 18px;
                    }
                }
            }
        }
    }
}
.handlebtn{
    width: 35px;
    height: 90px;
    position: fixed;
    left: 360px;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
    background: linear-gradient(180deg, #247FD1 0%, #073E78 90%);
    color: #fff;
    line-height: 35px;
    text-align: center;
    writing-mode:tb-rl;
    font-size: 12px;
    border-radius: 0 8px 8px 0;
}
.handlebtn.btnactive{
    left: 0;
  }
</style>