<template>
    <!-- 全域旅游 -->
    <div class="eb-container" ref="appRef">
        <MainTitle class="title" :title="title"></MainTitle>
        <gis-map
            ref="gisMapRef"
            class="gismap"

            pointType="全域旅游"
            :point-list="dataList"
            @currentPoint="currentPointFn"
            :lngLat="lngLat"
            list-item-key="name"
        >
            <template v-slot:content>
                <div class="center-window">
                    <div
                        class="top-title"
                        v-for="(item, index) in iconList"
                        @click="changeType(item, index)"
                    >
                        <img :src="item.icon"/>
                        <div class="text">
                            <p class="text-name">{{ item.label }}</p>
                            <p class="text-type">
                                <CountTo
                                    :startVal="0"
                                    :endVal="item.count"
                                    :duration="2000"
                                />
                            </p>
                        </div>
                    </div>
                </div>
                <div class="travel-content" v-if="travleListLoading">
                    <div class="title-box-samll">
                        <span>旅游资源</span>
                    </div>
                    <div class="content-info">
                        <div class="content-inof-list">
                            <div
                                class="content-info-item"
                                v-for="(item, index) in travleList"
                                :key="index"
                                @click="selectTravelInfoById(item.id, item)"
                            >
                                <div
                                    class="content-info-item-title"
                                    style="font-size: 20px; color: #fff"
                                >
                                    {{ item.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="detail-content" v-if="detailInfoLoading">
                    <div class="title-box-samll">
                        <span>{{ boxTitle }}</span>
                    </div>
                    <div class="content-info">
                        <!-- title -->
                        <div class="content-info-title">
                            <span
                                style="
                                    font-size: 24px;
                                    color: #fff;
                                    font-weight: bold;
                                "
                            >{{ detailInfo.name }}</span
                            >
                            <span style="font-size: 18px; color: #c9c9c9">{{
                                    typeList[detailInfo.type]
                                }}</span>
                        </div>
                        <!-- content -->
                        <div
                            class="content-info-content"
                            style="margin-top: 20px"
                        >
                            <span style="font-size: 24px; color: #fff"
                            >基础信息</span
                            >
                            <div style="margin-top: 10px" v-if="detailInfo.address">
                                <span style="font-size: 18px; color: #c9c9c9"
                                >地址:
                                </span>
                                <span style="font-size: 18px; color: #fff">{{
                                        detailInfo.address
                                    }}</span>
                            </div>
                            <!-- 工作时间 -->
                            <div style="margin-top: 10px" v-if="detailInfo.openHours">
                                <span style="font-size: 18px; color: #c9c9c9"
                                >工作时间:
                                </span>
                                <span style="font-size: 18px; color: #fff">{{
                                        detailInfo.openHours
                                    }}</span>
                            </div>
                            <!-- 简介 -->
                            <div style="margin-top: 10px" v-if="detailInfo.remark">
                                <span style="font-size: 18px; color: #c9c9c9"
                                >简介:
                                </span>
                                <span style="font-size: 18px; color: #fff">{{
                                        detailInfo.remark
                                    }}</span>
                            </div>
                            <!-- 图片 -->
                            <div style="margin-top: 10px" v-if="detailInfo.coverImage">
                                <span style="font-size: 18px; color: #c9c9c9"
                                >图片:
                                </span>
                                <img
                                    :src="detailInfo.coverImage"
                                    alt=""
                                    style="width: 100%; height: 200px"
                                />
                            </div>
                            <div
                                style="
                                    display: flex;
                                    align-items: center;
                                    margin-top: 20px;
                                "
                            >
                                <Button
                                    type="text"
                                    class="text-button"
                                    @click="
                                        openLineOrPlayAudio(detailInfo.type)
                                    "
                                >
                                    {{
                                        detailInfo.type == 4
                                            ? "播放音频"
                                            : detailInfo.type == "2"
                                                ? "查看路线"
                                                : ""
                                    }}
                                </Button>
                                <!-- 音频播放 -->
                                <audio
                                    ref="audioRef"
                                    class="audio-controls"
                                    v-if="detailInfo.type == 4"
                                    :src="detailInfo.audioList"
                                    controls
                                ></audio>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </gis-map>
        <div class="page-bottom-bg"></div>
<div class="page-left-bg"></div>
<div class="page-right-bg"></div>

        <commonModal v-model="lineVisible" title="相关路线" width="600">
            <div class="line-box">
                <div
                    class="line-item"
                    v-for="(item, index) in lineList"
                    @click="openLine(item)"
                    :key="index"
                >
                    <span class="line-title"
                    >线路名称：{{ item.lineName }}</span
                    >
                    <div class="line-content">
                        <span>线路途经：{{ item.lineText }}</span>
                    </div>
                </div>
            </div>
        </commonModal>
    </div>
</template>

<script>
import {useIndex} from "../../utils/utilsDramAdmin";
import MainTitle from "./components/MainTitle.vue";
import gisMap from "./components/gisMapOfCounty.vue";
import commonModal from "@/views/common-components/common-modal.vue";

export default {
    name: "GlobalTravel",
    components: {MainTitle, gisMap, commonModal},
    data() {
        return {
            title: "全域旅游",
            boxTitle: "资源详情",
            columns: [
                // 序号
                {
                    title: "序号",
                    type: "index",
                    width: 80,
                    align: "center",
                },
                // 选择
                {
                    title: "选择",
                    type: "selection",
                    width: 80,
                    align: "center",
                },
                // 路线名称
                {
                    title: "路线名称",
                    key: "lineName",
                    align: "center",
                },
                // 路线描述
                {
                    title: "路线描述",
                    key: "intro",
                    align: "center",
                },
            ],
            lineList: [],
            lineVisible: false,
            // 1、住宿  2、景点  3、美食  4、讲解 5、商店  6、卫生间 7、 停车场 8、游客服务
            typeList: {
                1: "住宿",
                2: "景点",
                3: "美食",
                4: "讲解",
                5: "商店",
                6: "卫生间",
                7: "停车场",
                8: "游客服务",
            },
            type: "",
            iconList: [
                // 1、酒店  2、景区  3、饭店  4、讲解 5、服务区  6、设备设施
                {icon: require("@/assets/mapIcon/jd.png"), label: "住宿", count: 0, type: "1"},
                {icon: require("@/assets/mapIcon/jq.png"), label: "景点", count: 0, type: "2"},
                {icon: require("@/assets/mapIcon/fd.png"), label: "美食", count: 0, type: "3"},
                {icon: require("@/assets/mapIcon/jj.png"), label: "讲解", count: 0, type: "4"},
                {icon: require("@/assets/mapIcon/sd.png"), label: "商店", count: 0, type: "5"},
                {icon: require("@/assets/mapIcon/wsj.png"), label: "卫生间", count: 0, type: "6"},
                {icon: require("@/assets/mapIcon/fwq.png"), label: "停车场", count: 0, type: "7"},
                {icon: require("@/assets/mapIcon/ykzx.png"), label: "游客服务", count: 0, type: "8"},
            ],
            travleList: [],
            detailInfo: {},
            travleListLoading: false,
            detailInfoLoading: false,
            clickNode: null,
            lngLat: [],
            dataList: [],
            selection: [],
            driving: null,
            lngList: [],
            trimmedLngList: [],
        };
    },
    computed: {},
    created() {
    },

    mounted() {
        const {calcRate, windowDraw} = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();
        this.$nextTick(() => {
            this.queryTravelInfoPage();
        });
        // this.getIconList();
    },
    beforeDestroy() {
    },
    methods: {
        selectTravelLineById(id, index) {
            this.$http
                .post(
                    "/travel/selectTravelLineById",
                    this.common.request({id})
                )
                .then((res) => {
                    if (res.data.code == 200 && res.data.data) {
                        this.lineList[index].linePoint =
                            res.data.data.travelInfoList;
                        this.lineList[index].lineText =
                            res.data.data.travelInfoList
                                .map((item) => item.name)
                                .join("-");
                        this.$set(this.lineList, index, {
                            ...this.lineList[index],
                            lineText: res.data.data.travelInfoList
                                .map((item) => item.name)
                                .join("-"),
                        });
                    }
                });
        },
        changeType(item, index) {
            this.type = item.type;
            this.queryTravelInfoPage();
        },
        async initLine(lngList) {
            console.log(lngList);
            let _this = this.$refs.gisMapRef;

            // 清除上一次路线
            if (this.driving != null) {
                this.driving.clear();
                _this.map.clearMap();
            }

            this.driving = new AMap.Driving({
                map: _this.map,
                hideMarkers: true,
            });

            this.trimmedLngList = [];

            // this.dataList.forEach((v, i) => {
            //     lngList.push(v.lnglat);
            // });

            // 去掉第一个和最后一个元素
            if (lngList.length >= 2) {
                this.trimmedLngList = lngList.slice(1, -1);
            }

            let lngLength = lngList.length;

            // 根据起终点经纬度规划驾车导航路线
            try {
                const result = await new Promise((resolve, reject) => {
                    this.driving.search(
                        lngList[0],
                        lngList[lngLength - 1],
                        {waypoints: this.trimmedLngList},
                        (status, result) => {
                            console.log(status, "status");
                            if (status === "complete") {
                                const {routes = []} = result;
                                const {steps = []} = routes[0];
                                const pathArr = [];
                                steps.map((i) => {
                                    pathArr.push(i.path);
                                    return pathArr;
                                });
                                // 红色路线绘制红色轨迹
                                let strokeColor = "#04be02";
                                // 绘制轨迹
                                const polyline = new window.AMap.Polyline({
                                    map: _this.map,
                                    path: pathArr,
                                    showDir: true,
                                    strokeColor: strokeColor, // 线颜色
                                    strokeOpacity: 1, // 线透明度
                                    strokeWeight: 10, // 线宽
                                    strokeStyle: "solid", // 线样式
                                    lineJoin: "round", // 折线拐点的绘制样式
                                    zIndex: 999,
                                });
                                polyline.setMap(_this.map);
                                resolve(result);
                            } else {
                                reject(new Error("获取行车路线失败"));
                            }
                        }
                    );
                });

                // 这里处理驾车导航信息
                console.log(result);

                // 创建起点和终点的标记
                // const startPointIcon = new AMap.Icon({
                //     image: startImg, // 替换为您的起点图标URL
                //     imageSize: new AMap.Size(46, 46),
                //     offset: new AMap.Pixel(-23, -46),
                // });

                // const endPointIcon = new AMap.Icon({
                //     image: endImg, // 替换为您的终点图标URL
                //     imageSize: new AMap.Size(46, 46),
                //     offset: new AMap.Pixel(-64, -128),
                // });

                // const startMarker = new AMap.Marker({
                //     position: _lngList[0],
                //     icon: startPointIcon,
                //     offset: new AMap.Pixel(-23, -46),
                //     map: _this.map,
                // });

                // const endMarker = new AMap.Marker({
                //     position: _lngList[_lngList.length - 1],
                //     icon: endPointIcon,
                //     offset: new AMap.Pixel(-23, -46),
                //     map: _this.map,
                // });
            } catch (error) {
                console.error(error);
            }
        },
        openLine(item) {
            this.dataList = item.linePoint.map((el) => {
                el.lnglat = [el.lng, el.lat];
                return el;
            });
            let list = item.linePoint.map((el) => [el.lng, el.lat]);
            this.lineVisible = false;
            this.initLine(list);
        },
        getLineList(id) {
            this.$http
                .post(
                    "/travel/queryTravelLinePage",
                    this.common.request({
                        travelId: id,
                        pageNum: 1,
                        pageSize: 10,
                    })
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.lineList = res.data.data.records;
                        this.lineVisible = true;
                        this.lineList.forEach((item, index) => {
                            this.selectTravelLineById(item.id, index);
                        });
                    }
                });
        },
        openLineOrPlayAudio(type) {
            if (type == 4) {
                this.$refs.audioRef.play();
            } else if (type == 2) {
                this.boxTitle = "旅游线路";
                this.getLineList(this.detailInfo.id);
            }
        },
        assembleData(data) {
            let list = [];
            if (data && data.length > 0) {
                data.forEach((item) => {
                    if (item.children && item.children.length > 0) {
                        this.assembleData(item.children);
                    } else {
                        let dataItem = {...item};
                        dataItem.lnglat = [item.lng, item.lat];
                        try {
                            dataItem.imageList = eval(dataItem.imageList);
                        } catch (err) {
                            dataItem.imageList = [];
                        }
                        list.push(dataItem);
                    }
                });
            }
            return list;
        },
        currentPointFn(data) {
            this.clickNode = data;
            this.detailInfo = data;
            this.detailInfoLoading = false;
            setTimeout(() => {
                this.detailInfoLoading = true;
            }, 100);
        },
        // getIconList() {
        //     this.$http.post("/travel/analysisTravelInfo", this.common.request()).then(res => {
        //         if (res.data.code == 200) {
        //             this.iconList = this.iconList.map(item => {
        //                 return {
        //                     ...item,
        //                     count: res.data.data[item.name],
        //                 };
        //             })
        //         }
        //     });
        // },
        selectTravelInfoById(id, item) {
            // this.lngLat = [item.longitude, item.latitude];
            if (this.driving != null) {
                this.driving.clear();
                this.$refs.gisMapRef.map.clearMap();
            }
            this.detailInfoLoading = false;
            this.$http
                .post(
                    "/travel/selectTravelInfoById",
                    this.common.request({id})
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.detailInfo = res.data.data;
                        this.detailInfoLoading = true;
                    }
                });
        },
        queryTravelInfoPage() {
            if (this.driving != null) {
                this.driving.clear();
                this.$refs.gisMapRef.map.clearMap();
            }
            const params = {
                pageNum: 1,
                pageSize: 10000,
                type: this.type,
            };
            this.travleListLoading = false;
            this.detailInfoLoading = false;
            this.$http
                .post(
                    "/travel/queryTravelInfoPage",
                    this.common.request(params)
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.travleList = this.assembleData(
                            res.data.data.records
                        );
                        if (!this.type) {
                            this.iconList.forEach((item) => {
                                let list = this.travleList.filter((element) => {
                                    if (item.type == element.type) {
                                        return true;
                                    }
                                });
                                item.count = list.length;
                            });
                        }
                        this.travleListLoading = true;
                        this.dataList = this.travleList;
                        this.detailInfo = {};
                        this.$http
                            .post(
                                "/travel/selectTravelInfoById",
                                this.common.request({
                                    id: this.travleList[0].id,
                                })
                            )
                            .then((res) => {
                                if (res.data.code == 200) {
                                    this.detailInfo = res.data.data;
                                    this.detailInfoLoading = true;
                                }
                            });
                    }
                });
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../styles/pbStyle.less";

