<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>
        <div class="common-wrap">
          <div class="common-title">Summary Population Rate</div>
          <common-box class="chart-wrap" :showIcon="true">
              <pie-chart class="chart pie" styleName="styleName2" :pieData="pieData"></pie-chart>
              <bar-chart class="chart" styleName="styleName3" :xData="xData2" :yData="yData2"></bar-chart>
          </common-box>
        </div>
        <div class="common-wrap">
          <div class="common-title">Population Rate All Area (Wilayah)</div>
          <common-box name="Average % Population per Wilayah on March 2025" class="box-wrap" :showIcon="true">
              <bar-chart class="bar-chart" styleName="styleName2" :xData="xData" :yData="yData"></bar-chart>
          </common-box>
        </div>
        <common-box name="Detail % Population On March 2025" class="box-wrap table-wrap" :showIcon="true">
            <el-table class="table" :data="tableData" :default-sort="{ prop: 'date', order: 'ascending' }">
                <el-table-column prop="date" label="PLANT GROUP" sortable />
                <el-table-column prop="name" label="REGION" sortable />
                <el-table-column prop="name" label="LOCATION" sortable />
                <el-table-column prop="date" label="AREA (HA)" sortable />
                <el-table-column prop="name" label="TYPES OF SEEDS" sortable />
                <el-table-column prop="name" label="SEED CLASS" sortable />
                <el-table-column prop="date" label="Plant Period AgeF-ke" sortable />
                <el-table-column prop="name" label="OBSERVATIONS" sortable />
                <el-table-column prop="name" label="FLYING GEAR" sortable />
                <el-table-column prop="address" label="TOTAL POP(btg)" sortable />
                <el-table-column prop="date" label="PROCUREMENT" sortable />
            </el-table>
        </common-box>

        <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";
import { useRoute } from "vue-router";
const route = useRoute();

const tableData = [
    {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
];

const showMapPopup = ref(false);

const xData = ref([]);
const yData = ref([]);

const xData2 = ref([]);
const yData2 = ref([]);

const pieData = ref([
    {
            value: 91,
            name: "Total Locations",
            title:'PG1'
        },
        {
            value: 9,
            name: "Other",
        },
]);
onMounted(() => {
    getPlotList();
    setTimeout(() => {
        xData.value = [
            "W01",
            "W02",
            "W03",
            "W04",
            "W05",
            "W06",
            "W07",
            "W08",
            "W09",
            "W10",
            "W11",
            "W12",
            "W13",
            "W14",
            "W15",
        ];
        yData.value = [25, 12, 33, 55, 12, 23, 54, 68, 87, 45, 45, 65, 45, 78, 54];

        xData2.value = ['Jan-2025','Feb-2025','Mar-2025']
        yData2.value = [
          {
            PG1:36,
            PG2:56,
            PG3:77
          },
          {
            PG1:36,
            PG2:56,
            PG3:77
          },
          {
            PG1:36,
            PG2:56,
            PG3:77
          }
        ]
    });
    if (route.query.type) {
        localStorage.setItem("currentPage", route.query.type);
    }
});

const mapData = ref([]);
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 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: auto;
    .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;
        }
    }
    .common-wrap{
      width: 100%;
      margin-bottom: 16px;
      .common-title{
        font-size: 20px;
        margin: 16px 0;
      }
      .chart-wrap{
        display: flex;
        align-items: center;
        width: 100%;
        height: 460px;
        .chart{
          width: 100%;
          height: 100%;
        }
        .pie{
          width: 70%;
          margin-right: 100px;
        }
      }
      .bar-chart {
          width: 100%;
          height: 200px;
      }
    }
    .table-wrap {
        width: 100%;
        // height: calc(100% - 184px - 16px);
        // .table{
        //     width: 100%;
        //     height: calc(100% - 40px - 65px)
        // }
    }
}
</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>
