<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('植被和气候要素变化趋势')" :class="{'active': currentTab === '植被和气候要素变化趋势'}">
            植被和气候要素变化趋势
            <img src="/images/line.png" v-if="currentTab === '植被和气候要素变化趋势'" />
        </div>
        <div class="tab-item" @click="onTabClick('植被和气候要素的监测')" :class="{'active': currentTab === '植被和气候要素的监测'}">
            植被和气候要素的监测
            <img src="/images/line.png" v-if="currentTab === '植被和气候要素的监测'" />
        </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 === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'">
                <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 === '植被和气候要素的监测'"><span @click="onCategoryClick('土地覆盖类型')" :class="{'active': currentCategory === '土地覆盖类型'}">土地覆盖类型</span></el-col>
                </el-row>
            </div>
            <div class="menu-item" v-if="currentTab === '植被和气候要素的监测'">
                <h2 class="tip">时间点选择</h2>
                <el-row :gutter="12">
                    <el-col :span="24"><span @click="onTimeClick('地表温度（01:30）')" :class="{'active': currentTime === '地表温度（01:30）'}">地表温度（01:30）</span></el-col>
                    <el-col :span="24"><span @click="onTimeClick('地表温度（10:30）')" :class="{'active': currentTime === '地表温度（10:30）'}">地表温度（10:30）</span></el-col>
                    <el-col :span="24"><span @click="onTimeClick('地表温度（13:30）')" :class="{'active': currentTime === '地表温度（13:30）'}">地表温度（13:30）</span></el-col>
                    <el-col :span="24"><span @click="onTimeClick('地表温度（13:30）')" :class="{'active': currentTime === '地表温度（22:30）'}">地表温度（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 === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'">
                <div class="surface-temperature" v-if="currentTab === '植被和气候要素变化趋势'">
                    <span @click="onSurfaceTemperatureClick('地表温度（01:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（01:30）'}">地表温度（01:30）</span>
                    <span @click="onSurfaceTemperatureClick('地表温度（10:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（10:30）'}">地表温度（10:30）</span>
                    <span @click="onSurfaceTemperatureClick('地表温度（13:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（13:30）'}">地表温度（13:30）</span>
                    <span @click="onSurfaceTemperatureClick('地表温度（22:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（22:30）'}">地表温度（22:30）</span>
                </div>
                <div class="surface-temperature" v-if="currentTab === '植被和气候要素的监测'">
                    <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('多年平均值2000-2020')" :class="{'active': currentYear === '多年平均值2000-2020'}">多年平均值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">
                        <h2 class="title">地表温度（01:30）</h2>
                        <el-image
                        :src="imgUrl"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="8">
                        <h2 class="title">地表温度（10:30）</h2>
                        <el-image
                        src="/images/picture2.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="8">
                        <h2 class="title">地表温度（13:30）</h2>
                        <el-image
                        src="/images/picture1.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="8">
                        <h2 class="title">地表温度（22:30）</h2>
                        <el-image
                        src="/images/picture1.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="8">
                        <h2 class="title">反照率</h2>
                        <el-image
                        src="/images/picture1.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="8">
                        <h2 class="title">蒸散发</h2>
                        <el-image
                        src="/images/picture1.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                </el-row>
            </div>
            <div class="picture-view multi-picture-view" v-if="currentTab === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'">
                <el-row :gutter="0">
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                    <el-col :span="4">
                        <el-image
                        src="/images/picture3.png"
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { onMounted, reactive, toRefs } from 'vue';
    import { format } from '../hooks/String';
    import * as Tiff from 'browser-tiff.js';
    import { SynergyEvaluationConfig } from '../hooks/Config';
    
    export default {
        name: 'SynergyEvaluation',
        setup() {
            let options = reactive({
                currentTab: 'plant-change',
                currentElement: 'NDVI',
                currentCategory: '地表温度LST',
                currentTime: '地表温度（01:30）',
                currentYear: '2000',
                currentSurfaceTemperatureTime: '地表温度（01:30）',
                srcList: [],
                imgUrl: null,
                imgUrls: [],
                items: [{
                    //'地表温度（10:30）', '地表温度（13:30）', '地表温度（22:30）', '反照率', '蒸散发',
                    title: '地表温度（01:30）',
                    type: 'temperature0130'
                }]
            })

            onMounted(() => {
                setImage();
            })

            const setImage = () => {
                initImage(options.currentTab, options.currentElement, 'temperature0130');
                initImage(options.currentTab, options.currentElement, 'temperature1030');
                initImage(options.currentTab, options.currentElement, 'temperature1330');
                initImage(options.currentTab, options.currentElement, 'temperature2230');
                initImage(options.currentTab, options.currentElement, 'albedo');
                initImage(options.currentTab, options.currentElement, 'evaporation');

                for (let i = 0; i < options.items.length; i++) {
                    initImage(options.currentTab, options.currentElement, 'temperature0130');
                }
            }

            const initImage = (tabName, elementName, type) => {
                var xhr = new XMLHttpRequest();
                xhr.responseType = 'arraybuffer';
                xhr.open('GET', SynergyEvaluationConfig.getUrl(tabName, elementName, type));
                xhr.onload = function (e) {
                    let tiff = new Tiff({buffer: xhr.response});
                    let canvas = tiff.toCanvas();
                    let image = new Image();
                    image.src = canvas.toDataURL("image/png");
                    options.imgUrl = image.src;
                    options.srcList = [image.src];
                };
                xhr.send();
            }
            
            const onTabClick = (name) => {
                options.currentTab = name;
            }

            const onElementClick = (element) => {
                options.currentElement = element;
            }

            const onCategoryClick = (category) => {
                options.currentCategory = category;
            }

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

            const onSurfaceTemperatureClick = (value) => {
                options.currentSurfaceTemperatureTime = value;
            }

            const onYearClick = (year) => {
                options.currentYear = year;
            }

            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 {
                height: 100%;
                display: flex;
                :deep(.el-row) {
                    .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;
                        }
                    }
                }
            }
            .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;
                        }

                        &: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>
