<template>
    <div class="container">
        <div class="content">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in info.houseImages" @click="showPicture(index)" :style="{backgroundImage:'url('+item.imageUrl+')'}">
                        <div class="tab">{{item.imageName}}</div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="box">
                <div class="boxTitle">{{rentType[parseInt(info.rentingType)]}} {{info.title}} {{info.room}}室{{info.hall}}厅</div>
                <div class="boxMoney">
                    <span>{{info.price}}元/月</span>
                    <span class="sub">{{info.payMode}}</span>
                </div>
                <div class="lablelist" v-if="info.houseFeatures">
                    <div class="lable-item" v-for="item in info.houseFeatures">{{item.name}}</div>
                </div>
                <hr>

                <div class="detailList">
                    <div class="detail-item" v-if="info.houseArea">
                        <div class="title">面积</div>
                        <div class="val">{{info.houseArea}}m²</div>
                    </div>
                    <div class="detail-item">
                        <div class="title">户型</div>
                        <div class="val">{{info.room}}室{{info.hall}}厅{{info.guard}}卫</div>
                    </div>
                    <div class="detail-item">
                        <div class="title">楼层</div>
                        <div class="val">{{info.houseFloor}}/{{info.totalFloor}}</div>
                    </div>
                    <div class="detail-item">
                        <div class="title">朝向</div>
                        <div class="val">{{info.faced}}</div>
                    </div>
                    <div class="detail-item">
                        <div class="title">装修</div>
                        <div class="val">{{info.decoration}}</div>
                    </div>
                    <div class="detail-item">
                        <div class="title">入住</div>
                        <div class="val">{{info.checkIn}}</div>
                    </div>
                    <div class="detail-item">
                        <div class="title">电梯</div>
                        <div class="val">{{info.elevator}}</div>
                    </div>
                    <div class="detail-item">
                        <div class="title">类型</div>
                        <div class="val">{{rentType[parseInt(info.rentingType)]}}</div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="boxTitle">房源配置</div>
                <hr />
                <div class="setList">
                    <div class="set-item" v-for="item in info.houseParts">
                        <img :src="item.image" alt="">
                        <div class="title">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="boxTitle">房源介绍</div>
                <hr />
                <div class="message">
                    {{info.houseIntroduce}}
                </div>
                <hr />
                <div class="userInfo" v-if="info.keeper">
                    <div class="icon" :style="{backgroundImage:'url('+info.keeper.icon+')'}"></div>
                    <div class="right">
                        <div class="name">{{info.keeper.keepName}}</div>
                        <div class="position">{{info.keeper.position}}</div>
                    </div>
                </div>
                <div class="message" style="color:#000" v-if="info.phone">
                    业务员电话：{{info.phone}}
                </div>
            </div>
            <div class="box" v-if="info.housingDistrictInfo">
                <div class="boxTitle">位置及周边</div>
                <hr />
                <div class="mapcontent" v-if="info.housingDistrictInfo">
                    <div id="Map" class="map" @click="goLocation">
                        <img src="@/assets/xq_icon_dingwei.png" alt="">
                    </div>
                    <div class="title">{{info.housingDistrictInfo.fullName}}</div>
                    <div class="address">{{info.housingDistrictInfo.address}}</div>
                </div>
            </div>
            <div style="min-height:1.06rem;"></div>
        </div>

        <div class="bottom" v-if="info.statusFlag==1">
            <div class="collection" @click="collection">
                <img :src="require('../assets/'+(collectId?'xq_icon_shouchang_pre.png':'xq_icon_shouchang.png'))" alt="">
                <div class="title">{{collectId?'已收藏':'收藏'}}</div>
            </div>
            <gm-button style="width:2.6rem;" type='default' @click="appoint">预约看房</gm-button>
            <gm-button style="width:2.6rem;" type='primary' @click="contact">电话联系</gm-button>

        </div>

        <template>
            <div class="boxshawo" v-if="showPhone"></div>
            <transition name='slide-up'>
                <div class="phoneContent" v-if="showPhone">
                    <div class="icon">
                        <div :style="{backgroundImage:'url('+info.keeper.icon+')'}"></div>
                    </div>
                    <img @click="showPhone=false" src="@/assets/icon_tancuang_close.png" alt="" class="close">
                    <div class="title">
                        {{info.keeper.keepName}}
                    </div>
                    <div class="position">
                        {{info.keeper.position}}
                    </div>
                    <div class="phone">{{info.keeper.telephone}}</div>
                    <gm-button style="width:4rem;" @click="takePhoen" class="btn" type='primary'>拨打电话</gm-button>
                </div>
            </transition>

        </template>

    </div>
