<template>
  <view class="page-content">
    <!--主要内容-->
    <view class="main-content">
      <!--顶部内容-->
      <view class="top" :style="{ 'background-image': `url(${top_icon})`}">
        <view class="top-box">
          <view class="left">
            <view class="num">{{ mer_info.total_shareholder || 0 }}</view>
            <view class="num-title">全部共创股东</view>
          </view>
          <view class="right" v-if="Object.values(level_list).length > 0">
            <view class="invite-btn" @click="invite">
              去邀请 <text class="iconfont icon-xiangyou"></text>
            </view>
          </view>
        </view>
      </view>
      <!--列表相关内容-->
      <view class="list-content">
        <!--选项卡-->
        <view class="tabs" v-if="Object.values(level_list).length > 1">
          <view class="tabs-content">
            <view
                v-for="(item, index) in level_list" :key="index"
                :class="['tab',{'tab-active': (Number(level_current.id) === Number(item.id))}]"
                @click="changeLevel(item)"
            >
              {{ item.title || itme.id }}({{ item.quota_used || 0 }})
            </view>
          </view>
        </view>
        <!--搜索框-->
        <view class="search-content">
          <input class="search-input" v-model="search_text" type="text" placeholder="请输入会员ID/昵称/手机号" />
        </view>
        <!--列表内容-->
        <view class="_list" v-if="Object.values(list).length > 0">
          <view class="_list-box" v-for="(item,index) in list" :key="index">
            <image class="avatar" :src="item.user.avatar || '/static/images/f.png'" />
            <view class="user-info">
              <view class="header-info">
                <view class="nickname">{{ item.user.nickname }}</view>
                <view class="uid">{{ item.user.uid }}</view>
              </view>
              <view class="phone" v-if="item.user.phone">手机号：{{ item.user.phone }}</view>
            </view>
            <view class="right">
              <view v-if="item.status == 0" class="status-text wait-pay">待付款</view>
              <view v-else class="status-text already-pay">已付款</view>
            </view>
          </view>
        </view>
        <emptyPage v-else title="暂无信息～"></emptyPage>
      </view>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
    <!--二维码弹框-->
    <qr-code :isShow="qr_code_show" :params="qr_code_params" @close="qr_code_show = false"></qr-code>

  </view>
</template>

<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import { HTTP_REQUEST_URL } from '@/config/app.js';
import emptyPage from '@/components/emptyPage.vue';
import {merShareholderLevelList, merShareholderMerInfo, merShareholderList} from "@/api/store";
import qrCode from "@/components/diyPopup/qrCode";

