<template>
  <div class="room-wrap detail-wrap" v-if="!showFacilityList">
    <!-- 导航 -->
    <div class="navbar">
      <van-nav-bar title="房源详情" left-text="" left-arrow @click-left="back">
        <p slot="right">
          <i class="icon icon-shezhi"></i>
          <i class="icon icon-fenxiang"></i>
        </p>
      </van-nav-bar>
    </div>
    <!-- 轮播图 -->
    <detail-swipe :imgsList="data.imgsList"/>
    <div class="content-wrap">
      <div class="info">
        <div class="flex align-c">
          <h5>{{data.houseType}}</h5>
          <div class="tag flex">
            <p>门牌号#{{data.unitNum}}</p>
          </div>
        </div>
        <div class="price flex">
          <i>{{data.moneyUnit}}</i>
          <p>{{data.priceText}}</p>
          <span v-show="data.rentTimeUnit">/{{data.rentTimeUnit}}</span>
        </div>
      </div>
      <!-- 房源介绍 -->
      <div class="detail">
        <h4>房源介绍</h4>
        <div :class="{active: toggleDetail}">{{data.introduce}}</div>
        <p @click="toggleDetails">{{toggleDetail ? '收起' : '展开'}}
          <i class="icon icon-jiantou-xia" :class="{active: toggleDetail}"></i>
        </p>
      </div>
      <!-- 租赁方式 -->
      <div class="lease flex flex_sb" v-if="data.attr">
        <div class="flex">
          <p>
            <span>{{data.attr.list[0].title}}</span>
            <i>{{data.attr.list[0].value}}</i>
          </p>
          <div></div>
          <p>
            <span>{{data.attr.list[1].title}}</span>
            <i>{{data.attr.list[1].value}}</i>
          </p>
          <div></div>
          <p>
            <span>{{data.attr.list[2].title}}</span>
            <i>{{data.attr.list[2].value}}</i>
          </p>
        </div>
      </div>
      <!-- 地址 -->
      <div class="address flex_sb align-c">
        <p>地址：{{data.address}}</p>
        <img src="https://files.hoolihome.com/uploads/2017/1010/20171010142441_902.jpg" alt="">
      </div>
      <!-- 房间设施 -->
      <div class="facility" v-if="data.bulidingTagList">
        <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.bulidingTagList" :key="item.title" class="flex_sa align-c">
            <img :src="item.icon" alt="">
            <span>{{item.name}}</span>
          </p>
        </div>
      </div>
      <!-- 房源政策 -->
      <div class="policy">
        <h4>房源政策</h4>
        <div>
          <div v-for="item in data.bulidingPolicyList" :key="item.title">
            <i>{{item.title}}</i>
            <p>{{item.value}}</p>
          </div>
        </div>
        <van-button @click="goBuildings">该公寓其他户型<i class="icon icon-jiantou-you"></i></van-button>
      </div>
      <!-- tabber -->
      <div class="room-tabbar building-tabbar flex_sb">
        <div>
          <i class="icon icon-shoucang"></i>
          <span>收藏</span>
        </div>
        <!-- <van-button @click="goApply">立即申请</van-button> -->
        <!-- <van-button>联系客服</van-button> -->
      </div>
    </div>
    <!-- sku -->
    <van-popup
      v-model="showSku"
      class="skuStyle"
      overlay-class="skuLayer"
      position="bottom">
      <p @click="showSku = false"></p>
      <div class="head flex">
        <img :src="skuData.imgUrl" alt="">
        <div>
          <h5>{{skuData.name}}</h5>
          <p class="flex_c align-c">门牌号#{{skuData.unitNum}}</p>
          <div class="price flex">
            <i>{{skuData.moneyUnit}}</i>
            <p>{{skuData.minPrice}}</p>
            <span v-if="skuData.timeUnit">/{{skuData.timeUnit}}</span>
          </div>
        </div>
      </div>
      <div class="filter">
        <div
          :key="item.keys"
          :class="{date: item.keys == 'leaseData'}"
          v-for="item in skuCloneData.attrList">
          <h4>{{item.typeName}}</h4>
          <div>
            <p
              :class="{active: parms.isSelect, disabled: parms.isDisabled}"
              :key="index"
              v-for="(parms, index) in item.list"
              @click="selectedSku(parms, item.keys)"
            >{{parms.attrName}}</p>
          </div>
        </div>
      </div>
      <div class="btn flex_sb">
        <van-button>确定</van-button>
        <van-button>提交申请</van-button>
      </div>
    </van-popup>
  </div>
  <!-- 更多房间设施 -->
  <div v-else>
    <van-nav-bar
      title="配套设施"
      left-text=""
      left-arrow
      @click-left="facilityListBack"
    />
    <div class="facilityList">
      <p v-for="item in data.bulidingTagList" :key="item.title" class="flex_sa align-c">
        <img :src="item.icon" alt="">
        <span>{{item.name}}</span>
      </p>
    </div>
  </div>
