<template>
    <div class="base-container">
        <div class="select-group box-wrap">
            <el-row :gutter="24" align="bottom">
                <el-col :span="4">
                    <div class="select-parameter">
                        <div class="select-name">Parameter</div>
                        <el-select v-model="parameterVal" size="large" placeholder="Select" style="width: 100%">
                            <el-option
                                v-for="item in parameterOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="select-parameter">
                        <div class="select-name">Plantation Group</div>
                        <el-select v-model="plantationVal" size="large" placeholder="Select" style="width: 100%">
                            <el-option
                                v-for="item in plantationOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="select-parameter">
                        <div class="select-name">Wilayah</div>
                        <el-select v-model="wilayahVal" size="large" placeholder="Select" style="width: 100%">
                            <el-option
                                v-for="item in wilayahOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="9">
                    <div class="select-name">Date Range</div>
                    <el-date-picker
                        size="large"
                        v-model="dateValue"
                        type="daterange"
                        style="width: 90%"
                        start-placeholder="Start date"
                        end-placeholder="End date"
                    />
                </el-col>
                <el-col :span="3">
                    <div class="main-btn">Search</div>
                </el-col>
            </el-row>
        </div>
        <div class="box-wrap map-group">
            <el-row :gutter="16">
                <el-col :span="8" v-for="(item,index) in mapData" :key="index">
                    <div class="map-box">
                        <map-item :key="index" :mapData="item.pointArr"></map-item>
                        <div class="big-icon" @click="toggleMapPopup(item.name,index)">
                            <img src="@/assets/images/home/big-icon.png" alt="" />
                        </div>
                    </div>
                    <div class="map-text">{{item.name}}</div>
                </el-col>
            </el-row>
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="Summary" name="first">
                <common-box class="box-wrap" name="PG Peformance Summary">
                    <div class="top-chart">
                        <pie-chart class="pie-chart" styleName="styleName1" :pieData="pieData1"></pie-chart>
                        <pie-chart class="pie-chart" styleName="styleName1" :pieData="pieData2"></pie-chart>
                        <pie-chart class="pie-chart" styleName="styleName1" :pieData="pieData3"></pie-chart>
                    </div>
                </common-box>
                <common-box class="box-wrap" name="Top Worst Population">
                    <div class="bottom-chart">
                        <div class="bar-chart-box">
                            <span class="bar-name">PG1</span>
                            <bar-chart class="bar-chart" styleName="styleName1" :xData="xData" :yData="yData"></bar-chart>
                        </div>
                        <div class="bar-chart-box">
                            <span class="bar-name">PG2</span>
                            <bar-chart class="bar-chart" styleName="styleName1" :xData="xData" :yData="yData"></bar-chart>
                        </div>
                        <div class="bar-chart-box">
                            <span class="bar-name">PG3</span>
                            <bar-chart class="bar-chart" styleName="styleName1" :xData="xData" :yData="yData"></bar-chart>
                        </div>
                    </div>
                </common-box>
            </el-tab-pane>
            <el-tab-pane label="Details" name="second">
                <div class="detail-page box-wrap">
                    <div class="tabs">
                        <div
                            class="tab-item"
                            :class="{ active: index === active }"
                            @click="handleActive(index)"
                            v-for="(item, index) in tabsList"
                            :key="index"
                        >
                            {{ item }}
                        </div>
                    </div>
                    <el-table class="table" :data="tableData" height="calc(100vh - 219px - 241px - 32px - 181px)">
                        <el-table-column prop="date" label="PG" />
                        <el-table-column prop="name" label="Wilayah" />
                        <el-table-column prop="address" label="Lokasi" />
                        <el-table-column prop="name" label="Luas（ha）" sortable />
                        <el-table-column prop="name" label="Luas Drone" sortable />
                        <el-table-column prop="name" label="Drone AI Counting" sortable />
                        <el-table-column prop="name" label="Populasi Per Ha" sortable />
                        <el-table-column prop="name" label="Achivement" sortable />
                    </el-table>
                    <el-pagination
                        class="pagination"
                        :page-size="20"
                        :pager-count="11"
                        layout="prev, pager, next"
                        :total="1000"
                    />
                </div>
            </el-tab-pane>
        </el-tabs>

        <popup class="map-popup" v-model:show="showMapPopup" round closeable>
            <div class="map-name" @click="toOverview">{{ showMapName }}</div>
            <map-item key="popup" ref="popupMap" :isPopup="true" @toSmall="toSmall" :mapData="mapData[mapIndex].pointArr"></map-item>
        </popup>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";
import mapItem from "../components/mapItem";
import commonBox from "@/components/commonBox";
import pieChart from "@/components/charts/pieChart";
import barChart from "@/components/charts/barChart";
import { Popup } from "vant";

const showMapPopup = ref(false);

const activeName = ref("first");

const handleClick = (tab, event) => {
    console.log(tab, event);
};

const active = ref(0);
const tabsList = ref(["ALL PG", "PG1", "PG2"]);
const handleActive = (index) => {
    active.value = index;
};

//饼图数据
const pieData1 = ref([
    {
            value: 91,
            name: "Total Locations",
            title:'PG1'
        },
        {
            value: 9,
            name: "Other",
        },
]);

const pieData2 = ref([
    {
            value: 93,
            name: "Total Locations",
            title:'PG2'
        },
        {
            value: 7,
            name: "Other",
        },
]);

const pieData3 = ref([
    {
            value: 89,
            name: "Total Locations",
            title:'PG3'
        },
        {
            value: 11,
            name: "Other",
        },
]);

//柱状图数据
const xData = ref();
const yData = ref([56, 78, 80,83,85]);
const mapData = ref([]);

