<template>
    <view class="main">
        <view class="maintopBox">
            <view class="mainTopRight" @click="handleChangeSortType">
                <view class="distanceText">{{ sortType === 1 ? '按距离' : '按票价' }}</view>
                <!-- <view class="distanceText">按距离</view> -->
                <image class="distanceIcon" src="https://eshangtech.com/caiyunyiImg/sortIcon.png" />
            </view>
        </view>

        <view class="mainBottom">
            <scroll-view scroll-y="true" class="scrollView" @scrolltolower="handleScrollBottom">
                <view class="nearbyScenicItem" v-for="(item, index) in dataList" :key="item.SCENICAREA_ID"
                    @click="handleGoNavigation(item)">
                    <view class="nearByBottomLeftBox">
                        <LazyImage class="nearbyImg"
                            :src="item.ImageList[0].ImageUrl || '/static/images/home/defaultIcon.png'" width="136rpx"
                            height="136rpx" mode="aspectFill" />
                    </view>
                    <view class="nearByBottomRightBox">
                        <view class="scenicName">{{ item.SCENICAREA_NAME }}</view>
                        <view class="scenicContent">
                            <view class="scenicType" v-if="item.SCENICAREA_TYPE && SCENICAREAOBJ">
                                {{ SCENICAREAOBJ[item.SCENICAREA_TYPE] }}</view>
                            <!-- <view class="scenicRateBox"> -->
                            <!-- <view class="scenicRateText">{{ item.SCENICAREA_SCORE || "-" }}</view> -->
                            <!-- </view> -->
                        </view>
                        <view class="scenicBottom">
                            <view class="scenicLeft">
                                <image class="scenicIcon" src="/static/images/home/servicePosition.svg" />
                                <view class="scenicLabel">距离{{ item.ScenicDistance || '-' }}km</view>
                            </view>
                            <view class="scenicRight" v-if="item.TICKET_PRICE > 0">
                                <view class="scenicRightLabel">门票</view>
                                <view class="scenicUnit">¥</view>
                                <view class="scenicPrice">{{ item.TICKET_PRICE || "0" }}</view>
                                <view class="scenicUnit">起</view>
                            </view>
                            <view class="scenicRight" v-else>
                                <view class="scenicPrice" style="font-size: 24rpx;">免费</view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import LazyImage from "./components/LazyImage.vue";

