<template>
	<view class="main-content">
    <!--顶部内容-->
    <view class="top">
      <view class="top-title">我邀请的店铺</view>
      <image mode="heightFix" class="top-icon" :src="top_icon" />
    </view>
    <!--主要内容-->
    <view class="main-box">
      <!--选项卡-->
      <view class="tabs">
        <view :class="['tab',{'tab-active': merchant_type == 0}]" @click="changeTab(0)">普通商户</view>
        <view :class="['tab',{'tab-active': merchant_type == 1}]" @click="changeTab(1)">酒道馆</view>
        <view :class="['tab',{'tab-active': merchant_type == 2}]" @click="changeTab(2)">供应商</view>
        <view :class="['tab',{'tab-active': merchant_type == 3}]" @click="changeTab(3)">烟酒店</view>
      </view>
      <!--列表信息-->
      <view class="_list">
        <template v-if="Object.values(list).length > 0">
          <view class="item-box" v-for="(item,index) in list" :key="index">
            <view class="left">
              <view class="name">{{ item.mer_name || '' }}</view>
              <view class="left-info">
                <image mode="widthFix" class="mer-logo" :src="item.mer_avatar" />
                <view class="contacts">
                  <view class="contacts-line">负责人：{{ item.real_name || '' }}</view>
                  <view class="contacts-line">电话：{{ item.mer_phone || '' }}</view>
                </view>
              </view>
            </view>
            <!--<text class="right-icon iconfont icon-xiangyou"></text>-->
          </view>
        </template>
        <emptyPage v-else title="暂无邀请店铺～"></emptyPage>
      </view>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
	</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 {getMyInvite} from "@/api/agent";

export default {
  name: 'business',
  components: {
    authorize,
    emptyPage
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      top_icon: '',
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 选项卡
      merchant_type: 3,// 商户类别：0=普通商户，1=酒道馆，2=供应商，3=烟酒店
      // 列表相关
      agent_id: 0,
      list: [],
      page: 1,
    }
  },
  onLoad(options) {
    let _this = this;
    _this.agent_id = options.agent_id || 0;
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  onReady() {
    this.top_icon = `${HTTP_REQUEST_URL}/static/images/mer/my_invite_top_icon.png`;
  },
  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,
        merchant_type: _this.merchant_type,
        invite_agent_id: _this.agent_id
      }
      // 发起请求
      getMyInvite(params).then(res => {
        let list = res.data.list || {};
        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});
      });
    },
    // 改变tab
    changeTab(merchantType){
      this.merchant_type = merchantType || 0;
      this.page = 1;
      this.list = [];
      this.getList();
    }



  },
  // 滚动到底部
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang="scss">
.main-content{
  width: 100vw!important;
  min-height: 100vh!important;
  background: #f6f6f6;
  // 顶部内容
  .top{
    width: 100vw;
    height: 300rpx;
    position: relative;
    background: #be0000;
    .top-title{
      position: absolute;
      top: 60rpx;
      left: 60rpx;
      z-index: 10;
      height: 150rpx!important;
      line-height: 150rpx!important;
      color: #ffffff;
      font-size: 50rpx;
      font-weight: bold;
    }
    .top-icon{
      position: absolute;
      top: 60rpx;
      right: 60rpx;
      z-index: 10;
      height: 150rpx !important;
    }
  }
  // 主要内容
  .main-box{
    width: 100vw;
    background: #f6f6f6;
    padding: 25rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    position: relative;
    top: -91rpx;
    .tabs{
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx;
      overflow: hidden;
      margin-bottom: 25rpx;
      .tab{
        color: #be0000;
        width: calc(100% / 4);
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        font-size: 30rpx;
        background: #ffffff;
      }
      .tab-active{
        background: #be0000;
        color: #ffffff;
      }
    }
    ._list{
      .item-box{
        width: 100%;
        padding: 20rpx;
        background: #ffffff;
        border-radius: 20rpx;
        margin-bottom: 25rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        .left{
          width: calc(100% - 60rpx);
          .name{
            font-weight: bold;
            font-size: 30rpx;
            width: 100%;
            height: 50rpx;
            line-height: 50rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .left-info{
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            margin-top: 10rpx;
            .mer-logo{
              height: calc(45rpx * 2) !important;
              width: calc(45rpx * 2) !important;
              border-radius: 10rpx!important;
            }
            .contacts{
              width: calc(100% - calc(45rpx * 2));
              padding-left: 15rpx;
              .contacts-line{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 28rpx;
                color: #949494;
              }
            }
          }
        }
        .right-icon{
          width: 60rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
