<template>
    <div class="scenic">
        <div class="head_img" @click="onpreview">
            <image :src="detail.mainImage" mode="aspectFill" class="bg_img" />
        </div>
        <div class="head_info">
            <div class="head_name">{{ detail.scenicName }}</div>
            <div class="h_address flex_r flex_jb flex_ac">
                <div class="hil">
                    <div class="h_tags flex_r flex_ac flex_wrap">
                        <div class="tag flex_r flex_ac">
                            <uni-rate :max="5" :value="detail.commentScore" :size="12" allow-half />
                            <span class="commentScore">{{detail.commentScore}}分</span>
                        </div>
                        <span class="tag">{{ detail.star }}A级</span>
                        <span class="tag">{{ detail.themeGroups }}</span>
                        <span class="tag">{{ detail.recommend }}</span>
                    </div>
                    <div class="address">{{ detail.scenicAddress }}</div>
                </div>
                <div class="iconfont ico" @click="openm">&#xe6b3;</div>
            </div>
            <div class="RatePlan">
                <div class="tickets" v-for="(i,s) in RatePlan" :key="s">
                    <div class="RName">{{i.productName}}</div>
                    <div class="item_price flex_r flex_je flex_ae">
                        <div class="prices">
                            <div class="din oprice" v-if="i.marketPrice">{{ i.marketPrice }}</div>
                            <div class="dinB price" v-if="i.deductionPrice">{{ i.deductionPrice }}</div>
                            <div v-else>暂无报价</div>
                        </div>
                        <div class="BuyThis" @click="scenicDetail(i.productId)">预订</div>
                    </div>
                </div>
            </div>
            <div class="scenic_msg" v-if="detail.openTime">
                <div class="title">开放时间</div>
                <div class="msg_con" v-html="detail.openTime"></div>
            </div>
            <div class="scenic_msg" v-for="(i,s) in detail.bookNotice" :key="s">
                <div class="title">{{ i.name }}</div>
                <div class="msg_con" v-html="i.value"></div>
            </div>
            <div class="scenic_msg" v-if="detail.scenicDescription">
                <div class="title">景区介绍</div>
                <mp-html :content="detail.scenicDescription" class="msg_con" />
            </div>
        </div>
        <!-- 图片查看组件 -->
        <preview ref="previewimg" listType="2" />
        <navigation-custom  :config="config"/>
    </div>
</template>
<script>
import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue"
import preview from "@/pagesB/components/swiper-preview/index.vue";
import { post } from "@/request/api.js";
export default {
    name: "scenic",
    props: {},
    components: { preview, mpHtml },
    data() {
        return {
            query: {},
            scenicID: "",
            detail: {},
            RatePlan: [],
        };
    },
    methods: {
        getscenic() {
            post("local/ticket/scenicDetail", { scenicID: this.scenicID }).then((res) => {
                if (res.code == 0) {
                    let da = res.data.data;
                    if(da.bookNotice) da.bookNotice = JSON.parse(da.bookNotice);
                    da.mainImage = da.images[0]
                    this.detail = da;
                    this.RatePlan = da.ticketProducts;
                    delete da.ticketProducts
                    uni.setNavigationBarTitle({ title: da.scenicName });
                }
            });
        },
        onpreview() {
            if (this.detail.images.length) {
                this.$refs.previewimg.open({
                    imgs: this.detail.images,
                    current: 0,
                });
            }
        },
        scenicDetail(id) {
            this.goto("/pagesB/scenicSpotTicket/scenicDetail",{ productId: id, scenicID: this.scenicID });
        },
        openm() {
            let { latitude, longitude } = this.detail;
            let name = this.detail.scenicName;
            let address = this.detail.scenicAddress;
            uni.openLocation({
                latitude,
                longitude,
                scale: 18,
                name,
                address,
                success: function() {
                    console.log('success');
                }
            });
        },
    },
    onLoad(da) {
        this.scenicID = da.id;
        this.getscenic();
    },
    onShow() {},
    mounted() {},
};
</script>
<style lang="scss">
page {
    background-color: #fff !important;
}
</style>
<style scoped lang='scss'>
.head_img {
    .bg_img {
        width: 100%;
        height: 460rpx;
    }
}

.head_info {
    padding: 18rpx 30rpx;
    border-radius: 40rpx 40rpx 0 0;
    background-color: #fff;
    // z-index: 88;
    position: relative;
    top: -50rpx;
    left: 0;

    .head_name {
        font-size: 36rpx;
        font-weight: 600;
        padding: 8rpx 0;
    }

    .h_tags {
        font-size: 24rpx;
        font-weight: 400;
        margin-bottom: 6rpx;

        .commentScore {
            margin-left: 10rpx;
        }

        .tag {
            margin-right: 22rpx;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .h_address {
        padding: 8rpx 0;
        margin-bottom: 30rpx;

        .address {
            font-size: 24rpx;
        }

        .hil {
            width: calc(100% - 100rpx);
        }

        .ico {
            width: 60rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            font-size: 50rpx;
        }
    }
}

.RatePlan {
    padding-bottom: 60rpx;

    .tickets {
        background-color: #fff;
        padding: 28rpx 32rpx;
        margin-bottom: 28rpx;
        border-radius: 10rpx;
        box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);

        &:last-child {
            margin-bottom: 0;
        }

        .RName {
            font-size: 30rpx;
            font-weight: 600;
            margin-bottom: 8rpx;
        }

        .tegs {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 8rpx;

            &:last-child {
                margin-bottom: 0;
            }

            span {
                margin-right: 16rpx;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .item_price {
            color: #666;
            font-size: 26rpx;

            .BuyThis {
                font-size: 28rpx;
                border-radius: 8rpx;
                padding: 6rpx 16rpx;
                background-color: #00B76C;
                color: #fff;
                margin-left: 16rpx;
            }

            .prices {
                text-align: right;
            }

            .price {
                font-size: 28rpx;
                color: #00B76C;

                &::before {
                    content: "￥";
                    font-size: 22rpx;
                }

                &::after {
                    content: "起";
                    margin-left: 6rpx;
                    font-size: 22rpx;
                }
            }

            .oprice {
                font-size: 23rpx;
                color: #666;
                text-decoration: line-through;

                &::before {
                    content: "￥";
                }
            }
        }
    }
}

.scenic_msg {
    margin-bottom: 50rpx;
    .title {
        padding-left: 12rpx;
        font-size: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        border-left: 6rpx solid #00B76C;
        margin-bottom: 16rpx;
    }

    .msg_con {
        font-size: 25rpx;
        color: #666;
    }
}
</style>