</template>
<script>
import GmButton from '@/components/Button'
import { mapState } from "vuex";
import swiper from 'swiper'
export default {
    data() {
        return {
            list: ['客厅', '厨房'],
            info: {
                houseImages: []
            },
            rentType: ['整租', '合租', '品牌公寓'],
            collectId: 0,
            showPhone: false
        }
    },
    created() {
        if (this.userInfo.id) {
            this.$http.get({
                url: '/userCollection/getOne',
                data: {
                    houseId: this.$route.query.id,
                    userId: this.userInfo.id
                }
            }).then(res => {
                if (res.success) {
                    if (res.data) {
                        this.collectId = res.data.id
                    }
                }
            })
        }




    },
    mounted() {
        window.init = () => {
            this.getInfo().then(() => {
                var mySwiper = new Swiper('.swiper-container', {
                    slidesPerView: 'auto',
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    paginationBulletRender: function (swiper, index, className) {
                        return '<div class="' + className + '"></div>';
                    }
                })
                this.initMap();

                wx.ready(() => {
                    wx.onMenuShareTimeline({
                        title: `享居屋租房———`+this.rentType[parseInt(this.info.rentingType)]+this.info.title+this.info.room+'室'+this.info.hall+'厅',
                        link: 'http://www.xiangjuwu.com/wx/auth?redirectUri=houseDetail?id=' + this.$route.query.id,
                        imgUrl: this.info.houseImages[0].imageUrl
                    })
                    wx.onMenuShareAppMessage({
                        title: `享居屋租房———`+this.rentType[parseInt(this.info.rentingType)]+this.info.title+this.info.room+'室'+this.info.hall+'厅',
                        desc: `让租房变的简单`,
                        link: 'http://www.xiangjuwu.com/wx/auth?redirectUri=houseDetail?id=' + this.$route.query.id,
                        imgUrl: this.info.houseImages[0].imageUrl
                    })
                })
            })

        };


        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src =
            "http://map.qq.com/api/js?v=2.exp&callback=init&key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K";
        document.body.appendChild(script);
    },
    computed: {
        ...mapState(["locationInfo", "userInfo"])
    },
    methods: {
        showPicture(index) {
            this.$showPicture({ list: this.info.houseImages, index: index })
        },
        collection() {
            this.$store.commit('updateLoading', true)
            if (this.collectId) {
                this.$http.post({
                    url: '/userCollection/del',
                    data: {
                        id: this.collectId
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        this.$modal.success({ msg: '取消成功', duration: 1500 })
                        this.collectId = 0
                    }
                })
            }
            else {
                this.$http.post({
                    url: '/userCollection/save',
                    data: {
                        houseId: this.$route.query.id,
                        userId: this.userInfo.id
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        this.$modal.success({ msg: '收藏成功', duration: 1500 })
                        this.collectId = res.data
                    }
                })
            }

        },
        getInfo() {
            return new Promise((resolve, reject) => {
                this.$store.commit('updateLoading', true)
                this.$http.get({
                    url: '/houseInfo/detail',
                    data: {
                        id: this.$route.query.id,
                        //   statusFlag:1
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        this.info = res.data
                        if (res.data.statusFlag != 1) {
                            this.$alert({ title: '提示', content: '该房屋暂未上架', showCancel: false, }, () => {

                            })
                        }


                        resolve()
                    }
                })

            })
        },
        initMap() {
            var center = new qq.maps.LatLng(this.info.lat, this.info.lng);

            var myOptions = {
                minZoom: 3, //此处设置地图的缩放级别  最小值是6
                maxZoom: 16,
                zoom: 16,
                center: center,
                mapTypeId: qq.maps.MapTypeId.ROADMAP,
                backgroundColor: "#f5f5f5",
                scaleControl: false,
                zoomControl: false,
                mapTypeControl: false,
                disableDoubleClickZoom: false,
                draggable: false
            };
            new qq.maps.Map(document.getElementById("Map"), myOptions);

        },
        goLocation() {
            var str = 'http://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' + this.info.lat + ',' + this.info.lng + ';title:' + this.info.housingDistrictInfo.fullName + ';addr:' + this.info.housingDistrictInfo.address + '&referer=myapp&key=GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K'
            window.location.href = str
        },
        takePhoen() {
            this.saveContact().then(() => {
                window.location.href = 'tel:' + this.info.keeper.telephone
            })

        },
        contact() {
            if (this.userHasPhone()) {
                this.showPhone = true
            }

        },
        saveContact() {


            return new Promise((resolve, reject) => {
                this.getContact().then((value) => {
                    if (value) {
                        resolve()
                    }
                    else {
                        this.$store.commit('updateLoading', true)
                        this.$http.post({
                            url: '/contactRecord/save',
                            data: {
                                houseId: this.$route.query.id,
                                userId: this.userInfo.id,
                                housekeeper: this.info.keeper.id
                            }
                        }).then(res => {
                            this.$store.commit('updateLoading', false)
                            if (res.success) {

                                resolve()
                            }
                            else {
                                this.$modal.info({ msg: res.error, duration: 1500 })
                            }
                        }).catch(() => {
                            this.$store.commit('updateLoading', false)
                            this.$modal.info({ msg: '发生错误请稍后重试', duration: 1500 })
                        })
                    }

                })


            })
        },
        getContact() {
            return new Promise((resolve, reject) => {
                this.$http.get({
                    url: '/contactRecord/getOne',
                    data: {
                        houseId: this.$route.query.id,
                        userId: this.userInfo.id,
                    }
                }).then(res => {
                    if (res.success) {
                        if (res.data) {
                            resolve(true)
                        }
                        else {
                            resolve(false)
                        }

                    }
                })
            })
        },
        appoint() {
            this.saveContact().then(() => {
                this.$router.push({
                    name: 'appoint',
                    query: {
                        id: this.$route.query.id
                    },
                    params: {
                        isNext: 1
                    }
                })
            })
        }
    },
    components: { GmButton }
}
</script>
<style lang="less" scoped>
@import '../swiper.css';
.container {
    background-color: #f2f2f2;
    .content {
        flex-grow: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bottom {
        min-height: 1.12rem;
        height: 1.12rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rem 0rem 0.12rem 0rem rgba(0, 0, 0, 0.06);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 0.3rem;
        .collection {
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
                width: 0.48rem;
                height: 0.48rem;
            }
            .title {
                font-size: 0.2rem;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                line-height: 0.28rem;
            }
        }
    }
}
.swiper-container {
    margin: 0.3rem 0.3rem 0;
    border-radius: 0.16rem;
    height: 5.16rem;
    min-height: 5.16rem;
    // background-color: #ccc;
    .swiper-slide {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

.box {
    padding: 0.3rem;
    margin: 0.3rem 0.3rem 0;
    background-color: #fff;
    border-radius: 0.16rem;

    .boxTitle {
        font-size: 0.4rem;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
        line-height: 0.56rem;
    }

    .boxMoney {
        font-size: 0.36rem;
        font-weight: bold;
        color: rgba(249, 93, 48, 1);
        line-height: 0.5rem;
        display: flex;
        align-items: flex-end;
        margin-top: 0.4rem;

        .sub {
            font-size: 0.26rem;
            font-weight: normal;
            color: rgba(153, 153, 153, 1);
            line-height: 0.36rem;
            margin-left: 0.24rem;
            margin-bottom: 0.04rem;
        }
    }

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

        .lable-item {
            background: rgba(242, 244, 245, 1);
            border-radius: 0.04rem;
            font-size: 0.22rem;
            color: rgba(21, 168, 170, 1);
            line-height: 0.32rem;
            padding: 0 0.08rem;
            margin-right: 0.1rem;
            margin-top: 0.26rem;
        }
    }

    hr {
        height: 0.02rem;
        background: rgba(242, 244, 245, 1);
        border: 0;
        margin-top: 0.3rem;
    }

    .detailList {
        display: flex;
        flex-wrap: wrap;

        .detail-item {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 0.5rem;
            .title {
                font-size: 0.26rem;
                color: rgba(153, 153, 153, 1);
                line-height: 0.36rem;
            }
            .val {
                font-size: 0.28rem;
                font-weight: bold;
                color: rgba(0, 0, 0, 1);
                line-height: 0.4rem;
                margin-top: 0.2rem;
            }
        }
    }
}

.setList {
    display: flex;
    flex-wrap: wrap;
    .set-item {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0.3rem 0 0;
        img {
            width: 0.6rem;
            height: 0.6rem;
            margin-bottom: 0.12rem;
        }

        .title {
            font-size: 0.26rem;
            color: rgba(51, 51, 51, 1);
            line-height: 0.36rem;
        }
    }
}

.message {
    font-size: 0.28rem;
    color: rgba(77, 77, 77, 1);
    line-height: 0.42rem;
    margin-top: 0.3rem;
}

.userInfo {
    display: flex;
    margin-top: 0.3rem;
    .icon {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 100%;
        min-width: 0.8rem;
        background-color: #ccc;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 0.8rem;
        margin-left: 0.2rem;
        .name {
            font-size: 0.28rem;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            line-height: 0.4rem;
        }
        .position {
            font-size: 0.24rem;
            color: rgba(170, 172, 173, 1);
            line-height: 0.34rem;
        }
    }
}
.mapcontent {
    .map {
        height: 2.4rem;
        border-radius: 0.12rem;
        position: relative;
        img {
            position: absolute;
            width: 0.68rem;
            height: 0.68rem;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 300;
        }
    }
    .title {
        font-size: 0.3rem;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
        line-height: 0.42rem;
        margin-top: 0.3rem;
    }
    .address {
        font-size: 0.26rem;
        color: rgba(102, 102, 102, 1);
        line-height: 0.36rem;
        margin-top: 0.1rem;
    }
}
.boxshawo {
    z-index: 500;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
}
.phoneContent {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 1);
    border-radius: 0.2rem;
    width: 5.4rem;
    height: 5.4rem;
    z-index: 550;
    display: flex;
    flex-direction: column;
    align-items: center;

    .close {
        width: 0.6rem;
        height: 0.6rem;
        position: absolute;
        right: 0.1rem;
        top: 0.1rem;
    }

    .icon {
        width: 1.4rem;
        height: 1.4rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        div {
            width: 1.08rem;
            height: 1.08rem;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            border-radius: 100%;
        }
    }

    .title {
        margin-top: 1.06rem;
        font-size: 0.34rem;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
        line-height: 0.48rem;
    }

    .position {
        font-size: 0.24rem;
        color: rgba(170, 172, 173, 1);
        line-height: 0.34rem;
    }

    .phone {
        font-size: 0.4rem;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
        line-height: 0.4rem;
        margin-top: 0.7rem;
    }

    .btn {
        margin-top: 1rem;
    }
}

.slide-up-enter,
.slide-up-leave-active {
    opacity: 0;
    transform: translate(-50%, -100%);
}

.slide-up-enter-active,
.slide-up-leave-active {
    transition: all 0.3s;
}
</style>


