<template>
    <div class="PageBox">
        <!-- 地图盒子 -->
        <div id="CesiumJsBox" ref="mapElement"></div>

        <!-- 右侧 抽屉 盒子 -->
        <div :class="flag ? 'RightBox' : 'RightBoxFlag'">
            <!-- 抽屉内容 -->
            <div class="RightBoxContent">

                <!-- tab 切换 -->
                <div class="taber">
                    <div :class="taberValue == 0 ? 'TaberChild_Activit' : 'TaberChild'" @click="taberValue = 0">行政区划
                    </div>
                    <div :class="taberValue == 1 ? 'TaberChild_Activit' : 'TaberChild'" @click="taberValue = 1">高标准农田
                    </div>
                </div>

                <!-- 行政区划 -->
                <div style="width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;"
                    v-show="taberValue == 0">

                    <!-- 标题 -->
                    <div class="title">
                        <div style="
                            width: 3px;
                            height: 19px;
                            opacity: 1;
                            background: rgba(100, 195, 164, 1);
                            margin-right: 12px;
                            "></div>
                        <span>设施农业遥感数据面积统计</span>
                        <p @click="handleDownMJ">
                            下载 &nbsp;
                            <img src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer" />
                        </p>
                    </div>

                    <!-- 下拉框 -->
                    <el-select v-model="value" placeholder="全部" size="small" style="width: 80%; margin: 10px 0;">
                        <el-option key="quanbu" label="全部" value="370211" />
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>

                    <!-- 柱状图 -->
                    <div class="ManJi">
                        <EchartsMJ :mj="mj"></EchartsMJ>
                    </div>

                    <!-- 占比 -->
                    <div class="title">
                        <div style="
                            width: 3px;
                            height: 19px;
                            opacity: 1;
                            background: rgba(100, 195, 164, 1);
                            margin-right: 12px;
                            "></div>
                        <span>设施农业遥感数据面积占比</span>
                        <p @click="" v-if="false">
                            下载 &nbsp;
                            <img src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer" />
                        </p>
                    </div>

                    <!-- 饼图 -->
                    <div class="Zanbi">
                        <EchartsZB :zb="zb"></EchartsZB>
                    </div>


                </div>

                <!-- 高标准农田 -->
                <div style="width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;"
                    v-if="taberValue == 1">

                    <!-- 标题 -->
                    <div class="title">
                        <div style="
                            width: 3px;
                            height: 19px;
                            opacity: 1;
                            background: rgba(100, 195, 164, 1);
                            margin-right: 12px;
                            "></div>
                        <span>高标准农田</span>
                        <p @click="handleDownHNT">
                            下载 &nbsp;
                            <img src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer" />
                        </p>
                    </div>

                    <!-- 高标准农田 图表 -->
                    <div class="heightNT">
                        <EchartsHNT :heightArr="heightArr"></EchartsHNT>
                    </div>

                </div>


            </div>

            <!-- 抽屉开关 盒子 点击事件 -->
            <div class="RightBoxTool" @click="showRightBox">

                <el-tooltip class="box-item" effect="light" content="收起" placement="top-end">
                    <img src="@/assets/images/shouhuis.png" style="width: 100%; height: 100%;" alt="" v-if="flag">
                </el-tooltip>


                <el-tooltip class="box-item" effect="light" content="展开" placement="top-end">
                    <img src="@/assets/images/zhankaiss.png" style="width: 100%; height: 100%;" alt="" v-if="!flag">
                </el-tooltip>

            </div>
        </div>

        <!-- 时间线 盒子 -->
        <div class="bottom_center">
            <TimeLine2 :nowValue="nowValue" :yearArr="yearArr" @handleNowValueChange="handleNowValueChange"></TimeLine2>
        </div>
    </div>
</template>

<script setup>
// vue
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, ref, toRefs, watch, watchEffect, nextTick, toRef, computed, } from 'vue';

// 标记 设施农业遥感数据接口
import { getSsnyygsj, getSsnyygsjHeith, getSsnyygsjZb, getSsnyygsjhqqbz, getSsnyygsjhqqbzChun, getSsnyygsjChun } from '@/api/plough/ssnyygsj.js'

// 组件 注意拼写问题
// import TimeLine from '@/components/TimeLine/TimeLine.vue';
import TimeLine2 from './components/TimeLine2.vue';
import EchartsMJ from './components/EchartsMJ.vue';
import EchartsHNT from './components/EchartsHNT.vue';
import EchartsZB from './components/EchartsZB.vue';