export default {
  name: 'business',
  components: {
    authorize,
    emptyPage,
    qrCode
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor', 'shopIsLogin', 'shopMerId'])
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 等级列表相关
      level_list: {},
      level_current: {},
      // 列表相关
      list: [],
      page: 1,
      search_text: '',
      // 其他信息
      mer_info: {},
      top_icon: '',
      merchant_type: '',
      // 二维码信息
      qr_code_show: false,
      qr_code_params: {},
    }
  },
  onReady() {
    this.top_icon = `${HTTP_REQUEST_URL}/static/images/mer/shareholder/shareholder_top.png`;
  },
  onLoad(options) {
    // 判断：是否登录
    if (!this.isLogin) {
      this.isAuto = true;
      this.isShowAuth = true;// 未登录  授权登录
    }
    else this.init();// 已登录  获取信息
  },
  watch: {
    'level_current': {
      handler() {
        this.getList();
      },
      deep: false
    },
    'search_text':{
      handler(val) {
        this.page = 1;
        this.list = [];
        this.getList();
      },
      deep: false
    }
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      // 判断：商户是否登录
      if(!this.shopIsLogin){
        uni.showModal({
          title: '未登录',
          content: '请先登录商户账号!',
          confirmText: '去登录',
          cancelText: '返回首页',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url:'/pages/user/index'
              })
            }
            else{
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          }
        });
        return false;
      }
      // 商户登录成功后操作
      this.getMerInfo();
    },
    // 获取商户信息
    getMerInfo(){
      let _this = this;
      merShareholderMerInfo(_this.shopMerId).then(res => {
        let data = res.data || {};
        _this.mer_info = data;
        _this.merchant_type = data.merchant_type || '';
        _this.getLevelList();
      })
    },
    // 获取等级列表
    getLevelList(){
      let _this = this;
      merShareholderLevelList({merchant_type: _this.merchant_type, mer_id: _this.shopMerId}).then(res => {
        _this.level_list = res.data || {};
        _this.level_current = res.data[0] || {};
      })
    },
    // 点击切换查看等级
    changeLevel(item){
      this.page = 1;
      this.list = [];
      this.search_text = '';
      this.level_current = item || {};
    },
    // 获取股东列表
    getList(){
      let _this = this;
      let params = {
        level_id: _this.level_current.id,
        mer_id: _this.shopMerId,
        page: _this.page,
        search_text: _this.search_text || ''
      };
      merShareholderList(params).then(res => {
        let list = res.data.list || {};
        if (Object.values(list).length > 0) {
          list = _this.$util.SplitArray(list, _this.list);
          _this.$set(_this, 'list', list);
          _this.page++;
        }
      })
    },
    // 点击去邀请
    invite(){
      let _this = this;
      // 去邀请 - 判断是否存在多个等级
      if(Object.values(_this.level_list).length > 1){
        // 页面跳转
        uni.navigateTo({
          url: '/pages/admin/business/shareholder/invite?merchant_type=' + _this.merchant_type
        })
      }else{
        this.qr_code_params = {
          type: 'mer_shareholder_invite',
          mer_id: _this.shopMerId,
          level: _this.level_current.id,
        };
        this.qr_code_show = true;
      }
    },
  },
  // 滚动到底部
  onReachBottom() {},
}
</script>

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

  .top{
    width: 100%;
    padding: 30rpx;
    background-size: 100% auto;
    background-repeat: no-repeat;

    .top-box{
      width: 100%;
      background: #fffaf7;
      border-radius: 15rpx;
      box-shadow: 0 0 10rpx 0 #f3f3f3;
      padding: 20rpx;
      height: 200rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      .left{
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-evenly;
        .num{
          font-size: 50rpx;
          font-weight: bold;
        }
        .num-title{
          font-size: 28rpx;
        }
      }
      .right{
        .invite-btn{
          background-color: #ce110b;
          color: #fefdf8;
          border-radius: 10rpx;
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 20rpx;
        }
        .icon-xiangyou{
          font-size: 28rpx;
          padding-left: 5rpx;
        }
      }
    }
  }

  .list-content{
    width: 100%;
    background-color: #ffffff;

    .tabs{
      width: 100vw;
      overflow: auto;
      .tabs-content {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        .tab{
          width: max-content;
          margin: 0 30rpx;
          text-align: center;
          height: 65rpx;
          line-height: 65rpx;
        }
        .tab-active{
          position: relative;
          font-weight: bold;
        }
        .tab-active:after{
          content: "";
          position: absolute;
          bottom: 0;
          left: 25%;
          width: 50%;
          height: 6rpx;
          background-color: #cd1300;
        }
      }
    }

    .search-content{
      width: 100%;
      padding: 30rpx;

      .search-input{
        width: calc(100% - (2 * 30rpx));
        height: 60rpx;
        line-height: 60rpx;
        text-align: left;
        background-color: #f2f2f2;
        border-radius: 60rpx;
        padding: 0 30rpx;
        color: #838383;
      }
    }

    ._list{
      width: 100%;
      background-color: #ffffff;
      ._list-box{
        width: 100%;
        border-top: 2rpx solid #f6f6f6;// #f6f6f6
        padding: 20rpx 30rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;

        .avatar{
          height: 100rpx;
          width: 100rpx;
          border-radius: 50%;
        }
        .user-info{
          width: calc(100% - 100rpx - 150rpx);
          padding-left: 20rpx;

          .header-info{
            width: 100%;
            height: calc(100rpx - 40rpx);
            line-height: calc(100rpx - 40rpx);
            display: inline-flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: nowrap;
            align-items: center;
            .nickname{
              font-size: 30rpx;
            }
            .uid{
              background-color: #fce0df;
              color: #d60000;
              height: 40rpx;
              line-height: 40rpx;
              font-size: 26rpx;
              padding: 0 15rpx;
              border-radius: 50rpx;
              margin-left: 20rpx;
            }
          }
          .phone{
            color: #6a6a6a;
            font-size: 26rpx;
            height: 40rpx;
            line-height: 40rpx;
          }
        }
        .right{
          width: 150rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-end;

          .status-text{
            border-radius: 150rpx;
            height: 40rpx;
            line-height: 40rpx;
            color: #ffffff;
            font-size: 26rpx;
            padding: 0 20rpx;
          }
          .wait-pay{
            background-color: #8f8f8f;
          }
          .already-pay{
            background-color: #ce110b;
          }
        }
      }
    }
  }
}
/deep/ .empty-box{
  padding-bottom: 200rpx;
}
</style>
