<template>
  <view>
    <view class="main-content" v-if="Object.values(list).length > 0">
      <view class="list-content">
        <view class="top-content">
          <view class="num">{{ total }}</view>
          <view class="title">下级人数</view>
        </view>
        <view class="list">
          <view class="list-box" v-for="(item,index) in list" :key="index">
            <!-- 顶部信息 -->
            <view class="top-info">
              <view class="user-info">
                <image class="avatar" :src="item.user.avatar || ''"></image>
                <view class="user-title">{{ item.user.nickname || '' }}</view>
              </view>
              <view class="role" v-if="item.corporate_name">{{ item.corporate_name || '' }}</view>
            </view>
            <!-- 手机号&地址 -->
            <view class="top-bottom-info">
              <view class="contact_phone">{{ item.user.phone || '' }}</view>
              <view class="address">{{ getAddressText(item) }}</view>
            </view>
            <!--统计信息 -->
            <view class="statistics">
              <!-- todo： 统计信息  开发中-->
            </view>
          </view>
        </view>
      </view>
    </view>
    <emptyPage v-else title="暂无信息～"></emptyPage>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import emptyPage from '@/components/emptyPage.vue';
import authorize from '@/components/Authorize';
import {myAgentList} from "@/api/agent";

export default {
  components: {
    authorize,
    emptyPage
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      total: 0,
      list: [],
      page: 1,
      agent_id: 0,
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
    }
  },
  onLoad(options) {
    let _this = this;
    _this.agent_id = options.agent_id || 0;
    // 判断：agent_id <= 0 抛出错误，返回代理中心
    if(Number(_this.agent_id) <= 0){
      _this.$util.Tips({
        title: '非法访问，信息不存在！',
      },{tab:5,url:`/pages/agent/centerV2?agent_id=${_this.agent_id}`});
      return false;
    }
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  // 滚动到底部
  onReachBottom() {
    this.getList();
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      this.getList();
    },
    // 记录
    getList() {
      let _this = this;
      let params = {
        page: _this.page,
        pid: _this.agent_id
      };
      myAgentList(params).then(res => {
        let list = res.data.list || {};
        _this.total = res.data.count || 0;
        if (Object.values(list).length > 0) {
          _this.list = _this.$util.SplitArray(list, _this.list);
          _this.$set(_this, 'list', _this.list);
          _this.page++;
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 渲染类型信息
    getAgentTypeText(info, title = '') {
      switch (Number(info.agent_type)) {
        case 1:
          title = '发起人';
          break;
        case 2:
          title = '省公司';
          if(info.province_name) title += `(${info.province_name})`;
          break;
        case 3:
          title = '外勤';
          if(info.province_name) title += `(${info.province_name})`;
          break;
        case 4:
          title = '内勤';
          if(info.province_name) title += `(${info.province_name})`;
          break;
        case 5:
          title = '运营商';
          if(info.province_name || info.area_name || info.area_name) title += `(${info.province_name}${info.city_name}${info.area_name})`;
          break;
        case 6:
          title = '合伙人';
          if(info.province_name || info.area_name || info.area_name) title += `(${info.province_name}${info.city_name}${info.area_name})`;
          break;
        case 7:
          title = '餐厅';
          if(info.mer && info.mer.mer_name) title += `(${info.mer.mer_name})`;
          break;
        case 8:
          title = '配送商';
          break;
      }

      return title;
    },
    // 渲染地址
    getAddressText(info){
      let title = '';
      switch (Number(info.agent_type)) {
        case 2:
        case 3:
        case 4:
          if(info.province_name) title = `${info.province_name}`;
          break;
        case 5:
        case 6:
          if(info.province_name || info.area_name || info.area_name) title = `${info.province_name}${info.city_name}${info.area_name}`;
          break;
      }

      return title;
    }




  }
}
</script>

<style lang="scss" scoped>
.main-content {
  width: 100vw;
  min-height: 100vh!important;
  background: #f6f6f6;

  .list-content{
    .top-content{
      background: #82201d;
      width: 100%;
      height: 200rpx;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      .num{
        color: #FFFFFF;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 45rpx!important;
      }
      .title{
        color: #ffe9ea;
        font-size: 26rpx!important;
        height: 100rpx;
      }
    }
    .list{
      width: 100%;
      padding: 0 20rpx;
      position: relative;
      top: -50rpx;
      .list-box{
        width: 100%;
        background: #FFFFFF;
        padding: 20rpx;
        border-radius: 10rpx;
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        .top-info{
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          .user-info{
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            .avatar{
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
            }
            .user-title{
              margin-left: 20rpx;
            }
          }
          .role{
            background: #f2e6e8;
            color: #6c454a;
            padding: 5rpx 15rpx;
            font-size: 24rpx;
            border-radius: 5rpx;
          }
        }
        .top-bottom-info{
          margin-top: 15rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          .contact_phone{
            width: 200rpx;
            text-align: left;
          }
          .address{
            width: calc(100% - 220rpx);
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .list-box:not(:last-child){
        margin-bottom: 20rpx!important;
      }
    }
  }
}
</style>