// 下载
import { downLoadFile } from '@/utils/download.js';

// 重要配置项
window.CESIUM_BASE_URL =
    "../../../../node_modules/cesium/Build/CesiumUnminified/";

// 地图服务 http://27.223.102.23:9010/iserver/services/data-sheshinongye-2024-5-30/rest

// 变量

// ol -----------------------------------------------------------------------
var map = null;

// 控制村级矢量图层
var layers = null;

const mapElement = ref(null)


// --------------------------------------------------------------------------
// 右侧抽屉变量
let flag = ref(false)

// taber 变量
let taberValue = ref(0)

// 下拉选择 变量
const value = ref('370211')
// 下拉选择 数据变量
const options = ref([]);

// 有关时间线 变量
let nowValue = ref('');
let yearArr = ref([]);

// 高标准农田
let heightArr = ref([]);

//面积 
let mj = ref([]);
// 占比
let zb = ref([]);

// 
let ShiJian = ref('');

// 函数

// 开关函数
const showRightBox = () => {
    console.log('点击了抽屉');
    flag.value = !flag.value
}

// 改变nowValue 重要函数
const handleNowValueChange = (val) => {
    console.log('时间线改变', val);
    nowValue.value = val;
}

// 下载 面积  （无占比）
const handleDownMJ = () => {

    if (value.value == '370211') {
        getSsnyygsjhqqbz({
            yearMonth: nowValue.value,
            whetherToDownload: true
        }).then(res => {
            downLoadFile(res.data[res.data.length - 1].downloadPath);
        });
    } else {
        getSsnyygsjhqqbzChun({
            divisions: value.value,
            yearMonth: nowValue.value,
            whetherToDownload: true,
        }).then(res => {
            downLoadFile(res.data[res.data.length - 1].downloadPath);
        });
    }

}

// 下载 高标准农田
const handleDownHNT = () => {
    getSsnyygsjHeith({
        divisions: '370211',
        yearMonth: ShiJian.value,
        whetherToDownload: true,
    }).then(res => {
        downLoadFile(res.data[res.data.length - 1].downloadPath);
    });
};

// 地图服务------------------------------------------------------------------------------------

// 标记
//加载随时间变量变化的矢量图层 测试没有问题
function addTimerLayer() {
    // 
    try {

        let layer1 = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: serverAPI.geoserverUrl + `/map-sheshinongye-2024-5-30/rest/maps/T2024_05_29_sheshinongye%40sheshinongye-2024-5-30`,
                cacheEnabled: false,
            }),
            name: 'T2024_05_29_sheshinongye',
            projection: 'EPSG:4326', //3857
            zIndex: 99999,
        });
        map.addLayer(layer1);

    } catch (error) {

        console.log(error, '错误');

    }

}


const cun = () => {
    layers = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
            cacheEnabled: false,
        }),
        name: 'CJQY3702112019WGS84',
        projection: 'EPSG:4326', //3857
        zIndex: 9999,
    });
    map.addLayer(layers);
};
const zhen = () => {
    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
            cacheEnabled: false,
        }),
        name: 'XJQY3702112019WGS84',
        projection: 'EPSG:4326', //3857
        zIndex: 9999,
    });
    map.addLayer(layer);
};


// openlayers try
function initMap() {
    map = new ol.Map({
        target: mapElement.value,
        controls: [],
        view: new ol.View({
            center: [119.86763411957472, 35.88435182141938],
            zoom: 11,
            // 设置最大缩放级别
            maxZoom: 16.5,
            projection: 'EPSG:4326',
        }),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: `${serverAPI.tiandituLayers}`,
                    projection: serverAPI.flag ? 'EPSG:4326' : 'EPSG:3857',
                }),
                preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
            }),
        ],
    });

    cun();
    zhen();

    //滚轮控制村级矢量
    map.on('moveend', function (e) {
        var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
        if (zoom >= 13) {
            layers.setVisible(true); //显示图层
        } else {
            layers.setVisible(false);
        }
    });
}

// -----------------------------------------------------------------------------------------------

//监听
watch(nowValue, (newValue, oldValue) => {
    console.log(newValue, oldValue, '我是父组件');
})

