<template>
    <div class="work-item">
        <div class="work-line">
            <div class="line-box">
                <div class="line-dotted">
                    <div class="dotted-inset"></div>
                </div>
            </div>
        </div>
        <div class="work-info">
            <img class="todo-img" src="@/assets/img/gallery/todo.png" />
            <img v-if="progress === 5" class="done-img" src="@/assets/img/gallery/done.png" />
            <div class="card-item-title"><span class="dotted"></span>执行进度</div>
            <div class="execution-content">
                <div class="execution-text">正在实时记录当前执行轨迹</div>
                <div class="execution-map">
                    <div class="bottom-map" ref="executionRef"></div>
                </div>

                <div class="execution-text">执行农事区域</div>

                <div class="prescription-chart prescription-map">
                    <execute-blue-region :executeBlueRegion="executionData.executeBlueRegion"></execute-blue-region>
                </div>
            </div>
            <div class="comment-btn">
                <el-button class="outline-btn btn">结束任务</el-button>
                <el-button class="outline-btn btn">暂停任务</el-button>
                <el-button class="btn" type="primary">分享协作</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import ExecuteBlueRegion from "./executeBlueRegion";
import * as util from "@/common/ol_common.js";
import config from "@/api/config.js";
import LineString from "ol/geom/LineString.js";
import * as KMap from "@/utils/ol-map/KMap";
import { Vector as VectorSource } from "ol/source.js";
import { Vector as LayerVector } from "ol/layer";
import Icon from "ol/style/Icon";
import { newPoint } from "@/views/util";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Feature from "ol/Feature";
const props = defineProps({
    progress: {
        type: Number,
        required: false,
    },
    executionData: {},
});

const executionRef = ref(null);

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

const initMap = () => {
    let vectorStyle = new KMap.VectorStyle();
    let level = 16;
    let coordinate = util.wktCastGeom("POINT(113.6142086995688 23.585836479509055)").getFirstCoordinate();
    let kmap = new KMap.Map(executionRef.value, level, coordinate[0], coordinate[1], null, 1, 22, "img");

    let xyz = config.base_img_url + "map/lby/{z}/{x}/{y}.png";
    kmap.addXYZLayer(xyz, { minZoom: 8, maxZoom: 22 }, 2);
    // let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
    // kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
    setLine(kmap);
    setMapPoint(kmap);
};

// 航线
const setLine = (kmap) => {
    let flyLineLayer = null;
    flyLineLayer && flyLineLayer.getSource().clear();
    // 定义线的坐标
    let lineCoordinates = [
        [113.61497958300038, 23.58644139996892], // 起点
        [113.61508237571593, 23.586383341120325],
        [113.61486060995014, 23.586364305432255],
        [113.61483681534014, 23.58650707309272],
    ];

    // 创建线的几何对象
    let lineGeometry = new LineString(lineCoordinates);

    // 创建特征对象
    let lineFeature = new Feature({
        geometry: lineGeometry,
    });

    // 创建矢量图层并添加到地图
    flyLineLayer = new LayerVector({
        source: new VectorSource({
            features: [lineFeature], // 添加线特征
        }),
        style: new Style({
            stroke: new Stroke({
                color: "#fff",
                width: 3,
                lineDash: [10, 8], // 10像素的实线，5像素的空白
            }), // 线条颜色
        }),
        zIndex: 1000,
    });
    console.log('extent', flyLineLayer.getSource().getExtent());
    kmap.fit(flyLineLayer.getSource().getExtent(),[20,20,20,20])
    kmap.addLayer(flyLineLayer);
};

const setMapPoint = (kmap) => {
    // 位置图标
    let pointLayer = new KMap.VectorLayer("pointLayer", 99999, {
        style: () => {
            return new Style({
                image: new Icon({
                    src: new URL('@/assets/img/gallery/star.png', import.meta.url).href,
                    scale: 0.5,
                }),
            });
        },
        minZoom: 1,
        maxZoom: 22,
    });
    let currentPointLayer = new KMap.VectorLayer("pointLayer", 99999, {
        style: () => {
            return new Style({
                image: new Icon({
                    src: new URL('@/assets/img/gallery/current.png', import.meta.url).href,
                    scale: 0.5,
                }),
            });
        },
        minZoom: 1,
        maxZoom: 22,
    });
    // 图标点位
    let point = { wkt: "POINT(113.61483681534014 23.58650707309272)" };
    let mapPoint = newPoint(point, "wkt");
    pointLayer.addFeature(mapPoint);
    kmap.addLayer(pointLayer.layer);
    // 当前图标
    let currentPoint = { wkt: "POINT(113.61497958300038 23.58644139996892)" };
    let mapCurrentPoint = newPoint(currentPoint, "wkt");
    currentPointLayer.addFeature(mapCurrentPoint);
    kmap.addLayer(currentPointLayer.layer);
};
</script>

<style lang="scss" scoped>
@import "./boxClass.scss";

.comment-btn {
    display: flex;
    padding-top: 12px;
    margin-right: 10px;
    .btn {
        flex: 1;
    }
}

.execution-text {
    font-size: 14px;
    padding: 8px 0 10px 0;
    color: #2199f8;
}
.execution-map {
    padding-bottom: 4px;
    .bottom-map {
        width: 100%;
        height: 150px;
        border-radius: 8px;
    }
}
</style>
