<template>
    <view class="main">
        <view class="swiperImgBox">
            <swiper class="swiperBox">
                <swiper-item class="swiperItem" v-for="(item, index) in swiperImgList" :key="index">
                    <image class="swiperItemImg" :src="item.ImageUrl" />
                </swiper-item>
            </swiper>
        </view>

        <view class="scenicObjBox">
            <view class="scenicTitle">{{ scenicObj.SCENICAREA_NAME || "" }}</view>

            <view class="labelBox">
                <view class="typeBox" v-if="scenicObj.SCENICAREA_TYPE">{{ SCENICAREATYPEObj && scenicObj.SCENICAREA_TYPE
                    ?
                    SCENICAREATYPEObj[scenicObj.SCENICAREA_TYPE] : '' }}</view>
                <view class="levelBox" v-if="scenicObj.SCENICAREA_LEVEL">{{ scenicObj.SCENICAREA_LEVEL + '景区' }}</view>
                <view class="scoreBox" v-if="scenicObj.SCENICAREA_SCORE">评分：{{ scenicObj.SCENICAREA_SCORE }}</view>
            </view>

            <view class="labelBox">
                <view class="statusBox" v-if="scenicObj.SCENICAREA_STATE">{{ SCENICAREASTATUSOBJ &&
                    scenicObj.SCENICAREA_STATE ?
                    SCENICAREASTATUSOBJ[scenicObj.SCENICAREA_STATE] : '' }}</view>
                <view class="timeBox">{{ scenicObj.SCENICAREA_OPENHOURS || "" }} </view>
            </view>

            <view class="line"></view>

            <view class="detailBox">
                <view class="detailBoxLeft">
                    <view class="detailDitance" v-if="ScenicDistance">直线 {{ ScenicDistance }} 公里</view>
                    <view class="address">{{ scenicObj.SCENICAREA_LOCATION || "" }}</view>
                </view>
                <view class="detailBoxRight">
                    <view class="phoneItem" @click="handleCallPhone">
                        <image class="phoneIcon" src="https://eshangtech.com/caiyunyiImg/phoneIcon.png" />
                    </view>
                    <view class="mapItem" @click="handleGoNavigation">
                        <image class="mapIcon" src="https://eshangtech.com/caiyunyiImg/mapIcon.png" />
                    </view>
                </view>
            </view>

            <view class="descBox" v-if="scenicObj.SCENICAREA_INFO">
                {{ scenicObj.SCENICAREA_INFO }}
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            swiperImgList: [],// 景区的图片
            scenicObj: {},// 景区详情信息
            SCENICAREATYPEObj: {},// 景区类型的枚举
            SCENICAREASTATUSOBJ: {
                1000: "运营中",
                1010: "待运营",
                2000: "暂停中",
                3000: "已停业",
            },
            ScenicDistance: ""
        }
    },
    onLoad(query) {
        console.log('query', query);
        if (query.ScenicDistance) {
            this.ScenicDistance = query.ScenicDistance
        }

        // 拿到景区类型的枚举
        this.handleGetScenicType()

        this.handleGetScenicDetail(query.id)
    },
    methods: {
        // 打电话
        handleCallPhone() {
            if (this.scenicObj.SCENICAREA_PHONE) {
                uni.makePhoneCall({
                    phoneNumber: this.scenicObj.SCENICAREA_PHONE //仅为示例
                });
            }
        },
        // 跳转去导航
        handleGoNavigation() {
            uni.openLocation({
                latitude: this.scenicObj.SCENICAREA_Y,
                longitude: this.scenicObj.SCENICAREA_X,
                scale: 16, // 缩放比例
                name: this.scenicObj.SCENICAREA_NAME,
                success(data) {

                },
                fail(err) {

                },
            });
        },
        // 景区类型的枚举
        async handleGetScenicType() {
            const data = await this.$api.$get(
                "/EShangApiMain/FrameWork/GetFieldEnumTree",
                { FieldExplainField: 'SCENICAREA_TYPE' }
            );
            let list = this.$utils.wrapTreeNode(data.Result_Data.List)
            console.log('listlistlistlistlist', list);
            let obj = {}
            if (list && list.length > 0) {
                list.forEach((item) => {
                    obj[item.value] = item.label
                })
            }
            this.SCENICAREATYPEObj = obj
        },
        // 拿到景区详情的方法
        async handleGetScenicDetail(id) {
            let req = {
                SCENICAREAId: id,
                type: 'encryption',
            }
            const data = await this.$api.$zzyLocalPost(
                "/WisdomServerpart/GetSCENICAREADetail",
                req
            );
            let res = data.Result_Data
            this.scenicObj = res
            this.swiperImgList = res.ImageList
            console.log('resresresresres', JSON.parse(JSON.stringify(res)));
            console.log('this.swiperImgListthis.swiperImgListthis.swiperImgList', this.swiperImgList);
        }
    }
}
</script>
<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;

    .swiperImgBox {
        width: 100%;
        height: 400rpx;

        .swiperBox {
            width: 100%;
            height: 100%;

            .swiperItemImg {
                width: 100%;
                height: 100%;
            }

        }
    }

    .scenicObjBox {
        width: 100%;
        height: calc(100vh - 400rpx + 32rpx);
        transform: translateY(-32rpx);
        border-top-left-radius: 32rpx;
        border-top-right-radius: 32rpx;
        background-color: #fff;
        box-sizing: border-box;
        padding: 32rpx;

        .scenicTitle {
            width: 100%;
            font-size: 30rpx;
            font-family: 'PingFangSC';
            color: #130F05;
            font-weight: 600;
            line-height: 40rpx;
            text-align: left;
            // overflow: hidden;
            // white-space: nowrap;
            // text-overflow: ellipsis; 
        }

        .labelBox {
            width: 100%;
            margin-top: 12rpx;

            .typeBox {
                font-size: 24rpx;
                font-family: 'PingFangSC';
                background-color: #F6F6F6;
                display: inline-block;
                padding: 8rpx 12rpx;
                border-radius: 8rpx;
                color: #707573;
            }

            .levelBox {
                font-size: 24rpx;
                font-family: 'PingFangSC';
                background-color: #43C677;
                display: inline-block;
                padding: 8rpx 12rpx;
                border-radius: 8rpx;
                color: #fff;
                margin-left: 16rpx;
            }

            .scoreBox {
                font-size: 24rpx;
                font-family: 'PingFangSC';
                background-color: #FDF0E5;
                display: inline-block;
                padding: 8rpx 12rpx;
                border-radius: 8rpx;
                color: #EC6C00;
                margin-left: 16rpx;
            }

            .statusBox {
                font-size: 24rpx;
                font-family: 'PingFangSC';
                background-color: #E7F8EE;
                display: inline-block;
                padding: 8rpx 12rpx;
                border-radius: 8rpx;
                color: #36BC6C;
            }

            .timeBox {
                font-size: 24rpx;
                font-family: 'PingFangSC';
                color: #707573;
                display: inline-block;
                margin-left: 16rpx;
            }
        }

        .line {
            width: 100%;
            height: 2rpx;
            background-color: #F6F6F6;
            margin: 24rpx 0;
        }

        .detailBox {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .detailBoxLeft {
                width: 70%;

                .detailDitance {
                    width: 100%;
                    font-size: 24rpx;
                    font-family: 'PingFangSC';
                    color: #130F05;
                    font-weight: 600;
                    line-height: 40rpx;
                    text-align: left;
                }

                .address {
                    font-size: 24rpx;
                    font-family: 'PingFangSC';
                    color: #707573;
                    line-height: 40rpx;
                    text-align: left;
                }
            }

            .detailBoxRight {
                width: 30%;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .phoneItem {
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    border: 2rpx solid #aab1ae;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .phoneIcon {
                        width: 30rpx;
                        height: 30rpx;
                    }
                }

                .mapItem {
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    border: 2rpx solid #aab1ae;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 24rpx;

                    .mapIcon {
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }
        }

        .descBox {
            width: 100%;
            margin-top: 24rpx;
            font-size: 24rpx;
            font-family: 'PingFangSC';
            color: #130F05;
        }

    }
}
</style>