// watch(value, (newValue, oldValue) => {
//     console.log(newValue, oldValue, '监听下拉框');
// })
watchEffect(async () => {
    // 
    console.log(value.value, nowValue.value, '监听下拉框 和 当前时间变化');

    if (value.value == '370211') {

        // 获取全部镇
        const QuanBuZhen = await getSsnyygsjhqqbz({ divisions: value.value, yearMonth: nowValue.value, });

        console.log(QuanBuZhen.data, '获取全部镇');

        mj.value = QuanBuZhen.data;
        zb.value = QuanBuZhen.data;
    } else {
        console.log(value.value);
        // 根据街道 获取全部村
        const QuanBuCun = await getSsnyygsjhqqbzChun({ divisions: value.value, yearMonth: nowValue.value, });

        console.log(QuanBuCun.data, '根据街道 获取全部村');
        mj.value = QuanBuCun.data;
        zb.value = QuanBuCun.data;
    }

})


// 生命周期
// Dom挂载前
onBeforeMount(async () => {

    try {

        // 获取年
        const res1 = await getSsnyygsj();

        console.log(res1, '获取年');

        if (res1.data.length > 0 && res1.code == 200) {
            yearArr.value = res1.data;
            // 默认值
            nowValue.value = res1.data[0];
        }

        // 使高标准农田的时间为 "res1.data" 中的最后一项
        let i = res1.data[res1.data.length - 1];

        ShiJian.value = i;


        // 获取高标准农田
        const res2 = await getSsnyygsjHeith({ divisions: '370211', yearMonth: i, whetherToDownload: '' });

        console.log(res2, '获取高标准农田');

        if (res2.data.length > 0 && res2.code == 200) {
            heightArr.value = res2.data;
        }

        // 获取全部镇
        const res3 = await getSsnyygsjhqqbz();

        console.log(res3, '获取全部镇');

        // 为下拉框赋值
        if (res3.data.length > 0 && res3.code == 200) {
            options.value = res3.data.map((item) => {
                return {
                    value: item.subregionCode,
                    label: item.subregionName,
                };
            });
        }

        // 
        // getSsnyygsjZb({ divisions: '370211', yearMonth: nowValue.value, }).then((res) => { //可选参数二 divisions yearMonth

        //     console.log(res, '占比情况');

        //     // zb.value = res.data;

        // })



        // 注释两者 区别不明

        // getSsnyygsjhqqbzChun().then((res)=>{ //必选参数一 divisions 可选参数二 whetherToDownload yearMonth

        //     console.log(res,'根据镇获取全部村');

        // })

        // 讨论 不做处理
        // getSsnyygsjChun().then((res)=>{ //必选参数一 divisions 可选参数二 whetherToDownload yearMonth

        //     console.log(res,'获取村');

        // })

    } catch (err) {

        console.log(err);

    }

})
// Dom挂载后
onMounted(() => {

    initMap();
    addTimerLayer();

})

// 页面销毁前
onBeforeUnmount(() => {

    console.log('销毁实例和事件');

})

</script>

