<template>
  <div>
    <div class="activity-wrap" v-if="data && data.length">
      <!-- header -->
      <header v-if="!isInHooliApp">
        <i class="icon icon-jiantou-zuo" @click="goBack"></i>
      </header>
      <template v-for="items in data">
        <!-- textarea -->
        <div class="ql-container" :key="items.osmId" v-if="items.osmType == 1">
          <div
            class="textarea ql-editor"
            v-html="items.osmContent"
            :style="{background: $util.colorToRgba(items.osmContentModule)}"
          ></div>
        </div>
        <!-- img -->
        <a
          :key="items.osmId"
          class="img"
          :style="{background: $util.colorToRgba(items.osmContentModule)}"
          v-if="items.osmType == 2"
        >
          <img :src="items.osmContent" alt>
        </a>
        <!-- 房源1  双排-->
        <div
          class="room-list"
          v-if="items.osmType == 3"
          :key="items.osmId"
          :style="{background: $util.colorToRgba(items.osmContent)}"
        >
          <div class="room-x">
            <div
              @click="handleAppButton(item)"
              class="items scroll-x pr"
              v-for="item in items.osmContentModuleInfo"
              :key="item.buildingId"
            >
              <img :src="item.waterTag" class="pa watermark" alt>
              <img v-if="item.img" :src="item.img" class="img" alt>
              <img v-else src="../../assets/imgs/buildings-img@2x.png" class="img" alt>
              <div class="info">
                <h4>{{item.name}}</h4>
                <div class="price">
                  <i>{{item.moneyUnit}}</i>
                  <p>{{item.price}}{{item.priceSuffix}}</p>
                  <span v-if="item.rentTimeUnit">/{{item.rentTimeUnit}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 房源2  单列-->
        <!-- <div class="room-list" v-if="items.osmType == 3" :key="items.osmId">
          <div
            @click="handleAppButton(item)"
            class="items pr"
            v-for="item in items.osmContentModuleInfo"
            :key="item.buildingId">
            <img :src="item.waterTag" class="pa watermark" alt="">
            <img v-if="item.img" :src='item.img' class="img" alt="">
            <img v-else src="../../assets/imgs/buildings-img@2x.png" class="img" alt="">
            <div class="info">
              <h4>{{item.name}}</h4>
              <p class="lineHidden">{{item.roomTypeText}}</p>
              <div class="price">
                <i>{{item.moneyUnit}}</i>
                <p>{{item.price}}{{item.priceSuffix}}</p>
                <span v-if="item.rentTimeUnit">/{{item.rentTimeUnit}}</span>
              </div>
            </div>
          </div>
        </div>-->
      </template>
    </div>
    <div v-if="!data" class="room-detail-none">加载中</div>
    <div v-if="data && data.length == 0" class="noneData">
      <img src="https://static.hoolihome.com/m/images/serviceError.png" alt>
      <p>哎呀，专题活动不存在了</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      isLoading: false,
      value: "",
      env: "",
      lang: this.$store.state.langStr,
      isInHooliApp: false
    };
  },
  created() {
    if (this.$util.checkIsHooliAndroid() || this.$util.checkIsHooliIos())
      this.isInHooliApp = true;
    if (this.$util.checkIsHooliAndroid()) {
      this.env = "android";
    } else if (this.$util.checkIsHooliIos()) {
      this.env = "ios";
    }
    this.getData();
  },
  mounted() {},
  methods: {
    // 加载数据
    getData() {
      let params = {};
      params.url = this.$apis.api_item_special;
      params.data = {
        id: this.$route.params.id
      };
      this.$net.req(params, this).then(
        res => {
          this.data = res.data.specialInfo;
          let shareObj = res.data.special;
          let shareInfo = {
            title: shareObj.osTitle,
            desc: shareObj.osContent,
            link: window.location.href,
            img_url: "https://static.hoolihome.com/m/images/hooli-wechat.png"
          };
          if (this.$util.checkIsWeixin()) {
            this.$net.wxShare(shareInfo);
          } else if (this.isInHooliApp) {
            this.$net.doHooliShare(shareInfo);
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 回传 APP
    handleAppButton(item) {
      if (this.isInHooliApp) {
        let params = {
          type: 10,
          data: {
            building_id: item.id
          }
        };
        params = encodeURIComponent(JSON.stringify(params));
        if (this.env === "android") {
          window.Android.javaScriptToNative(params);
        } else if (this.env === "ios") {
          window.webkit.messageHandlers.javaScriptToNative.postMessage(params);
        }
      } else if (this.$util.checkIsWeixin() && wx && wx.miniProgram) {
        const _this = this;
        wx.miniProgram.getEnv(function(res) {
          if (res.miniprogram) {
            wx.miniProgram.navigateTo({
              url: `/pages/houseDetail/houseDetail?id=${item.id}`
            });
          } else {
            _this.$router.push({
              path: `/${_this.lang}/building/${item.id}`
            });
          }
        });
      } else {
        this.$router.push({
          path: `/${this.lang}/building/${item.id}`
        });
      }
    },
    // 返回
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    }
  }
};
</script>

<style scoped lang='less'>
.activity-wrap {
  background: #fff;
  min-height: 100vh;
  header {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    i {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.5);
      width: 34px;
      height: 34px;
      color: #fff;
      font-size: 16px;
      border-radius: 50%;
      margin: 15px 0 0 15px;
    }
  }
  > .img {
    display: flex;
    flex-direction: column;
    img {
      width: 100%;
    }
  }
  .room-list {
    padding: 5px 20px;
    > p {
      font-size: 14px;
      font-weight: 400;
      color: rgba(187, 187, 187, 1);
      line-height: 20px;
      margin-top: 6px;
    }
    .items {
      width: 100%;
      padding: 0 0 15px 0;
      display: flex;
      position: relative;
      img {
        width: 140px;
        height: 105px;
        border-radius: 5px;
        margin-right: 15px;
        object-fit: cover;
        flex-shrink: 0;
      }
      .info {
        overflow: hidden;
        h4 {
          color: #000;
          font-size: 18px;
          line-height: 22px;
          max-height: 44px;
          overflow: hidden;
          word-break: break-all;
        }
        > p {
          color: #999;
          font-size: 12px;
          margin: 5px 0 18px;
        }
        .price {
          display: flex;
          align-items: baseline;
          i {
            font-size: 11px;
            color: #ff523d;
          }
          p {
            font-size: 16px;
            font-weight: bold;
            color: #ff523d;
            margin: 0 0 0 2px;
          }
          span {
            font-size: 11px;
            color: #ff523d;
          }
        }
      }
    }
    .room-x {
      display: flex;
      overflow: hidden;
      width: 100%;
      flex-wrap: wrap;
      justify-content: space-between;
      .scroll-x {
        flex-direction: column;
        width: 48%;
        .img {
          width: 100%;
          margin: 0 0 10px;
          object-fit: cover;
        }
        .watermark {
          top: 0;
          left: 0;
          width: 100%;
        }
        .info {
          h4 {
            font-size: 15px;
            line-height: 18px;
            max-height: 36px;
            overflow: hidden;
            word-break: break-all;
          }
          > p {
            margin: 2px 0 8px;
          }
        }
      }
    }
  }
  > * {
    margin-bottom: 6px;
  }
}
.noneData {
  padding: 120px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  img {
    width: 56px;
  }
  p {
    font-size: 12px;
    color: #ccc;
    margin-top: 15px;
  }
}
</style>
