<template>
  <div class="agents-wrap">
    <van-nav-bar
      title="我的经纪人"
      left-text=""
      left-arrow
      :class="{hiddenEdit: !active}"
      right-text="编辑"
      @click-left="back"
      @click-right="edit"
    >
      <van-icon :name="backHome ? 'wap-home' : 'arrow-left'" slot="left" />
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="服务我的经纪人">
        <template v-if="data.length">
          <van-swipe-cell
            :right-width="65"
            :on-close="onClose"
            v-for="item in data"
            :key="item.houseId">
            <div
              class="broker-list flex_sb align-c"
              :key="item.id"
              v-for="item in data">
              <div
                class="flex">
                <img v-if="item.avatar" :src='item.avatar' alt="">
                <img v-else src="../../assets/imgs/avatar.png" alt="">
                <div>
                  <p>{{item.nickName}}</p>
                  <span>微信号:{{item.wechat}}</span>
                </div>
              </div>
              <a :href="'tel:' + item.mobilePrefix + item.mobile"><i class="icon icon-shezhi flex_c align-c"></i></a>
            </div>
            <span slot="right">删除</span>
          </van-swipe-cell>
        </template>
        <div class="room-detail-none" v-if="!data.length">暂无数据</div>
      </van-tab>
      <van-tab title="我收藏的经纪人">
        <template v-if="data.length">
          <van-swipe-cell
            :right-width="65"
            :on-close="onClose"
            v-for="item in data"
            :key="item.roomId">
            <div
              class="broker-list flex_sb align-c"
              :key="item.id"
              v-for="item in data">
              <div
                class="flex">
                <img v-if="item.avatar" :src='item.avatar' alt="">
                <img v-else src="../../assets/imgs/avatar.png" alt="">
                <div>
                  <p>{{item.nickName}}</p>
                  <span>微信号:{{item.wechat}}</span>
                </div>
              </div>
              <a :href="'tel:' + item.mobilePrefix + item.mobile"><i class="icon icon-shezhi flex_c align-c"></i></a>
            </div>
            <span slot="right">删除</span>
          </van-swipe-cell>
        </template>
        <div class="room-detail-none" v-if="!data.length">暂无数据</div>
        <div class="tabBar" v-if="isEdit">
          <van-checkbox v-model="itemsChecked">全选</van-checkbox>
          <van-button type="default">删除选中</van-button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "Agents",
  data() {
    return {
      data: [],
      active: 0,
      itemsChecked: false,
      cityItem: this.$util.getCookie("citySelectObj"),
      isEdit: false,
      backHome: false
    };
  },
  created() {
    if (this.$util.sessionStorage.fetch("backHome")) {
      this.backHome = true;
    }
    if (this.cityItem) {
      this.getData();
    } else {
      this.$Toast("请选择城市");
      setTimeout(() => {
        window.location.href = "/";
      }, 300);
    }
  },
  methods: {
    // 加载数据
    getData() {
      let params = {};
      params.url = this.$apis.api_buildings_list;
      params.data = {
        cityId: this.cityItem.id
      };
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
        },
        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() {}
  }
};
</script>

<style scoped lang='less'>
.agents-wrap {
  background: rgba(249, 249, 249, 1);
  min-height: 100vh;
  .broker-list {
    padding: 0 20px;
    margin: 0;
    height: 75px;
    position: relative;
  }
  .broker-list:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #ddd;
  }
  .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: 25px;
      border: 0;
      span {
        font-size: 17px;
        color: #333;
      }
    }
  }
}
</style>
