<template>
  <div class="attentions-wrap">
    <van-nav-bar
      title="我的收藏"
      left-text=""
      left-arrow
      :class="{active: isEdit}"
      :right-text="data.length ? isEdit ? '完成' : '编辑' : ''"
      @click-left="back"
      @click-right="edit"
    >
      <van-icon :name="backHome ? 'wap-home' : 'arrow-left'" slot="left" />
    </van-nav-bar>
    <van-pull-refresh v-if="data.length" v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check='false'
        :offset="200"
        @load="onLoad"
      >
        <div
          v-for="item in data"
          :key="item.id"
          class="items goods">
          <div class="checkbox" @click="editItems(item)" v-if="isEdit">
            <van-checkbox v-model="item.checked"></van-checkbox>
          </div>
          <div class="img pr" @click="showDetail(item)">
            <img v-if="item.marketTagUrl" :src="item.marketTagUrl" class="pa tag" alt="">
            <img v-if="item.imgUrl" :src='item.imgUrl' alt="">
            <img v-else src="//static.hoolihome.com/m/assets/img/buildings-img@2x.png" alt="">
          </div>
          <div class="info" @click="showDetail(item)">
            <h4 class="lineTwoHidden">{{item.houseName}}</h4>
            <p class="lineHidden">{{item.roomTypeText}}</p>
            <div class="tag">
              <p
                :style="{color: tag.color,background: $util.colorToRgba(tag.bgColor)}"
                v-for="tag in item.tags"
                :key="tag.title"
                >{{tag.title}}</p>
            </div>
            <div class="price">
              <i>{{item.unit}}</i>
              <p>{{item.priceText}}</p>
              <span v-show="item.rentTimeUnit">/{{item.rentTimeUnit}}</span>
            </div>
          </div>
        </div>
          <!-- <span slot="right">删除</span> -->
        <!-- </van-swipe-cell> -->
      </van-list>
      <is-empty v-if="isEmpty"></is-empty>
    </van-pull-refresh>
    <div class="room-detail-none" v-if="!data.length">暂无数据</div>
    <div class="tabBar" v-if="isEdit">
      <div @click="allChecked">
        <van-checkbox v-model="itemsChecked">全选</van-checkbox>
      </div>
      <van-button type="default" @click="deleteItem" :class="{active: isActive}">删除选中</van-button>
    </div>
  </div>
</template>

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

export default {
  name: "Attentions",
  components: {
    IsEmpty
  },
  data() {
    return {
      data: [],
      pages: {},
      page: 0,
      isEmpty: false,
      loading: false,
      finished: false,
      isLoading: false,
      itemsChecked: false,
      isActive: false,
      isEdit: false,
      lang: this.$store.state.langStr,
      backHome: false
    };
  },
  created() {
    if (this.$util.sessionStorage.fetch("backHome")) {
      this.backHome = true;
    }
    this.getData();
  },
  watch: {
    isEdit(val) {
      if (!val) {
        this.itemsChecked = false;
        this.allChecked();
      }
    },
    data: {
      handler: function() {
        let n = 0;
        this.data.forEach(element => {
          if (element.checked) {
            n++;
          }
        });
        n > 0 ? (this.isActive = true) : (this.isActive = false);
      },
      deep: true
    }
  },
  methods: {
    // 上拉加载
    onLoad() {
      setTimeout(() => {
        this.getData("onLoad");
      }, 500);
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.page = 0;
        this.getData("onRefresh");
      }, 500);
    },
    // 加载数据
    getData(val) {
      let params = {};
      params.url = this.$apis.api_user_collection_list;
      this.page = this.page + 1;
      params.data = {
        limit: 10,
        cate: "1",
        page: this.page
      };
      this.$net.req(params, this).then(
        res => {
          let data = res.data.list;
          this.pages = {
            totalPage: res.data.totalPage,
            totalCount: res.data.totalCount,
            limit: res.data.limit,
            page: res.data.page
          };
          data.forEach(element => {
            element.checked = false;
          });
          if (this.page * params.data.limit >= this.pages.totalCount) {
            this.finished = true;
            this.isEmpty = true;
          }
          if (val === "onLoad") {
            this.loading = false;
            this.data = this.data.concat(data);
          } else {
            this.data = data;
          }
          if (val === "onRefresh") {
            this.finished = false;
            this.isEmpty = false;
            this.$toast("刷新成功");
            this.isLoading = false;
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 滑动删除
    onClose(clickPosition, instance) {
      switch (clickPosition) {
        case "left":
        case "cell":
        case "outside":
          instance.close();
          break;
        case "right":
          this.$Dialog
            .confirm({
              message: "确定删除吗？"
            })
            .then(() => {
              instance.close();
            });
          break;
      }
    },
    // 返回
    back() {
      if (this.backHome) {
        this.$util.sessionStorage.remove("backHome");
        this.$router.push("/");
      } else {
        window.history.length > 1
          ? this.$router.go(-1)
          : this.$router.push("/");
      }
    },
    // 多选
    edit() {
      this.isEdit = !this.isEdit;
    },
    // 选择某一项
    editItems() {
      let data = this.$util.deepClone(this.data);
      let i = 0;
      data.forEach(element => {
        if (element.checked) i++;
      });
      i === data.length
        ? (this.itemsChecked = true)
        : (this.itemsChecked = false);
      this.data = data;
    },
    //查看详情
    showDetail(item) {
      window.location.href = `/${this.lang}/building/${item.code}`;
    },
    // 全选
    allChecked() {
      let data = this.$util.deepClone(this.data);
      data.forEach(element => {
        this.itemsChecked
          ? (element.checked = true)
          : (element.checked = false);
      });
      this.data = data;
    },
    // 删除选中
    deleteItem() {
      let arr = [];
      this.data.forEach(element => {
        if (element.checked) {
          arr.push(element.houseId);
        }
      });
      let params = {};
      params.url = this.$apis.api_user_collection_cancel;
      params.data = {
        cate: "1",
        hid: JSON.stringify(arr)
      };
      this.$Dialog
        .confirm({
          message: "确定删除吗？"
        })
        .then(() => {
          this.$net.req(params, this).then(
            res => {
              if (Number(res.code) === 0) {
                this.$Toast("删除成功");
                this.isEdit = false;
                this.page = 0;
                this.getData();
              }
            },
            e => {
              this.$Toast(e.msg);
            }
          );
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style scoped lang='less'>
.attentions-wrap {
  background: #fff;
  min-height: 100vh;
  .van-pull-refresh {
    height: 100vh;
    overflow: auto;
  }
  .items {
    .checkbox {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 26px 20px 0 0;
    }
  }
  .tabBar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    .van-checkbox {
      font-size: 15px;
      color: #000;
    }
    button {
      width: 140px;
      height: 45px;
      background: rgba(249, 249, 249, 1);
      border-radius: 24px;
      border: 0;
      span {
        font-size: 17px;
        color: #333;
      }
    }
    .active {
      background: #ff523d;
      color: #fff;
    }
  }
}
</style>