export default {
    components: {
        LazyImage
    },
    data() {
        return {
            sortType: 1,// 1:按距离，2:按票价  1：倒叙  2:正序
            dataList: [],// 表单数据
            seat: {},
            SCENICAREAOBJ: {},// 服务区类型的枚举
            pageIndex: 1,
            isOver: false,
            isLoading: false
        }
    },
    async onLoad() {
        let seatInfo = uni.getStorageSync("seatInfo");
        if (seatInfo) {
            this.seat = JSON.parse(seatInfo);
        }

        await this.handleGetData();
    },
    computed: {
        ...mapGetters({
            user: "user",
        }),
    },
    methods: {
        async handleGetData(sort) {
            if (this.isLoading) {
                return
            }


            let SCENICAREA = uni.getStorageSync("SCENICAREAOBJ");
            let SCENICAREAOBJ = {}
            uni.showLoading({
                title: '加载中...'
            })

            if (SCENICAREA) {
                SCENICAREAOBJ = SCENICAREA
            } else {
                const field = await this.$api.$get("/EShangApiMain/FrameWork/GetFieldEnumTree", { FieldExplainField: 'SCENICAREA_TYPE' })

                let fieldList = this.$utils.wrapTreeNode(field.Result_Data.List)
                if (fieldList && fieldList.length > 0) {
                    fieldList.forEach((item) => {
                        SCENICAREAOBJ[item.value] = item.label
                    })
                }
                uni.setStorageSync("SCENICAREAOBJ", SCENICAREAOBJ);
            }

            this.SCENICAREAOBJ = SCENICAREAOBJ

            this.isLoading = true
            let req = {
                ProvinceCode: this.user.PROVINCE_CODE,
                latitude: this.seat.latitude || "",
                longitude: this.seat.longitude || "",
                // SortStr: this.sortType === 1 ? 'ScenicDistance desc' : 'TICKET_PRICE desc',
                // ServerpartID: this.serviceDetail.SERVERPART_ID || "",
                type: 'encryption',
                PageIndex: this.pageIndex,
                PageSize: 10,
                SortStr: `${this.sortType === 1 ? '' : 'TICKET_PRICE desc'}`
            }

            const data = await this.$api.$zzyLocalPost(
                "/WisdomServerpart/GetScenicAreaListByLocation",
                req
            );
            uni.hideLoading()
            let list = data.Result_Data.List
            let res = []
            if (list && list.length > 0) {
                list.forEach((item) => {
                    if (item.SCENICAREA_STATE === 1000) {
                        res.push(item)
                    }
                })
                if (list.length < 10) {
                    this.isOver = true
                }
            } else {
                this.isOver = true
            }

            if (sort) {
                this.dataList = []
                this.dataList = list
            } else {
                this.dataList = this.dataList.concat(list)
            }
            this.isLoading = false
        },
        handleChangeSortType() {
            // 这里可以添加排序逻辑
            if (this.sortType === 1) {
                this.sortType = 2;
            } else if (this.sortType === 2) {
                this.sortType = 1;
            }
            this.isOver = false
            this.pageIndex = 1
            // this.dataList = []
            this.handleGetData(true)
        },
        // 滑动到底部
        handleScrollBottom() {
            if (this.isOver) {
                return
            }
            this.pageIndex = this.pageIndex + 1
            this.handleGetData()
        },
        // 跳转导航
        handleGoNavigation(obj) {
            uni.navigateTo({ url: `/pages/scenicList/scenicDetail?id=${obj.SCENICAREA_ID}&ScenicDistance=${obj.ScenicDistance}` });


            // uni.openLocation({
            //     latitude: obj.SCENICAREA_Y,
            //     longitude: obj.SCENICAREA_X,
            //     scale: 16, // 缩放比例
            //     name: obj.SCENICAREA_NAME,
            //     success(data) {

            //     },
            //     fail(err) {

            //     },
            // });
        }
    }
}
</script>
<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100vh;
    background: #F5F5F5;
    box-sizing: border-box;
    padding: 24rpx 30rpx;

    .maintopBox {
        width: 100%;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .mainTopRight {
            display: flex;
            align-items: center;

            .distanceText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;
                line-height: 34rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .distanceIcon {
                width: 24rpx;
                height: 24rpx;
                margin-left: 8rpx;
            }
        }
    }

    .mainBottom {
        width: 100%;
        height: calc(100% - 40rpx - 20rpx);
        margin-top: 20rpx;

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

            .nearbyScenicItem {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                background-color: #fff;
                border-radius: 9rpx;
                padding: 16rpx;
                margin-bottom: 16rpx;

                .nearByBottomLeftBox {
                    width: 136rpx;
                    height: 136rpx;
                    box-sizing: border-box;
                    padding: 4rpx 0;
                    margin-right: 40rpx;

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

                .nearByBottomRightBox {
                    width: calc(100% - 176rpx);

                    .scenicName {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        font-size: 24rpx;
                        color: #222222;
                        line-height: 42rpx;
                        text-align: left;
                        font-style: normal;
                        width: 100%;
                        display: inline-block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .scenicContent {
                        width: 100%;
                        // margin-top: 8rpx;
                        display: flex;
                        align-items: center;

                        .scenicType {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #3D7FFF;
                            line-height: 32rpx;
                            text-align: right;
                            font-style: normal;
                            padding: 4rpx 16rpx;
                            background: rgba(61, 127, 255, 0.1);
                            border-radius: 6rpx;
                            margin-right: 30rpx;
                        }

                        .scenicRateBox {
                            display: flex;
                            align-items: center;

                            .scenicRate {}

                            .scenicRateText {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 24rpx;
                                color: rgba(0, 0, 0, 0.6);
                                line-height: 28rpx;
                                text-align: left;
                                font-style: normal;
                                margin-left: 12rpx;
                            }
                        }
                    }

                    .scenicBottom {
                        display: flex;
                        align-items: flex-end;
                        justify-content: space-between;

                        .scenicLeft {
                            display: flex;
                            align-items: center;

                            .scenicIcon {
                                width: 26rpx;
                                height: 26rpx;
                                margin-right: 6rpx;
                            }

                            .scenicLabel {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 24rpx;
                                color: rgba(0, 0, 0, 0.6);
                                line-height: 28rpx;
                                text-align: left;
                                font-style: normal;
                            }
                        }

                        .scenicRight {
                            display: flex;
                            align-items: center;
                            // align-items: flex-end;

                            .scenicRightLabel {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 24rpx;
                                color: rgba(0, 0, 0, 0.6);
                                line-height: 28rpx;
                                text-align: left;
                                font-style: normal;
                                margin-right: 10rpx;
                            }

                            .scenicUnit {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 24rpx;
                                color: #F13216;
                                line-height: 28rpx;
                                text-align: left;
                                font-style: normal;
                            }

                            .scenicPrice {
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 600;
                                font-size: 24rpx;
                                color: #F13216;
                                line-height: 40rpx;
                                text-align: right;
                                font-style: normal;
                            }
                        }
                    }
                }
            }
        }

        .scrollView ::-webkit-scrollbar {
            display: none;
        }
    }
}
</style>