onMounted(() => {
   setTimeout(() => {
       xData.value = ["Location01", "Location02", "Location03", "Location04", "Location05"]
   }, 1000)
    getPlotList()
});

const getPlotList = async () => {
    const {data} = await VE_API.home.plotList({limit:10,page:1})
    for (const item of data) {
        try {
            const result = await VE_API.home.locationList({ plantGroupId: item.id })
            mapData.value.push({
                name:item.name,
                pointArr:result.data
            })
        } catch (error) {
            console.error('请求失败:', error);
        }
    }
}

// 搜索
const parameterVal = ref(1);
const parameterOptions = ref([
    { label: "Plant Population", value: 1 },
    { label: "Flowering Rate", value: 2 },
    { label: "Plant Water Deficiencies", value: 3 },
]);
const plantationVal = ref(1);
const plantationOptions = ref([
    { label: "All", value: 1 },
    { label: "Plantation Group", value: 2 },
    { label: "Plantation Group2", value: 3 },
]);
const wilayahVal = ref(1);
const wilayahOptions = ref([
    { label: "All", value: 1 },
    { label: "Wilayah", value: 2 },
    { label: "Wilayah2", value: 3 },
]);

const dateValue = ref("");

//表格数据
const tableData = [
    {
        date: "PG1",
        name: "10.000",
        address: "10.200",
    },
    {
        date: "PG2",
        name: "10.000",
        address: "10.200",
    },
    {
        date: "PG3",
        name: "10.000",
        address: "10.200",
    },
    {
        date: "PG4",
        name: "10.000",
        address: "10.200",
    },
    {
        date: "PG5",
        name: "10.000",
        address: "10.200",
    },
];

const showMapName = ref(null)
const popupMap = ref(null)
const mapIndex = ref(0)
function toggleMapPopup(name,index) {
    showMapPopup.value = true
    showMapName.value = name
    mapIndex.value = index
    nextTick(()=>{
        popupMap.value.initData()
    })
}
function toOverview() {
    popupMap.value.initData()
}

const isSmallLayer = ref(false)
function toSmall(name) {
    isSmallLayer.value = true
    showMapName.value = name
}
</script>

<style lang="scss" scoped>
.base-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    .box-wrap {
        width: 100%;
        background: #fff;
        border-radius: 8px;
        padding: 16px 20px;
        box-sizing: border-box;
    }
    .box-wrap + .box-wrap {
        margin-top: 16px;
    }
    .select-group {
        .select-name {
            padding-bottom: 8px;
        }
        .main-btn {
            background: linear-gradient(#00dc59, #00c798);
            border-radius: 6px;
            padding: 9px 24px;
            color: #ffffff;
            font-size: 14px;
            text-align: center;
            width: 94px;
            box-sizing: border-box;
        }
        ::v-deep {
            .el-select__wrapper {
                background: #fafafa;
                box-shadow: 0 0 0 1px #dddddd inset;
                border-radius: 6px;
            }
            .el-select__placeholder {
                color: #000;
            }
            .el-select__caret {
                color: #000;
            }
            .el-date-editor.el-input__wrapper {
                box-shadow: 0 0 0 1px #dddddd inset;
                background: #fafafa;
            }
        }
    }
    .map-group{
        .map-box {
            height: 219px;
            position: relative;
            .big-icon {
                position: absolute;
                bottom: 10px;
                right: 11px;
                cursor: pointer;
            }
        }
        .map-text {
            padding-top: 10px;
            text-align: center;
        }
    }
    .demo-tabs {
        ::v-deep {
            .el-tabs__item.is-active,
            .el-tabs__item:hover {
                color: #00a342;
            }
            .el-tabs__active-bar {
                background: #00a342;
            }
        }
        .top-chart{
            height: 100px;
        }
        .bottom-chart{
            height: calc(100vh - 219px - 241px - 160px - 170px);
        }
        .top-chart,.bottom-chart{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .pie-chart,.bar-chart{
                width: 100%;
                height: 100%;
            }
        }
        .bar-chart-box{
            border: 1px solid #DDDDDD;
            border-radius: 8px;
            width: 33.33%;
            height: 100%;
            padding: 12px 14px;
            box-sizing: border-box;
            text-align: center;
            .bar-name{
                font-weight: 500;
                padding: 2px 16px;
                background: #F4F4F4;
                border-radius: 20px;
                margin-bottom: 6px;
                display: inline-block;
            }
            .bar-chart{
                width: 100%;
                height: calc(100% - 24px);
            }
        }
        .bar-chart-box + .bar-chart-box{
            margin-left: 14px;
        }
        .tabs {
            display: flex;
            align-items: center;
            .tab-item {
                color: #666666;
                padding: 4px 16px;
                cursor: pointer;
                &.active {
                    color: #00a342;
                    background: rgba(201, 245, 217, 0.6);
                    border-radius: 4px;
                }
            }
            .tab-item + .tab-item {
                margin-left: 12px;
            }
        }
        .detail-page {
            .table {
                margin-top: 20px;
                width: 100%;
            }
            .pagination {
                justify-content: flex-end;
                margin-top: 15px;
                ::v-deep {
                    .el-pager li.is-active,
                    .el-pager li:hover {
                        border: 1px solid #00a342;
                        border-radius: 4px;
                        color: #00a342;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less">
.map-popup {
    width: 60%;
    height: 80%;
    .map-name {
        color: #fff;
        z-index: 20;
        position: absolute;
        top: 13px;
        left: 13px;
        background: rgba(0, 0, 0, 0.6);
        font-size: 16px;
        padding: 8px 24px;
        border-radius: 20px;
        cursor: pointer;
    }
}
</style>