</template>

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

export default {
  name: "Room",
  components: {
    DetailSwipe
  },
  data() {
    return {
      data: {},
      skuData: {},
      skuCloneData: {},
      lang: this.$store.state.langStr,
      showSku: false,
      toggleDetail: false,
      showFacilityList: false
    };
  },
  created() {
    this.getData();
    this.getSkuData();
  },
  methods: {
    // 加载数据
    getData() {
      let params = {};
      params.url = this.$apis.api_item_detail;
      params.data = {
        itemId: this.$route.params.id,
        attrId: this.$route.query.id
      };
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 加载sku数据
    getSkuData() {
      let params = {};
      params.url = this.$apis.api_item_attr;
      params.data = {
        itemId: this.$route.params.id,
        attrId: this.$route.query.id
      };
      this.$net.req(params, this).then(
        res => {
          this.skuData = res.data;
          this.skuCloneData = this.$util.deepClone(this.skuData);
          this.skuCloneData.attrList.forEach(el => {
            el.list.forEach(element => {
              element.isDisabled = 0;
            });
          });
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 立即申请
    goApply() {
      let id = this.$route.params.id;
      this.$router.push({
        path: "/" + this.lang + "/applyForm/" + id
      });
    },
    // sku组合
    selectedSku(item, keys) {
      if (!item.isDisabled) {
        // 点击可选项
        Number(item.isSelect) === 1 ? (item.isSelect = 0) : (item.isSelect = 1); // 选中当前项
        this.skuCloneData.attrList.forEach(el => {
          // 取消选中分类的其他项
          if (el.keys === keys) {
            el.list.forEach(element => {
              if (item.attrValueId !== element.attrValueId) {
                element.isSelect = 0;
              }
            });
          }
        });
        // this.skuCloneData.attrValues.forEach(element => {
        //   if (Number(item.isSelect) === 1) { // 当前项选中状态
        //     if (Number(element.keys[keys]) === Number(item.attrValueId)) { // 当前选中项存在于sku库
        //       console.log(element.keys) // 可选组合
        //       this.skuCloneData.attrList.forEach(el => {
        //         if (el.keys !== keys) { // 非当前分类
        //           el.list.some(ele => {
        //             console.log(el.keys, keys, element.keys[el.keys], ele.attrValueId)
        //             if (element.keys[el.keys] !== ele.attrValueId) {
        //               ele.isDisabled = 1
        //             } else {
        //               ele.isDisabled = 0
        //             }
        //           })
        //         }
        //       })
        //     }
        //   } else {

        //   }
        // })
      }
    },
    // 房源介绍展开收缩
    toggleDetails() {
      this.toggleDetail = !this.toggleDetail;
    },
    // 查看更多配套设施
    showFacility() {
      this.showFacilityList = true;
    },
    // 查看更多配套设施
    facilityListBack() {
      this.showFacilityList = false;
    },
    // 查看更多户型
    goBuildings() {
      this.$router.push({
        path: `/${this.lang}/building/${this.data.buildingId}`
      });
    },
    // 返回
    back() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    }
  }
};
</script>

<style scoped lang='less'>
.room-wrap {
  .content-wrap {
    .info {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      h5 {
        color: #333;
        font-size: 17px;
        font-weight: 500;
        margin-right: 10px;
      }
      .tag {
        p {
          padding: 0 7px;
          height: 16px;
          background: rgba(238, 238, 238, 1);
          border-radius: 2px;
          color: #999;
          font-size: 11px;
          margin-right: 5px;
        }
      }
      .price {
        align-items: baseline;
        i {
          font-size: 12px;
          color: #ff523d;
        }
        p {
          font-size: 17px;
          color: #ff523d;
          font-weight: bold;
          margin-left: 4px;
        }
        span {
          font-size: 12px;
          color: #000;
        }
      }
    }
    .address {
      padding: 15px 0;
      p {
        color: #222;
        font-size: 15px;
        font-weight: 400;
      }
      img {
        width: 60px;
        height: 60px;
        border-radius: 5px;
        flex-shrink: 0;
      }
    }
    .lease {
      > div {
        width: 100%;
        justify-content: space-around;
        div {
          width: 1px;
          height: 24px;
          background: #ccc;
          margin: 6px 30px;
        }
        p {
          display: flex;
          flex-direction: column;
          span {
            font-size: 13px;
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
            margin: 0 0 3px 0;
          }
          i {
            font-size: 13px;
            font-weight: 500;
            color: #ff523d;
          }
        }
      }
      > p {
        span {
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 5px;
          background: rgba(204, 204, 204, 1);
          margin-left: 5px;
        }
        span:first-child {
          margin-left: 0;
        }
      }
    }
    .policy {
      > div {
        margin: 20px 0;
        div {
          margin-bottom: 10px;
          display: flex;
          i {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            width: 70px;
            height: 25px;
            background: rgba(249, 249, 249, 1);
            border-radius: 4px;
            font-size: 12px;
            font-weight: 400;
            color: #666;
          }
          p {
            font-size: 15px;
            color: #666;
            font-weight: 400;
            line-height: 24px;
            margin-left: 15px;
          }
        }
      }
      button {
        width: 100%;
        font-size: 15px;
        font-weight: 500;
        color: #ff523d;
        height: 45px;
        line-height: 43px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #ff523d;
        i {
          display: inline-block;
          font-size: 15px;
          margin-left: 2px;
        }
      }
    }
    .room-tabbar {
      margin: 15px 0;
      div {
        margin: 0 18px 0 8px;
      }
      button {
        width: 50%;
        margin-right: 5px;
      }
      button:nth-child(2) {
        background: rgba(255, 82, 61, 1);
        margin-right: 10px;
      }
    }
  }
  .skuLayer {
    background: rgba(0, 0, 0, 0.3);
  }
  .skuStyle {
    max-height: calc(100vh - 58px);
    background: rgba(255, 255, 255, 1);
    border-radius: 16px 16px 0px 0px;
    padding: 0 20px 15px;
    > p {
      width: 54px;
      height: 5px;
      background: rgba(221, 221, 221, 1);
      border-radius: 2px;
      margin: 10px auto 26px;
    }
    .head {
      margin: 0 0 30px 0;
      img {
        width: 133px;
        height: 100px;
        border-radius: 5px;
        margin: 0 15px 0 0;
      }
      > div {
        h5 {
          color: #333;
          font-size: 17px;
          font-weight: 900;
        }
        > p {
          padding: 0 5px;
          height: 25px;
          margin: 6px 0 22px;
          background: #f9f9f9;
          border-radius: 4px;
          color: #999;
          font-size: 12px;
        }
        .price {
          align-items: baseline;
          i {
            font-size: 14px;
            color: #ff523d;
          }
          p {
            font-size: 24px;
            color: #ff523d;
            font-weight: bold;
            margin-left: 4px;
          }
          span {
            font-size: 14px;
            color: #000;
          }
        }
      }
    }
    .filter {
      max-height: calc(100vh - 305px);
      overflow-y: auto;
      > div {
        margin-bottom: 10px;
        h4 {
          font-size: 16px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 23px;
          margin-bottom: 15px;
        }
        div {
          overflow: hidden;
          p {
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 30px;
            background: rgba(249, 249, 249, 1);
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            // margin: 0 2.5% 10px 0;
            margin: 0 10px 10px 0;
            border: 1px solid #f9f9f9;
            min-width: 75px;
            // width: 23%;
          }
          p.active {
            background: #fff;
            color: rgba(255, 82, 61, 1);
            border-color: rgba(255, 82, 61, 1);
          }
          p.disabled {
            background: #fff;
            color: #ebebeb;
            border-color: #ebebeb;
          }
          // p:nth-child(4n){
          //   margin-right: 0;
          // }
        }
      }
      .date {
        p {
          width: 105px;
          // min-width: 75px;
        }
        // p:nth-child(4n){
        //   margin-right: 10px;
        // }
        // p:nth-child(3n){
        //   margin-right: 0;
        // }
      }
    }
    .btn {
      margin-top: 10px;
      button {
        width: 50%;
        font-size: 15px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        height: 44px;
        line-height: 42px;
        background: #ff523d;
        border-radius: 4px;
        border: 0;
      }
      button:last-child {
        background: rgba(255, 179, 85, 1);
        margin-left: 10px;
      }
    }
  }
}
</style>
