<template>
  <div v-if="data.name">
    <template v-if="$route.path.indexOf('rooms') == -1">
      <div class="building-wrap detail-wrap" v-if="!showFacilityList">
        <!-- 导航 -->
        <div class="navbar">
          <nav-bar title=""/>
        </div>
        <!-- 轮播图 -->
        <detail-swipe :imgsList="data.imgs" :marketUrl="data.marketUrl"/>
        <div class="content-wrap">
          <!-- building信息 -->
          <div class="info">
            <h3>{{data.name}}</h3>
            <div class="location flex align-c" v-show="false">
              <i class="icon icon-shouyezuobiao"></i>
              <p class="lineHidden">{{data.address}}</p>
            </div>
            <div class="tag">
              <i
                class="flex_c align-c"
                :style="{color: item.color,background: $util.colorToRgba(item.bgColor)}"
                v-for="item in data.marketTags"
                :key="item.title"
                >{{item.title}}</i>
            </div>
          </div>
          <!-- 地址 -->
          <div class="address flex_sb align-c">
            <p>地址：{{data.address}}</p>
            <img src="../assets/imgs/maps@2x.png" alt="">
          </div>
          <!-- 房源介绍 -->
          <div class="detail" v-show="data.introduce">
            <h4>房源介绍</h4>
            <div :class="{active: toggleDetail}" v-html="data.introduce"></div>
            <p @click="toggleDetails" class="toggle" :class="{active: !toggleDetail}">{{toggleDetail ? '收起' : '展开'}}
              <i class="icon icon-jiantou-xia" :class="{active: toggleDetail}"></i>
            </p>
          </div>
          <!-- 房间信息 -->
          <div class="room">
            <div class="flex_sb align-c title">
              <h4>房间信息</h4>
              <div @click="handleRoomList">
                <p>更多</p>
                <i class="icon icon-jiantou-you flex_c align-c"></i>
              </div>
            </div>
            <room-information :data="data" :filterData="data"/>
          </div>
          <!-- 经纪人 -->
          <!-- <div class="broker">
            <div class="flex_sb align-c title">
              <h4>推荐经纪人</h4>
              <p class="flex_c align-c" v-if="data.agents.refresh">
                <i class="icon icon-shuaxin flex_c align-c"></i>
                换一批
              </p>
            </div>
            <div
              class="broker-list flex_sb align-c"
              :key="item.id"
              v-for="item in data.agents.list">
              <div
                class="flex">
                <img :src="item.avatar" alt="">
                <div>
                  <p>{{item.nickName}}</p>
                  <span>微信号:{{item.wechat}}</span>
                </div>
              </div>
              <a :href="'tel:' + item.mobilePrefix + item.mobile"><i class="icon flex_c align-c"></i></a>
            </div>
          </div> -->
          <!-- 配套设施 -->
          <div class="facility" v-show="data.AppfacilitiesTags.length">
            <div class="flex_sb align-c title" @click="showFacility">
              <h4>配套设施</h4>
              <div>
                <p>更多</p>
                <i class="icon icon-jiantou-you flex_c align-c"></i>
              </div>
            </div>
            <div class="list">
              <p v-for="item in data.AppfacilitiesTags" :key="item.title" class="flex_sa align-c">
                <img :src="item.icon" alt="">
                <span>{{item.name}}</span>
              </p>
            </div>
          </div>
          <!-- 服务介绍 -->
          <div class="service" v-show="data.service.length">
            <h4>服务介绍</h4>
            <div class="list">
              <p v-for="item in data.service" :key="item.title" class="flex_sa align-c">
                <img :src="item.icon" alt="">
                <span>{{item.title}}</span>
              </p>
            </div>
          </div>
          <!-- 周边及交通 -->
          <div class="traffic" v-show="false">
            <div class="flex_sb align-c title">
              <h4>周边及交通</h4>
              <div>
                <p>更多</p>
                <i class="icon icon-jiantou-you flex_c align-c"></i>
              </div>
            </div>
            <div class="room-detail">
              <img src="http://img3.imgtn.bdimg.com/it/u=1913714159,4051956008&fm=26&gp=0.jpg" alt="">
            </div>
          </div>
          <!-- 房源编号 -->
          <div class="codeNumber" v-show="data.code">
            <p>房源编号：{{data.code}}</p>
          </div>
          <!-- tabber -->
          <div class="building-tabbar flex_sb">
            <div @click="checkCollection" :class="{active: isCollection}">
              <i class="icon" :class="[isCollection ? 'icon-shoucangxuanzhong' : 'icon-shoucang']"></i>
              <span>{{isCollection ? '已收藏' : '收藏'}}</span>
            </div>
            <van-button @click="goApply">{{data.building ? '申请预定' : '预约顾问'}}</van-button>
            <van-button @click="handelQimo">联系客服</van-button>
          </div>
        </div>
      </div>
      <!-- 更多配套设施 -->
      <div v-else>
        <van-nav-bar
          title="配套设施"
          left-text=""
          left-arrow
          @click-left="facilityListBack"
        />
        <div class="facilityList">
          <div v-for="item in data.facilitiesTags" :key="item.title" class="flex">
            <span class="title">{{item.name}}</span>
            <div>
              <p class="flex_sa align-c" v-for="child in item.tags" :key="child.name">
                <img :src="child.icon" alt="">
                <span>{{child.name}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </template>
    <router-view v-else/>
  </div>
  <div v-else id="loading">
    <img src="../assets/imgs/loading.gif" alt="">
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";
import DetailSwipe from "@/components/common/DetailSwipe";
import RoomInformation from "@/components/common/RoomInformation";

export default {
  name: "Building",
  components: {
    NavBar,
    DetailSwipe,
    RoomInformation
  },
  data() {
    return {
      data: {
        agents: {},
        facilitiesTags: [],
        roomInfos: [],
        service: [],
        AppfacilitiesTags: []
      },
      lang: this.$store.state.langStr,
      showFacilityList: false,
      toggleDetail: false,
      isCollection: false
    };
  },
  created() {
    this.getData();
    let query = this.$route.query;
    if (query.register_source && query.distributor_token) {
      this.$util.sessionStorage.save("distributor", JSON.stringify(query));
    }
    this.setQimoClient();
    // if (this.$util.checkIsLogin()) {
    //   this.setQimoClient();
    // }
  },
  methods: {
    // 设置客服信息
    setQimoClient() {
      let { navigator } = window;
      let systemInfo = {
        appCodeName: navigator.appCodeName || "",
        appName: navigator.appName || ""
      };
      let userInfo = null;
      if (this.$util.getLoginUserInfo()) {
        userInfo = JSON.parse(
          decodeURIComponent(this.$util.getLoginUserInfo())
        );
      }
      if (userInfo) {
        window.qimoClientId = {
          userId: userInfo.id,
          nickName: userInfo.userName,
          customField: {
            用户名称: userInfo.userName,
            用户ID: userInfo.id,
            电话: `${userInfo.mobilePrefix || ""} ${userInfo.mobile || ""}`,
            邮箱: userInfo.email || "",
            设备类型: "h5",
            设备ID: `${systemInfo.appCodeName} ${systemInfo.appName}`
          }
        };
      } else {
        let UNIQUE_TAG_QIMO = window.localStorage.getItem("UNIQUE_TAG_QIMO");
        if (!UNIQUE_TAG_QIMO) {
          UNIQUE_TAG_QIMO = `h5_qimo_${new Date().valueOf().toString()}${
            Math.random()
              .toString()
              .split(".")[1]
          }`;
          window.localStorage.setItem("UNIQUE_TAG_QIMO", UNIQUE_TAG_QIMO);
        }
        window.qimoClientId = {
          userId: UNIQUE_TAG_QIMO,
          nickName: "h5端未登录用户",
          customField: {
            用户名称: "h5端未登录用户",
            设备类型: "h5",
            设备ID: `${systemInfo.appCodeName} ${systemInfo.appName}`
          }
        };
      }
      this.loadQimoScript();
    },
    // 客服
    handelQimo() {
      window.qimoChatLoaded && window.qimoChatClick();
      // let checkIsLogin = this.$util.checkIsLogin();
      // if (checkIsLogin) {
      //   window.qimoChatLoaded && window.qimoChatClick();
      // } else {
      //   this.$Dialog
      //     .confirm({
      //       message: "请登录后咨询在线客服"
      //     })
      //     .then(() => {
      //       let lang = this.$store.state.langStr;
      //       let { fullPath } = this.$route;
      //       window.location.href = `/${lang}/login?next=${encodeURIComponent(
      //         fullPath
      //       )}`;
      //     })
      //     .catch(() => {});
      // }
    },
    // 加载客服
    loadQimoScript() {
      if (!document.getElementById("QIMO_SCRIPT_ID")) {
        let scriptQimo = document.createElement("script");
        scriptQimo.id = "QIMO_SCRIPT_ID";
        scriptQimo.type = "text/javascript";
        scriptQimo.src =
          "https://webchat.7moor.com/javascripts/7moorInit.js?accessId=7f89ace0-e26a-11e8-a722-694132dd65fb&autoShow=false&language=ZHCN";
        document.body.appendChild(scriptQimo);
      }
    },
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_buildings_detail;
      params.data = {
        id: this.$route.params.id
      };
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
          this.data.collection
            ? (this.isCollection = true)
            : (this.isCollection = false);
        },
        e => {
          if (Number(e.code) !== 0) {
            this.$Dialog
              .alert({
                message: e.msg
              })
              .then(() => {
                this.$router.go(-1);
              });
          }
        }
      );
    },
    // 收藏
    checkCollection() {
      let params = {};
      params.data = {
        cate: "1"
      };
      if (this.isCollection) {
        params.url = this.$apis.api_user_collection_cancel;
        params.data.hid = JSON.stringify([Number(this.$route.params.id)]);
      } else {
        params.url = this.$apis.api_user_collection_add;
        params.data.hid = Number(this.$route.params.id);
      }
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) this.isCollection = !this.isCollection;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 房源介绍展开收缩
    toggleDetails() {
      this.toggleDetail = !this.toggleDetail;
    },
    // 跳转更多房间信息
    handleRoomList() {
      let id = this.$route.params.id;
      this.$router.push({
        path: "/" + this.lang + "/building/" + id + "/rooms"
      });
    },
    // 立即申请
    goApply() {
      if (this.$util.storage.fetch("userToken")) {
        let id = this.$route.params.id;
        let data = {
          img: this.data.imgs[0],
          houseName: this.data.name,
          rentTime: this.data.rentTime,
          rentNum: this.data.rentNum,
          moneyUnit: this.data.moneyUnit,
          priceText: this.data.priceText,
          rentTimeUnit: this.data.rentTimeUnit
        };
        this.$util.sessionStorage.save("buildingInfo", data);
        this.$router.push({
          path: `/${this.lang}/applyForm?houseId=${id}`
        });
      } else {
        let { fullPath } = this.$route;
        this.$router.push({
          path: `/${this.lang}/login?next=${encodeURIComponent(fullPath)}`,
          replace: true
        });
      }
    },
    // 返回
    back() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    // 查看更多配套设施
    showFacility() {
      this.showFacilityList = true;
    },
    // 关闭查看更多配套设施
    facilityListBack() {
      this.showFacilityList = false;
    }
  }
};
</script>