.eb-container {
    width: 1920px;
    height: 1080px;
    overflow-x: hidden;
    transform: scale(var(--scale)) translate(-50%, -50%);
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url("../../assets/largeScreen/page-bg.png");
    background-size: 100%;

    .travel-content {
        position: fixed;
        top: 100px;
        left: 50px;
        width: 458px;
        height: 920px;

        .content-info {
            .content-pub-style(100%, calc(100% - 44px));

            .content-info-header {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding: 10px 10px;
                box-sizing: border-box;
                gap: 10px;
            }

            .content-inof-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding: 10px 10px;
                box-sizing: border-box;
                overflow-y: scroll;
                height: 100%;
                scroll-behavior: smooth;

                &::-webkit-scrollbar {
                    width: 5px;
                }

                .content-info-item {
                    width: 100%;
                    height: 50px;
                    background: url("../../assets/largeScreen/list-item-bg.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    box-sizing: border-box;
                    cursor: pointer;
                    padding: 20px;
                    box-sizing: border-box;
                    border-radius: 5px;
                    box-shadow: 0.5px 1px 1.5px #293240;
                    transition: all 0.1s ease-in-out;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    &:hover {
                        background-image: linear-gradient(90deg,
                        #12181f 0%,
                        #293240 100%);
                    }
                }
            }
        }
    }

    .detail-content {
        position: fixed;
        top: 100px;
        right: 50px;
        width: 458px;
        height: 920px;

        .content-info {
            .content-pub-style(100%, calc(100% - 44px));
            padding: 10px 20px;
            box-sizing: border-box;

            .content-info-title {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .text-button {
                font-size: 18px;
                color: #fff;
                // 下划线
                text-decoration: underline;
                transition: all 0.2s ease-in-out;
                text-underline-offset: 5px;

                &:hover {
                    // 浅蓝色
                    color: #00bfff !important;
                }
            }

            .line-item {
                width: 100%;
                height: 140px;
                border-radius: 8px;
                background: linear-gradient(180deg,
                rgba(0, 125, 165, 0.24) 0%,
                rgba(1, 10, 43, 0) 100%);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 20px;

                .line-title {
                    font-family: ShiShangZhongHeiJianTi;
                    font-size: 18px;
                    font-weight: 400;
                    text-align: left;
                    background: linear-gradient(to top, #bde1ef, #ffffff);
                    -webkit-background-clip: text;
                    color: transparent;
                }

                .line-content {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    span {
                        font-family: ShiShangZhongHeiJianTi;
                        font-size: 18px;
                        font-weight: 400;
                        text-align: left;
                        background: linear-gradient(to top, #bde1ef, #ffffff);
                        -webkit-background-clip: text;
                        color: transparent;
                    }
                }
            }
        }
    }

    .center-window {
        width: 800px;
        height: 82px;
        position: fixed;
        top: 122px;
        left: 50%;
        transform: translateX(-50%);
        font-family: "PingFang SC";
        display: flex;
        flex-wrap: wrap;

        .top-title {
            width: 120px;
            height: 56px;
            display: flex;
            align-items: center;
            margin-right: 10px;
            margin-bottom: 10px;
            color: #fff;
            cursor: pointer;

            img {
                width: 30px;
                height: 45px;
            }

            .text {
                flex: 1;
                margin-left: 6px;

                .text-name {
                    width: 80px;
                    font-size: 16px;
                    display: inline-block;
                    overflow: hidden; /*超出部分隐藏*/
                    white-space: nowrap; /*禁止换行*/
                    text-overflow: ellipsis; /*省略号*/
                }

                .text-type {
                    font-family: Furore;
                    font-size: 24px;
                }
            }
        }
    }
}

.audio-controls {
    width: 80%;
    height: 40px;
    background-color: transparent;
}

@keyframes slideLeftIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideRightIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.travel-content {
    animation: slideLeftIn 1s forwards;
}

.detail-content {
    animation: slideRightIn 1s forwards;
}

.line-box {
    width: 100%;
    display: flex;
    flex-direction: column;

    .line-item {
        width: 100%;
        height: 140px;
        border-radius: 8px;
        background: linear-gradient(180deg,
        rgba(0, 125, 165, 0.24) 0%,
        rgba(1, 10, 43, 0) 100%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;
        cursor: pointer;

        &:hover {
            background-image: linear-gradient(90deg, #12181f 0%, #293240 100%);
        }

        .line-title {
            font-family: ShiShangZhongHeiJianTi;
            font-size: 18px;
            font-weight: 400;
            text-align: left;
            background: linear-gradient(to top, #bde1ef, #ffffff);
            -webkit-background-clip: text;
            color: transparent;
        }

        .line-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            span {
                font-family: ShiShangZhongHeiJianTi;
                font-size: 18px;
                font-weight: 400;
                text-align: left;
                background: linear-gradient(to top, #bde1ef, #ffffff);
                -webkit-background-clip: text;
                color: transparent;
            }
        }
    }
}

/deep/ .ivu-select-input {
    background-color: #262b32;
    color: #fff;
    border: 1px solid #262b32;
}

/deep/ .ivu-select-dropdown {
    background-color: #262b32;
    color: #fff;
}

/deep/ .ivu-select-item {
    color: #fff;
    transition: all 0.1s ease-in-out;

    &:hover {
        background-color: #3a3a3a !important;
    }
}

/deep/ .ivu-modal-content {
    background-image: linear-gradient(90deg, #293240 0%, #12181f 100%);
}

/deep/ .ivu-table th {
    background-color: #262e36;
    color: #fff;
}

/deep/ .ivu-table td {
    background-color: #262e36;
    color: #fff;
}

/deep/ .ivu-modal-header-inner {
    color: #fff !important;
}

/deep/ .ivu-modal-footer {
    border-top: none;
}

/deep/ .ivu-modal-header {
    border-bottom: none;
}
</style>
