<template>
    <div class="tabs">
        <div class="tab-item" @click="onTabClick('plant-change')" :class="{'active': currentTab === 'plant-change'}">
            植被变化对气候的影响
            <img src="/images/line.png" v-if="currentTab === 'plant-change'" />
        </div>
        <div class="tab-item" @click="onTabClick('plant-distribute')" :class="{'active': currentTab === 'plant-distribute'}">
            植被分布对气候的影响
            <img src="/images/line.png" v-if="currentTab === 'plant-distribute'" />
        </div>
        <div class="tab-item" @click="onTabClick('element-change-trend')" :class="{'active': currentTab === 'element-change-trend'}">
            植被和气候要素变化趋势
            <img src="/images/line.png" v-if="currentTab === 'element-change-trend'" />
        </div>
        <div class="tab-item" @click="onTabClick('element-monitor')" :class="{'active': currentTab === 'element-monitor'}">
            植被和气候要素的监测
            <img src="/images/line.png" v-if="currentTab === 'element-monitor'" />
        </div>
    </div>
    <div class="main">
        <div class="menu panel">
            <div class="menu-item" v-if="currentTab === 'plant-change' || currentTab === 'plant-distribute'">
                <h2 class="tip">要素选择</h2>
                <el-row :gutter="12">
                    <el-col :span="24"><span @click="onElementClick('NDVI')" :class="{'active': currentElement === 'NDVI'}">归一化植被指数NDVI</span></el-col>
                    <el-col :span="24"><span @click="onElementClick('LAI')" :class="{'active': currentElement === 'LAI'}">叶面积指数LAI</span></el-col>
                    <el-col :span="24"><span @click="onElementClick('EVI')" :class="{'active': currentElement === 'EVI'}">增强植被指数EVI</span></el-col>
                </el-row>
            </div>
            <div class="menu-item" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'">
                <h2 class="tip">要素选择</h2>
                <el-row :gutter="12">
                    <el-col :span="24"><span @click="onCategoryClick('LST')" :class="{'active': currentCategory === 'LST'}">地表温度LST</span></el-col>
                    <el-col :span="24"><span @click="onCategoryClick('LAI')" :class="{'active': currentCategory === 'LAI'}">叶面积指数LAI</span></el-col>
                    <el-col :span="24"><span @click="onCategoryClick('EVI')" :class="{'active': currentCategory === 'EVI'}">增强植被指数EVI</span></el-col>
                    <el-col :span="24"><span @click="onCategoryClick('NDVI')" :class="{'active': currentCategory === 'NDVI'}">归一化植被指数NDVI</span></el-col>
                    <el-col :span="24"><span @click="onCategoryClick('Albedo')" :class="{'active': currentCategory === 'Albedo'}">反照率Albedo</span></el-col>
                    <el-col :span="24"><span @click="onCategoryClick('Evapotranspiration')" :class="{'active': currentCategory === 'Evapotranspiration'}">蒸散发Evapotranspiration</span></el-col>
                    <el-col :span="24" v-if="currentTab === 'element-monitor'"><span @click="onCategoryClick('土地覆盖类型')" :class="{'active': currentCategory === '土地覆盖类型'}">土地覆盖类型</span></el-col>
                </el-row>
            </div>
            <div class="menu-item" v-if="currentTab === 'element-monitor'">
                <h2 class="tip">时间点选择</h2>
                <el-row :gutter="12">
                    <el-col :span="24"><span @click="onTimeClick('time0130')" :class="{'active': currentTime === 'time0130'}">地表温度（01:30）</span></el-col>
                    <el-col :span="24"><span @click="onTimeClick('time1030')" :class="{'active': currentTime === 'time1030'}">地表温度（10:30）</span></el-col>
                    <el-col :span="24"><span @click="onTimeClick('time1330')" :class="{'active': currentTime === 'time1330'}">地表温度（13:30）</span></el-col>
                    <el-col :span="24"><span @click="onTimeClick('time2230')" :class="{'active': currentTime === 'time2230'}">地表温度（22:30）</span></el-col>
                </el-row>
            </div>
        </div>
        <div class="container panel synergy-container">
            <span class="save-btn" ><img src="/images/save.png" /></span>
            <div class="element-select" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'">
                <div class="surface-temperature" v-if="currentTab === 'element-change-trend'">
                    <span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度（01:30）</span>
                    <span @click="onSurfaceTemperatureClick('time1030')" :class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度（10:30）</span>
                    <span @click="onSurfaceTemperatureClick('time1330')" :class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度（13:30）</span>
                    <span @click="onSurfaceTemperatureClick('time2230')" :class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度（22:30）</span>
                </div>
                <div class="surface-temperature" v-if="currentTab === 'element-monitor'">
                    <span @click="onYearClick('2000')" :class="{'active': currentYear === '2000'}">2000</span>
                    <span @click="onYearClick('2001')" :class="{'active': currentYear === '2001'}">2001</span>
                    <span @click="onYearClick('2002')" :class="{'active': currentYear === '2002'}">2002</span>
                    <span @click="onYearClick('2003')" :class="{'active': currentYear === '2003'}">2003</span>
                    <span @click="onYearClick('2004')" :class="{'active': currentYear === '2004'}">2004</span>
                    <span @click="onYearClick('2005')" :class="{'active': currentYear === '2005'}">2005</span>
                    <span @click="onYearClick('2006')" :class="{'active': currentYear === '2006'}">2006</span>
                    <span @click="onYearClick('2007')" :class="{'active': currentYear === '2007'}">2007</span>
                    <span @click="onYearClick('2008')" :class="{'active': currentYear === '2008'}">2008</span>
                    <span @click="onYearClick('2009')" :class="{'active': currentYear === '2009'}">2009</span>
                    <span @click="onYearClick('2010')" :class="{'active': currentYear === '2010'}">2010</span>
                    <span @click="onYearClick('2011')" :class="{'active': currentYear === '2011'}">2011</span>
                    <span @click="onYearClick('2012')" :class="{'active': currentYear === '2012'}">2012</span>
                    <span @click="onYearClick('2013')" :class="{'active': currentYear === '2013'}">2013</span>
                    <span @click="onYearClick('2014')" :class="{'active': currentYear === '2014'}">2014</span>
                    <span @click="onYearClick('2015')" :class="{'active': currentYear === '2015'}">2015</span>
                    <span @click="onYearClick('2016')" :class="{'active': currentYear === '2016'}">2016</span>
                    <span @click="onYearClick('2017')" :class="{'active': currentYear === '2017'}">2017</span>
                    <span @click="onYearClick('2018')" :class="{'active': currentYear === '2018'}">2018</span>
                    <span @click="onYearClick('2019')" :class="{'active': currentYear === '2019'}">2019</span>
                    <span @click="onYearClick('2020')" :class="{'active': currentYear === '2020'}">2020</span>
                    <span @click="onYearClick('multi-years')" :class="{'active': currentYear === 'multi-years'}">多年平均值2000-2020</span>
                </div>
            </div>
            <div class="picture-view synergy-picture-view" v-if="currentTab === 'plant-change' || currentTab === 'plant-distribute'">
                <el-row :gutter="0">
                    <el-col :span="8" v-for="(item, index) in items" :key="index">
                        <h2 class="title">{{item.title}}</h2>
                        <el-image
                        :src="item.imgUrl"
                        :preview-src-list="item.preview"
                        :initial-index="0"
                        fit="contain"
                        >
                            <template #error>
                                <div class="image-slot">
                                    <img src="/images/null-picture.png" />
                                </div>
                                <p class="image-tip">暂无图片</p>
                            </template>
                            <template #placeholder>
                                <div class="image-placeholder">正在加载...</div>
                            </template>
                        </el-image>
                    </el-col>
                </el-row>
            </div>
            <div class="picture-view multi-picture-view" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'">
                <el-row :gutter="0">
                    <el-col :span="4" v-for="(item, index) in trendItems" :key="index">
                        <el-image
                        :src="item.imgUrl"
                        :preview-src-list="item.preview"
                        :initial-index="0"
                        fit="contain"
                        >
                            <template #error>
                                <div class="image-slot">
                                    <img src="/images/null-picture.png" />
                                </div>
                                <p class="image-tip">暂无图片</p>
                            </template>
                            <template #placeholder>
                                <div class="image-placeholder">正在加载...</div>
                            </template>
                        </el-image>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { onMounted, reactive, toRefs } from 'vue';
    import { format } from '../uilts/String';
    import * as Tiff from 'browser-tiff.js';
    import { SynergyEvaluationConfig } from '../uilts/Config';
