<template>
    <div class="hotel">
        <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.hotelName }}</div>
            <div class="h_address flex_r flex_jb flex_ac">
                <div class="hil">
                    <div class="h_tags">
                        <span>{{ detail.avgScore }}分</span>
                        <span>{{ hotelStarF(detail.hotelStar) }}</span>
                    </div>
                    <div class="address">{{ detail.address }}</div>
                </div>
                <div class="iconfont ico" @click="openm">&#xe6b3;</div>
            </div>
            <div class="RatePlan">
                <div class="Room" v-for="(i,s) in RatePlan" :key="s">
                    <div class="Room_row flex_r flex_jb" @click="onshow(s)">
                        <div class="h_img" @click="onpreview2(i.pictures)">
                            <div class="img_num">{{i.pictures.length}}</div>
                            <image :src="i.pictures[0].path" mode="aspectFill" class="img" />
                        </div>
                        <div class="info">
                            <div class="RName">{{i.roomName}}</div>
                            <div class="tegs">
                                <span>{{ i.bedType }}</span>
                                <span>{{ i.windowType }}</span>
                                <span>{{ i.capacity }}人入住</span>
                                <span>{{ i.useableArea }}</span>
                            </div>
                            <div class="tegs">
                                <span>{{ i.floor }}</span>
                            </div>
                            <div class="item_price">
                                <div class="dinB price" v-if="i.ratePlans[0]">{{ i.ratePlans[0].aveOriginalPrice }}</div>
                                <div class="price" v-else>暂无报价</div>
                            </div>
                        </div>
                    </div>
                    <div class="Plans" v-if="i.show">
                        <div class="p_li" v-for="(a,b) in i.ratePlans" :key="b">
                            <div class="ratePlanName">
                                <span>{{ a.ratePlanName }}</span>
                                <span class="breakfast">{{ a.breakfast }}</span>
                            </div>
                            <div class="cancelRule">{{ a.cancelRule.desc }}</div>
                            <div class="reserve flex_r flex_je flex_ae" @click="hotelDetail(i,a)">
                                <div class="price dinB">{{ a.aveOriginalPrice }}</div>
                                <div class="reserve_btn">
                                    <div class="t1">预订</div>在线付
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图片查看组件 -->
        <preview ref="previewimg" />
    </div>
</template>
<script>
import preview from "@/pagesB/components/swiper-preview/index.vue";
import { setCache, getCache } from "@/utils/storage.js";
import { post } from "@/request/api.js";
export default {
    name: "hotel",
    props: {},
    components: { preview },
    data() {
        return {
            query: {},
            hotelID: "",
            detail: {},
            RatePlan: [],
        };
    },
    methods: {
        gethotel() {
            let { checkInDate, checkOutDate } = this.query;
            post("local/hotel/detail", {
                hotelID: this.hotelID,
                checkInDate,
                checkOutDate,
            }).then((res) => {
                if (res.code == 0) {
                    this.detail = res.data.data;
                }
            });
            post("local/hotel/room", {
                hotelID: this.hotelID,
                checkInDate,
                checkOutDate,
            }).then((res) => {
                if (res.code == 0) {
                    this.RatePlan = res.data.data.rooms;
                }
            });
        },
        onpreview() {
            if (this.detail.pictures.length) {
                this.$refs.previewimg.open({
                    imgs: this.detail.pictures,
                    current: 0,
                });
            }
        },
        onpreview2(arr) {
            if (arr.length) {
                this.$refs.previewimg.open({
                    imgs: arr,
                    current: 0,
                });
            }
        },
        onshow(i) {
            this.$set(this.RatePlan[i], 'show', !this.RatePlan[i].show)
        },
        hotelDetail(a, b) {
            let { checkInDate, checkOutDate } = this.query;
            let qd = Object.assign({ checkInDate, checkOutDate, hotelID: this.hotelID }, a, b);
            setCache("roomInfo", qd)
            this.goto("/pagesB/hotel/hotelDetail");
        },
        openm() {
            let latitude = this.detail.googleLat;
            let longitude = this.detail.googleLon;
            let name = this.detail.hotelName;
            let address = this.detail.address;
            uni.openLocation({
                latitude, longitude, scale: 18, name, address,
                success: function() {
                    console.log('success');
                }
            });
        },
    },
    onLoad(da) {
        this.hotelID = da.id;
        this.query = getCache("hotelquery");
        this.gethotel();
    },
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.head_img {
    .bg_img {
        width: 100%;
        height: 460rpx;
    }
}

.head_info {
    padding: 0 30rpx;

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

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

        span {
            margin-right: 18rpx;

            &: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;
    .Room {
        background-color: #fff;
        padding: 15rpx 18rpx;
        margin-bottom: 12rpx;
        border-radius: 10rpx;
        box-shadow: 4rpx 4rpx 18rpx 2rpx rgba(17, 18, 29, 0.1);

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

        .h_img {
            position: relative;
            width: 160rpx;
            height: 180rpx;

            .img {
                width: 160rpx;
                height: 180rpx;
                border-radius: 8rpx;
            }

            .img_num {
                background-color: rgba($color: #000, $alpha: 0.6);
                position: absolute;
                right: 12rpx;
                bottom: 6rpx;
                color: #fff;
                font-size: 26rpx;
                padding: 0 10rpx;
                border-radius: 6rpx;
            }
        }

        .info {
            position: relative;
            width: calc(100% - 186rpx);

            .RName {
                font-size: 34rpx;
                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 {
                width: 100%;
                text-align: right;
                position: absolute;
                bottom: 0;
                right: 0;
            }

            .price {
                color: #666;
                font-size: 28rpx;
            }

            .dinB {
                font-size: 36rpx;
                color: #00B76C;

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

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

        .Plans {
            margin-top: 20rpx;
            padding: 16rpx 22rpx;
            border-radius: 10rpx;
            background-color: rgba($color: #000, $alpha: 0.05);
        }

        .p_li {
            padding: 12rpx 0;
            min-height: 100rpx;
            margin-bottom: 10rpx;
            border-bottom: 1rpx solid rgba($color: #000, $alpha: 0.05);

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

            .ratePlanName {
                font-size: 30rpx;
                font-weight: 600;

                span {
                    vertical-align: middle;
                }
            }

            .breakfast {
                font-size: 24rpx;
                margin-top: 6rpx;
                font-weight: 400;
                margin-left: 16rpx;
            }

            .cancelRule {
                font-size: 24rpx;
                margin-top: 6rpx;
                color: #555;
            }

            .reserve {
                .price {
                    font-size: 36rpx;
                    color: #00B76C;
                    margin-right: 20rpx;

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

                .reserve_btn {
                    text-align: center;
                    font-size: 20rpx;
                    color: #555;
                    border: 1rpx solid #00B76C;
                    border-radius: 10rpx;
                    width: 80rpx;

                    .t1 {
                        background: #00B76C;
                        color: #fff;
                        font-size: 24rpx;
                        border-radius: 10rpx 10rpx 0 0;
                    }
                }
            }
        }
    }
}
</style>