<style scoped lang='less'>
.building-wrap {
  .content-wrap {
    .info {
      h3 {
        font-size: 24px;
        line-height: 28px;
        font-weight: 900;
        color: #000;
        max-height: 58px;
        overflow: hidden;
      }
      .location {
        margin: 12px 0 10px;
        i {
          margin: 0 6px 0 0;
          color: #666;
          font-size: 13px;
        }
        p {
          color: #666;
          font-size: 13px;
        }
      }
      .tag {
        display: flex;
        flex-wrap: wrap;
        margin-top: 15px;
        i {
          height: 15px;
          border-radius: 2px;
          padding: 0 5px;
          font-size: 11px;
          margin: 0 8px 5px 0;
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .new {
          background: rgba(107, 150, 255, 0.1);
          color: #4a7bf1;
        }
      }
    }
    .address {
      padding: 15px 0;
      p {
        color: #222;
        font-size: 15px;
        font-weight: 400;
      }
      img {
        width: 60px;
        height: 60px;
        border-radius: 5px;
        flex-shrink: 0;
      }
    }
    .broker {
      .title {
        margin-bottom: 20px;
        p {
          i {
            width: 24px;
            height: 24px;
            font-size: 14px;
            color: #ff523d;
          }
        }
      }
    }
    .building-tabbar {
      margin: 15px 0;
      div {
        margin: 0 18px 0 8px;
        width: 36px;
        flex-shrink: 0;
      }
      button {
        width: 50%;
        margin-right: 5px;
      }
      button:nth-child(2) {
        background: rgba(255, 82, 61, 1);
        margin-right: 10px;
      }
    }
    .service {
      .list {
        overflow: hidden;
        p {
          margin-top: 15px;
          display: flex;
          float: left;
          width: 25%;
          flex-direction: column;
          img {
            margin-bottom: 12px;
            width: 40px;
            width: 40px;
          }
          span {
            text-align: center;
            color: #666;
            line-height: 17px;
          }
        }
      }
    }
    .traffic {
      .title {
        i {
          width: 25px;
          height: 25px;
          font-size: 15px;
          color: #999;
        }
      }
      img {
        width: 100%;
        height: 100px;
        border-radius: 5px;
        margin: 15px 0 0;
      }
    }
    .codeNumber {
      padding: 30px 0 25px;
      text-align: center;
      position: relative;
      p {
        color: #ccc;
        font-size: 12px;
        background: #fff;
        padding: 0 10px;
        position: relative;
        z-index: 2;
        display: inline-block;
      }
    }
    .codeNumber:before {
      content: "";
      position: absolute;
      top: 31px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #ddd;
    }
  }
}
</style>