import { post } from '../uilts/axios';
    
    export default {
        name: 'SynergyEvaluation',
        setup() {
            let options = reactive({
                currentTab: 'plant-change',
                currentElement: 'NDVI',
                currentCategory: 'LST',
                currentTime: 'time0130',
                currentYear: '2000',
                currentSurfaceTemperatureTime: 'time0130',
                srcList: [],
                imgUrl: '/images/default-picture.png',
                imgUrls: [],
                items: [{
                    title: '地表温度（01:30）',
                    type: 'temperature0130',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    title: '地表温度（10:30）',
                    type: 'temperature1030',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    title: '地表温度（13:30）',
                    type: 'temperature1330',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    title: '地表温度（22:30）',
                    type: 'temperature2230',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    title: '反照率',
                    type: 'albedo',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    title: '蒸散发',
                    type: 'evaporation',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }],
                trendItems: [{
                    type: 'month_01',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_02',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_03',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_04',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_05',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_06',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_07',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_08',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_09',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_10',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_11',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }, {
                    type: 'month_12',
                    imgUrl: '/images/default-picture.png',
                    preview: []
                }]
            })

            onMounted(() => {
                setImage(6, options.items, options.currentElement);
            })

            const setImage = (number, values, element) => {
                for(let index = 0; index < number; index ++){
                    initImage(options.currentTab, element, values[index].type, index, values);
                }
            }

            const initImage = (tabName, elementName, type, index, values) => {
                post("/image/convert", {url: SynergyEvaluationConfig.getUrl(tabName, elementName, type)}).then((response: any) => {
                    if (response.error != 0){
                        console.log("发生错误")
                        return;
                    }

                    values[index].imgUrl = response.data;
                    values[index].preview = [response.data];
                })
            }
            
            const onTabClick = (name) => {
                options.currentTab = name;

                if(options.currentTab === 'plant-change' || options.currentTab === 'plant-distribute')
                    setImage(6, options.items, options.currentElement);
                else if(options.currentTab === 'element-change-trend')
                    setImage(12, options.trendItems, options.currentCategory + '/' + options.currentSurfaceTemperatureTime);
                else 
                    setImage(12, options.trendItems, options.currentCategory + '/' + options.currentTime + '/' + options.currentYear);
            }

            const onElementClick = (element) => {
                options.currentElement = element;
                setImage(6, options.items, options.currentElement);
            }

            const onCategoryClick = (category) => {
                options.currentCategory = category;
                if(options.currentTab === 'element-change-trend')
                    setImage(12, options.trendItems, options.currentCategory + '/' + options.currentSurfaceTemperatureTime);
                else 
                    setImage(12, options.trendItems, options.currentCategory + '/' + options.currentTime + '/' + options.currentYear);
            }

            const onTimeClick = (time) => {
                options.currentTime = time;
            }

            const onSurfaceTemperatureClick = (value) => {
                options.currentSurfaceTemperatureTime = value;
                setImage(12, options.trendItems, options.currentCategory + '/' + options.currentSurfaceTemperatureTime);
            }

            const onYearClick = (year) => {
                options.currentYear = year;
                setImage(12, options.trendItems, options.currentCategory + '/' + options.currentTime + '/' + options.currentYear);
            }

            return {
                ...toRefs(options),
                onTabClick,
                onElementClick,
                onCategoryClick,
                onSurfaceTemperatureClick,
                onYearClick,
                onTimeClick,
            }
        }
    }