<style lang="scss" scoped>
.PageBox {

    user-select: none;

    width: 100%;
    height: 100%;

    position: relative;

    #CesiumJsBox {
        position: absolute;
        left: 0px;
        top: 0px;

        width: 100%;
        height: 100%;

        z-index: 0;
    }

    // 抽屉 展开样式
    .RightBox {
        width: 23%;
        height: 100%;

        background-color: white;

        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 1;

        transition: all 0.8s;

        .RightBoxContent {
            width: 100%;
            height: 100%;

            overflow-y: scroll;

            // display: flex;
            // flex-direction: column;
            // justify-content: flex-start;
            // align-items: center;

            .taber {
                width: 100%;
                height: auto;

                font-size: 12px;

                display: flex;
                justify-content: space-around;
                align-items: center;

                margin: 10px 0px;

                .TaberChild {
                    width: 150px;
                    height: 30px;

                    text-align: center;
                    line-height: 30px;

                    background: rgba(255, 255, 255, 1);
                    border-radius: 4px;
                    border: 1px solid rgba(100, 195, 164, 1);
                    color: rgba(100, 195, 164, 1);
                }

                .TaberChild_Activit {
                    width: 150px;
                    height: 30px;

                    text-align: center;
                    line-height: 30px;

                    border-radius: 4px;
                    background: rgba(100, 195, 164, 1);
                    border: 1px solid rgba(100, 195, 164, 1);
                    color: rgba(255, 255, 255, 1);
                }
            }

            .title {
                width: 90%;
                margin: 15px;
                height: 37px;
                border-radius: 3px 3px, 0px, 0px;
                background: linear-gradient(90deg,
                        rgba(208, 245, 233, 1) 0%,
                        rgba(255, 255, 255, 1) 100%);
                font-size: 18px;
                font-weight: 700;
                line-height: 37px;
                padding-left: 16px;
                display: flex;
                align-items: center;
                cursor: pointer;

                span {
                    width: 95%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 16px;
                    font-weight: 700;
                    color: rgba(51, 51, 51, 1);
                    background-clip: text;
                    -webkit-background-clip: text;
                }

                p {
                    width: 79px;
                    height: 25px;
                    border-radius: 20px;
                    font-size: 14px;
                    border-radius: 4px;
                    background: rgba(100, 195, 164, 1);
                    display: flex;
                    color: rgba(255, 255, 255, 1);
                    justify-content: center;
                    align-items: center;
                }
            }

            .ManJi {
                width: 95%;
                height: 300px;

                // margin: 30px 0px;
            }

            .Zanbi {
                width: 95%;
                height: 300px;
            }

            .heightNT {
                width: 95%;
                height: 360px;

                // margin: 30px 0px;
            }
        }

        .RightBoxContent::-webkit-scrollbar {
            width: 10px;
            height: 16px;
            background-color: #f5f5f5;
        }

        .RightBoxTool {
            width: 25px;
            height: 120px;
            // background-color: white;

            // border-radius: 50% 0 0 50%;

            position: absolute;
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
        }

    }

    // 抽屉 收起样式
    .RightBoxFlag {
        width: 23%;
        height: 100%;

        background-color: white;

        position: absolute;
        right: -23%;
        top: 0px;
        z-index: 1;

        transition: all 0.8s;

        .RightBoxContent {
            width: 100%;
            height: 100%;

            overflow-y: scroll;

            .taber {
                width: 100%;
                height: auto;

                font-size: 12px;

                display: flex;
                justify-content: space-around;
                align-items: center;

                margin: 10px 0px;

                .TaberChild {
                    width: 160px;
                    height: 30px;

                    text-align: center;
                    line-height: 30px;

                    background: rgba(255, 255, 255, 1);
                    border-radius: 4px;
                    border: 1px solid rgba(100, 195, 164, 1);
                    color: rgba(100, 195, 164, 1);
                }

                .TaberChild_Activit {
                    width: 160px;
                    height: 30px;

                    text-align: center;
                    line-height: 30px;

                    border-radius: 4px;
                    background: rgba(100, 195, 164, 1);
                    border: 1px solid rgba(100, 195, 164, 1);
                    color: rgba(255, 255, 255, 1);
                }
            }

            .title {
                width: 90%;
                margin: 15px;
                height: 37px;
                border-radius: 3px 3px, 0px, 0px;
                background: linear-gradient(90deg,
                        rgba(208, 245, 233, 1) 0%,
                        rgba(255, 255, 255, 1) 100%);
                font-size: 18px;
                font-weight: 700;
                line-height: 37px;
                padding-left: 16px;
                display: flex;
                align-items: center;
                cursor: pointer;

                span {
                    width: 95%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 16px;
                    font-weight: 700;
                    color: rgba(51, 51, 51, 1);
                    background-clip: text;
                    -webkit-background-clip: text;
                }

                p {
                    width: 79px;
                    height: 25px;
                    border-radius: 20px;
                    font-size: 14px;
                    border-radius: 4px;
                    background: rgba(100, 195, 164, 1);
                    display: flex;
                    color: rgba(255, 255, 255, 1);
                    justify-content: center;
                    align-items: center;
                }
            }

            .ManJi {
                width: 95%;
                height: 300px;

                // margin: 30px 0px;
            }

            .Zanbi {
                width: 95%;
                height: 300px;
            }

            .heightNT {
                width: 95%;
                height: 360px;

                // margin: 30px 0px;
            }
        }

        .RightBoxContent::-webkit-scrollbar {
            width: 5px;
            height: 16px;
            background-color: #f5f5f5;



        }

        .RightBoxTool {
            width: 25px;
            height: 120px;
            // background-color: white;

            // border-radius: 50% 0 0 50%;

            position: absolute;
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
        }

    }

    // 时间线
    .bottom_center {
        position: absolute;
        // left: calc(400px + 20px + 8vw);
        left: -2%;
        right: 0;
        margin: auto;
        width: 570px;
        min-width: 380px;
        bottom: 8%;
        height: 75px;
        // 
        opacity: 1;
        border-radius: 5px;
        background: rgba(2, 31, 26, 0.6);
        border: 1px solid rgba(4, 153, 153, 1);
        // background: rgba(2, 31, 26, 0.6);
        // border: 1px solid rgba(4, 153, 153, 1);
    }

}
</style>