import * as KMap from "@/utils/ol-map/KMap";
import { Vector as VectorSource } from "ol/source.js";
import { Feature } from "ol";
import { WKT } from "ol/format";
import { Circle, Fill, Stroke, Style, Text, Icon, RegularShape } from "ol/style.js";
import Photo from "ol-ext/style/Photo";
import { newPoint, newPolymerFeature } from "@/utils/map.js";

import pointBgImg from "@/assets/images/map/point_bg.png";

class DistributionLayer {
    constructor(kmap) {
        let that = this;
        this.kmap = kmap
        let vectorStyle = new KMap.VectorStyle()
        this.distributionLayer = new KMap.VectorLayer("distributionLayer", 99, {
            source: new VectorSource({}),
            style: function (f) {
                let style2 = vectorStyle.getPolygonStyle(f.get("fillColor"), f.get("color"), 2)
                return [style2]
            }
        });
        // this.kmap.addLayer(this.distributionLayer.layer)

        this.distributionPointLayer = new KMap.VectorLayer("distributionPointLayer", 99, {
            source: new VectorSource({}),
            style: function (f) {
                const label = f.get("speciesName") || "";
                const baseColor = f.get("color") || "#2199F8";
                const farmName = f.get("farmName") || "";
                const imgName = f.get("imgName") || "";
                const speciesIcon = f.get("speciesIcon");

                // 方块填充色背景（在白色描边 PNG 底图下方，参考 UI）
                const squareBgStyle = new Style({
                    image: new RegularShape({
                        points: 4,
                        radius: 34, // 控制方块大小
                        angle: Math.PI / 4, // 旋转 45°，让正方形对齐
                        fill: new Fill({
                            color: baseColor,
                        }),
                        imgSize: [34, 34],
                        // 向上平移一点，让方块主要位于指针上方
                        displacement: [0, 4],
                    }),
                });

                const iconAndTextStyle = new Style({
                    image: new Icon({
                        src: pointBgImg,
                        scale: 0.45,
                    }),
                    // 文字 + 背景（参考 UI：白色圆角矩形 + 彩色文字）
                    text: new Text({
                        text: label,
                        font: "normal 14px sans-serif",
                        offsetY: -46, // 文字整体上移，避免和图片重叠
                        textAlign: "center",
                        fill: new Fill({
                            color: baseColor,
                        }),
                        backgroundFill: new Fill({
                            color: "rgba(255,255,255,1)",
                        }),
                        backgroundStroke: new Stroke({
                            color: baseColor,
                            width: 1,
                        }),
                        padding: [2, 14, 2, 14],
                    }),
                });

                // 农场名称（显示在点位下方，白色文字）
                const farmNameStyle = farmName
                    ? new Style({
                        text: new Text({
                            text: farmName,
                            font: "normal 19px sans-serif",
                            offsetY: 45, // 向下偏移，位于点位下方
                            textAlign: "center",
                            fill: new Fill({
                                color: "#FFFFFF",
                            }),
                            stroke: new Stroke({
                                color: "rgba(0,0,0,0.6)",
                                width: 2,
                            }),
                        }),
                    })
                    : null;
                const typeImgStyle = new Style({
                    image: new Icon({
                        // src: imgUrl,
                        src: speciesIcon,
                        scale: 0.8,
                        displacement: [0, 4],
                    }),
                });

                // 先画纯色方块，再画白色描边 PNG 和文字，最后画农场名称
                const styles = [squareBgStyle, iconAndTextStyle];
                if (speciesIcon) styles.push(typeImgStyle);
                if (farmNameStyle) styles.push(farmNameStyle);
                return styles;
            },
        });
        this.kmap.addLayer(this.distributionPointLayer.layer)

        // 设施图层：只显示图标（冷链冷库 / 加工厂等），不带边框和文字
        this.facilityPointLayer = new KMap.VectorLayer("facilityPointLayer", 100, {
            source: new VectorSource({}),
            style: function (f) {
                const imgName = f.get("imgName") || "";
                return new Style({
                    image: new Icon({
                        src: imgName,
                        imgSize: [45, 45],
                        width: 45,
                        height: 45,
                        scale: 0.9,
                    }),
                });
            },
        });
        this.kmap.addLayer(this.facilityPointLayer.layer)
    }

    /**
     * 清空当前图层上的所有数据
     */
    clear() {
        if (this.distributionLayer && this.distributionLayer.source) {
            this.distributionLayer.source.clear();
        }
        if (this.distributionPointLayer && this.distributionPointLayer.source) {
            this.distributionPointLayer.source.clear();
        }
        if (this.facilityPointLayer && this.facilityPointLayer.source) {
            this.facilityPointLayer.source.clear();
        }
    }

    initData(data) {
        // 每次加载前先清空旧数据（多用于“作物分布 / 物候期分布 / 农场分布”）
        this.clear();

        for (let item of data) {
            // 面数据（区域多边形）
            // if (item.geom) {
            //     item.color = item.color || "#2199F8";
            //     item.fillColor = item.fillColor || "rgba(0, 69, 4, 0.5)";
            //     this.distributionLayer.source.addFeature(newPolymerFeature(item));
            // }
            if (item.centerPoint) {
                item.color = item.color || "#2199F8";
                item.wkt = item.centerPoint;
                this.distributionPointLayer.source.addFeature(newPoint(item));
            }
        }
        // const extent = this.distributionLayer.source.getExtent();
        // if (extent && !isNaN(extent[0])) {
        //     this.kmap.map.getView().fit(extent, {
        //         padding: [280, 400, 200, 150],
        //         duration: 500,
        //     });
        // }

        // 所有点位添加完成后，地图范围自适应到包含 distributionPointLayer 的所有点
        const pointExtent = this.distributionPointLayer.source.getExtent();
        if (pointExtent && !isNaN(pointExtent[0])) {
            this.kmap.map.getView().fit(pointExtent, {
                padding: [280, 400, 200, 150],
                duration: 500,
            });
        }
    }

    /**
     * 设施数据加载（冷链冷库 / 加工厂）
     * 只操作 facilityPointLayer，不影响作物分布图层
     */
    initFacilityData(list = []) {
        if (!this.facilityPointLayer || !this.facilityPointLayer.source) return;
        this.facilityPointLayer.source.clear();

        const extentSource = new VectorSource({});

        for (let item of list) {
            if (!item.wktArr) continue;
            for (let wkt of item.wktArr) {
                const f = new Feature({
                    geometry: new WKT().readGeometry(wkt),
                });
                f.set("imgName", item.imgName);
                this.facilityPointLayer.source.addFeature(f);
                extentSource.addFeature(f);
            }
        }

        const extent = extentSource.getExtent();
        if (extent && !isNaN(extent[0])) {
            this.kmap.map.getView().fit(extent, {
                padding: [280, 400, 200, 150],
                duration: 500,
            });
        }
    }
}



export default DistributionLayer;