</script>
<style lang="less" scoped>
    .main {
        .synergy-container {
            height: calc(~"100% - 0.6rem");
            padding: 0.2rem 0 0.2rem 0.2rem;
            .synergy-picture-view {
                width: 100%;
                height: 100%;
                display: flex;
                :deep(.el-row) {
                    width: 100%;
                    .title {
                        padding: 0;
                        font-size: 0.22rem;
                    }
                    .el-col {
                        height: 46%;
                        margin-top: 1%;
                        text-align: center;
                        .el-image {
                            height: calc(~"100% - 0.4rem");
                            margin-top: 0.1rem;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            background-color: #ffffff;
                            .image-slot {
                                margin-top: 0;
                            }
                        }
                    }
                }
            }
            .multi-picture-view {
                height: calc(~"100% - 0.76rem");
                .el-row {
                    height: 100%;
                    .el-col {
                        max-width: calc(~"(100% / 6) - 0.2rem");
                        height: 50%;
                        margin: 0.2rem 0.2rem 0 0;
                        border: 1px solid #666666;
                        .el-image {
                            height: 100%;
                            display: flex;
                            align-items: center;
                            flex-direction: column;
                            justify-content: center;
                        }

                        &:nth-of-type(6n) {
                            margin-right: 0;
                        }
                    }
                }
            }
            .element-select {
                position: relative;
                .surface-temperature {
                    display: flex;
                    align-items: center;
                    border-left: 1px solid #498DF0;
                    
                    span {
                        height: 0.34rem;
                        padding: 0 0.1rem;
                        text-align: center;
                        line-height: 0.34rem;
                        border: 1px solid #498DF0;
                        border-left: 0;
                        cursor: pointer;

                        &.active {
                            color: #ffffff;
                            background-color: #498DF0;
                        }
                    }
                }
            }
            .save-btn {
                right: 0.2rem;
                top: 0.2rem;
            }
        }
    }
</style>
