<template>
  <div class="filter">
    <!-- 搜索 -->
    <p class="title">搜房</p>
    <template v-if="data.price">
      <header>
        <div class="search-wrap pr" @click="goSearch">
          <i class="icon icon-sousuokuangsousuo"/>
          <input
            type="text"
            disabled
            placeholder="目的地、区域、公寓名称">
        </div>
      </header>
      <!-- 筛选 -->
      <div class="filter-wrap" v-if="itemData">
        <div class="sort-bar">
          <div class="sort">
              <!-- 租金 -->
              <div class="droplist">
                <h4>租金</h4>
                <p class="flex_c">{{moneyUnit}}{{rangeSlider[0]}}-{{rangeSliderMax || moneyUnit + rangeSlider[1]}}</p>
                <div class="range">
                    <el-slider
                      v-model="rangeSlider"
                      range
                      :step="step"
                      :show-tooltip=false
                      :min="min"
                      :max="max">
                    </el-slider>
                </div>
              </div>
              <!-- 租赁方式 -->
              <div class="droplist" v-if="itemData.other">
                <h4>租赁方式</h4>
                <template
                  v-for="items in itemData.other.values"
                >
                  <div
                    :key="items.keys"
                    class="radio flex"
                    v-if="items.keys === 'rentType'">
                    <p
                      class="item"
                      :class="{active: rentTypeVal.indexOf(item.value) !== -1}"
                      v-for="item in items.values"
                      :key="item.value"
                      @click="setDroplistType(item, items.select)">{{item.name}}</p>
                  </div>
                </template>
              </div>
              <!-- 户型 -->
              <div class="droplist" v-if="itemData.roomType">
                <h4>房间户型</h4>
                <div
                  v-for="(item, index) in itemData.roomType.values"
                  :key="item.value"
                  class="wrap">
                  <p>{{item.name}}</p>
                  <div class="radio flex">
                    <p
                      class="item"
                      :class="{active: item.checked.indexOf(child.value) !== -1}"
                      v-for="child in item.values"
                      @click="setDroplistSwitch(child, index, item.select)"
                      :key="child.value">{{child.name}}</p>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
      <div class="btn" v-if="itemData">
        <van-button type="danger" @click="filter">开始找房</van-button>
      </div>
    </template>
    <div v-if="!data.price && !noData" id="loading">
      <img src="../assets/imgs/loading.gif" alt="">
    </div>
    <div v-if="!data.price && noData" id="noData">
      <img src="../assets/imgs/none-building.png" alt="">
      <span>这里一片寂静，一无所有</span>
    </div>
    <tab-bar :selected="selected"/>
  </div>
</template>

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

