<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="item-content">
              <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 class="contacts-line" v-if="merchant_type != 2">
                      资源股东：{{ item.shareholders ? item.shareholders.nickname + `(${item.shareholders.uid})` : '暂无' }}
                    </view>
                  </view>
                </view>
              </view>
              <!--<text class="right-icon iconfont icon-xiangyou"></text>-->
            </view>
            <view class="group-btn" v-if="merchant_type != 2">
              <view class="update-btn" @click="shareholdersShow(item)">修改股东</view>
            </view>
          </view>
        </template>
        <emptyPage v-else title="暂无邀请店铺～"></emptyPage>
      </view>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
    <!-- 资源股东 编辑弹框 -->
    <uni-popup ref="shareholdersEditPopup" type="center">
      <view class="shareholders-content">
        <view class="title">编辑资源股东</view>
        <view class='list'>
          <view class="item">
            <view class="item-title">当前绑定资源股东：</view>
            <view class="user-info" v-if="old_shareholders.uid > 0">
              <view class="left">
                <image class="left-image" :src="old_shareholders.avatar" />
              </view>
              <view class="right">
                <view class="nickname">{{ old_shareholders.nickname || old_shareholders.real_name || old_shareholders.uid }}</view>
                <view class="uid">UID：{{ old_shareholders.uid }}</view>
              </view>
            </view>
            <view class="empty" v-else>暂无资源股东</view>
          </view>
          <view class="item">
            <view class="item-title">新资源股东：</view>
            <input class="shareholders_search" type="text" placeholder="请输入用户UID查询用户" v-model="shareholders_search" />
            <view class="user-info" v-if="new_shareholders.uid > 0">
              <view class="left">
                <image class="left-image" :src="new_shareholders.avatar" />
              </view>
              <view class="right">
                <view class="nickname">{{ new_shareholders.nickname || new_shareholders.real_name || new_shareholders.uid }}</view>
                <view class="uid">UID：{{ new_shareholders.uid }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="group-btn">
          <view class="popup-btn close-btn" @click="shareholdersHide">取消编辑</view>
          <view class="popup-btn submit-btn" @click="shareholdersUpdate">提交修改</view>
        </view>
      </view>
    </uni-popup>

	</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, updateShareholders } from "@/api/agent";
import { searchUser } from "@/api/user";

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,
      // 资源股东相关
      mer_info: {},
      old_shareholders: {},
      new_shareholders: {},
      shareholders_search: '',
    }
  },
  watch: {
    'shareholders_search':{
      handler(val) {
        let _this = this;
        if(Number(val) > 0){
          searchUser({ id_and_phone: _this.shareholders_search }).then(res => {
            _this.new_shareholders = Object.assign({}, res.data);
          }).catch(err => {});
        }else{
          _this.new_shareholders = {};
        }
      },
      deep: false
    },
  },
  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();
    },
    // 资源股东 - 显示修改弹框
    shareholdersShow(item){
      this.shareholders_search = '';
      this.mer_info = Object.assign({}, item);
      this.old_shareholders = Object.assign({}, item.shareholders || {});
      this.new_shareholders = {};
      this.$refs.shareholdersEditPopup.open('center');
    },
    // 资源股东 - 隐藏修改弹框
    shareholdersHide(){
      this.$refs.shareholdersEditPopup.close();
    },
    // 资源股东 - 提交编辑
    shareholdersUpdate(){
      let _this = this;
      let oldShareholders = Object.assign({}, _this.old_shareholders);
      let oldUid = oldShareholders.uid || 0;
      let newShareholders = Object.assign({}, _this.new_shareholders);
      let newUid = newShareholders.uid || 0;
      // 判断：提示语句  无旧股东，无新股东-请选择股东；有旧股东，无新股东-是否清除股东；有旧股东，有新股东-是否修改股东
      let tips = '确认设置当前用户为资源股东？';
      if(Number(oldUid) <= 0 && Number(newUid) <= 0) {
        this.$util.Tips({title: '请查询选择一个用户！'});
        return false;
      }
      else if(Number(oldUid) > 0 && Number(newUid) <= 0) {
        tips = '确认清除当前门店的资源股东吗？';
      }
      else if(Number(oldUid) > 0 && Number(newUid) > 0) {
        tips = '确认修改当前门店的资源股东吗？';
      }
      // 询问
      uni.showModal({
        title: '提示',
        content: tips,
        confirmText: '提交',
        cancelText: '取消',
        success(res) {
          if (res.confirm) {
            updateShareholders({ resource_shareholders_uid: newUid, mer_id: _this.mer_info.mer_id }).then(res => {
              _this.page = 1;
              _this.list = [];
              _this.getList();
              _this.shareholdersHide();
            }).catch(err => {});
          }
        }
      });
    },


  },
  // 滚动到底部
  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%;
        background: #ffffff;
        border-radius: 20rpx;
        margin-bottom: 25rpx;
        .item-content{
          width: 100%;
          padding: 20rpx;
          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;
          }
        }
        .group-btn{
          width: 100%;
          padding: 20rpx;
          display: inline-flex;
          flex-wrap: nowrap;
          justify-content: flex-end;
          align-items: center;
          flex-direction: row;
          border-top: 2rpx solid #f6f6f6;
          .update-btn{
            height: 50rpx;
            line-height: 50rpx;
            width: 150rpx;
            text-align: center;
            font-size: 30rpx;
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
            border-radius: 50rpx;
          }
        }
      }
    }
  }
  // 资源股东编辑弹框
  .shareholders-content{
    background-color: #ffffff;
    border-radius: 20rpx;
    width: 85vw;
    padding: 30rpx;

    .title{
      width: 100%;
      text-align: center;
      font-size: 28rpx;
      height: 50rpx;
      line-height: 35rpx;
    }
    .list{

      .item{
        border-bottom: 2rpx solid #f6f6f6;
        padding-bottom: 30rpx;

        .item-title{
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 28rpx;
        }
        .shareholders_search{}
        .user-info {
          width: 100%;
          margin-top: 20rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          .left {
            width: 100rpx;
            text-align: left;

            .left-image {
              width: 90rpx;
              height: 90rpx;
              border-radius: 50%;
            }
          }
          .right {
            width: calc(100% - 100rpx);

            .nickname {
              width: 100%;
              font-size: 30rpx;
              font-weight: bold;
            }

            .uid {
              width: 100%;
            }
          }
        }
        .empty{
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
        }
      }
    }
    .group-btn{
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-around;
      padding-top: 30rpx;
      .popup-btn{
        width: 180rpx;
        height: 60rpx;
        line-height: 55rpx;
        text-align: center;
        border-radius: 100rpx;
        font-size: 28rpx;
      }
      .submit-btn{
        color: #fff;
        background-color: #409eff;
        border: 2rpx solid #409eff;
      }
      .close-btn{
        color: #606266;
        background: #fff;
        border: 2rpx solid #606266;
      }
    }
  }
}
</style>