export default {
  components: {
    TabBar
  },
  data() {
    return {
      data: {},
      lang: this.$store.state.langStr,
      itemData: null,
      noData: false,
      selected: 1,
      rangeSlider: [0, 10000],
      step: null,
      rangeSliderMax: "不限",
      cityItem: this.$util.storage.fetch("CityItem"),
      min: null,
      max: null,
      moneyUnit: null,
      rentTypeVal: []
    };
  },
  created() {
    this.verificationCity();
  },
  watch: {
    rangeSlider(val) {
      if (this.max - val[1] < this.step) {
        this.rangeSliderMax = "不限";
        this.rangeSlider[1] = this.max;
      } else {
        this.rangeSliderMax = "";
      }
    }
  },
  methods: {
    // 重新请求国家城市进行验证
    getCountryList() {
      let params = {};
      params.url = this.$apis.api_national_real_all_city;
      this.$net.req(params, this).then(res => {
        this.$store.commit("setCountryArr", res.data);
        this.verificationCity();
      });
    },
    // 验证城市
    verificationCity() {
      let cityName = this.$route.params.cityTag;
      let countryArr = this.$store.state.countryArr;
      let isTrue = null;
      if (countryArr.length) {
        countryArr.some(el => {
          el.son.some(element => {
            if (cityName == element.other_name) {
              isTrue = true;
              this.$util.storage.save("CityItem", element);
              this.cityItem = element;
              this.getFilter();
              return true;
            }
          });
        });
      } else {
        this.getCountryList();
      }
      if (!isTrue && countryArr.length) {
        this.$Dialog
          .alert({
            message: "城市信息错误，请重新选择。"
          })
          .then(() => {
            this.$router.push({
              path: `/${this.lang}/guide`
            });
          });
      }
    },
    // 获取筛选项
    getFilter() {
      let params = {};
      params.url = this.$apis.api_filter_attr;
      params.data = {
        cityId: this.cityItem.id
      };
      this.$net.req(params, this).then(
        res => {
          if (!res.data.price) {
            this.noData = true;
            return;
          }
          this.data = res.data;
          this.itemData = this.$util.deepClone(this.data);
          this.itemData.roomType.values.forEach(element => {
            element.checked = [];
          });
          this.moneyUnit = res.data.price.moneyUnit;
          this.min = res.data.price.values.minPrice.value;
          this.max = res.data.price.values.maxPrice.value;
          this.step = Math.ceil(this.max / res.data.price.unit);
          this.rangeSlider = [this.min, this.max];
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 搜索
    goSearch() {
      this.$router.push({
        path: `/${this.lang}/${this.cityItem.other_name}/search`
      });
    },
    // 租赁方式
    setDroplistType(item, select) {
      // 判断 1单选、2多选
      if (Number(select) === 1) {
        this.rentTypeVal[0] === item.value
          ? (this.rentTypeVal = [])
          : (this.rentTypeVal[0] = item.value);
      } else {
        let eq = this.rentTypeVal.indexOf(item.value);
        if (eq === -1) {
          this.rentTypeVal.push(item.value);
        } else {
          this.rentTypeVal.splice(eq, 1);
        }
      }
    },
    // 房间户型
    setDroplistSwitch(child, index, select) {
      let data = this.itemData;
      let _index = data.roomType.values[index];
      // 判断 1单选、2多选
      if (Number(select) === 1) {
        _index.checked[0] === child.value
          ? (_index.checked = [])
          : (_index.checked[0] = child.value);
      } else {
        let eq = _index.checked.indexOf(child.value);
        if (eq === -1) {
          _index.checked.push(child.value);
        } else {
          _index.checked.splice(eq, 1);
        }
      }
      this.itemData = this.$util.deepClone(data);
    },
    // 筛选找房
    filter() {
      let data = {};
      if (
        this.min !== this.rangeSlider[0] ||
        this.max !== this.rangeSlider[1]
      ) {
        data.minPrice = this.rangeSlider[0];
        data.maxPrice = this.rangeSlider[1];
      }
      if (this.rentTypeVal.length) data.rentType = this.rentTypeVal.join(",");
      this.itemData.roomType.values.forEach(element => {
        if (element.checked.length)
          data[element.keys] = element.checked.join(",");
      });
      this.$router.push({
        path: `/${this.lang}/${this.cityItem.other_name}/buildings`,
        query: data
      });
    }
  }
};
</script>

<style scoped lang='less'>
.filter {
  min-height: 100vh;
  position: relative;
  .title {
    font-size: 17px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 24px;
    padding: 10px 0;
    text-align: center;
  }
  header {
    padding: 0 15px 10px;
    position: relative;
    z-index: 3;
    border-bottom: 1px solid #ddd;
    .search-wrap {
      height: 45px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      input {
        height: 45px;
        line-height: 45px;
        border-radius: 4px;
        border: 0;
        font-size: 14px;
        color: #bbb;
        width: 100%;
        padding: 4px 10px 4px 30px;
        background: #fafafa;
      }
      input::-webkit-input-placeholder {
        color: #bbb;
      }
      .input:-moz-placeholder {
        color: #bbb;
      }
      .input:-ms-input-placeholder {
        color: #bbb;
      }
      i {
        position: absolute;
        left: 10px;
        top: 16px;
        font-size: 14px;
        color: #bbb;
      }
    }
  }
  .btn {
    left: calc(50vw - 100px);
    bottom: 68px;
    position: fixed;
    button {
      width: 200px;
      height: 44px;
      border: 0;
      background: linear-gradient(
        134deg,
        rgba(255, 143, 85, 1) 0%,
        rgba(255, 108, 80, 1) 51%,
        rgba(255, 84, 61, 1) 100%
      );
      border-radius: 22px;
      font-size: 15px;
      font-weight: 400;
      color: #fff;
      box-shadow: 0px 10px 17px 0px rgba(0, 0, 0, 0.1);
    }
  }
  .filter-wrap {
    padding: 15px 20px 48px;
    .sort {
      margin-bottom: 64px;
    }
    .droplist {
      h4 {
        font-size: 20px;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 28px;
        margin: 40px 0 15px;
      }
      .range {
        margin: 8px 10px 0;
      }
      .radio {
        flex-wrap: wrap;
      }
      .wrap {
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
        > p {
          font-size: 15px;
          margin-bottom: 15px;
        }
      }
      .wrap:last-child {
        border: 0;
      }
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 75px;
        height: 30px;
        border-radius: 15px;
        background: rgba(249, 249, 249, 1);
        border: 1px solid #f9f9f9;
        color: #222;
        margin: 0 10px 15px 0;
        flex-shrink: 0;
      }
      .item.active {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(255, 82, 61, 1);
        color: rgba(255, 82, 61, 1);
      }
    }
    .droplist:first-child {
      h4 {
        margin-top: 0;
      }
    }
  }
  #noData {
    height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -20%;
    justify-content: center;
    flex-direction: column;
    img {
      width: 60px;
      margin-bottom: 20px;
    }
    span {
      font-size: 13px;
      color: #ddd;
    }
  }
}
</style>
