<template>
	<view class="main-content">
    <!-- 顶部信息 -->
		<view class="header">
			<view class="header-box" @click="changeAgentPopupShow">
				<span class='font line1'>{{ getAgentTypeText(agent_info, '暂无代理身份') }}</span>
        <template v-if="Object.values(agent_list).length > 1">
          <text class="iconfont icon-xiala1 spin"></text>
        </template>
			</view>
		</view>
    <!--操作内容-->
    <view v-if="Object.values(menu_list).length > 0" class="menu-list">
      <view @click="clickMenu(item)" class="listBox" v-for="(item,index) in menu_list">
        <text :class="item.icon" class="businessIcon"></text>
        <view>{{item.title}}</view>
      </view>
    </view>
    <emptyPage v-else title="暂无任何操作权限~"></emptyPage>
    <!--授权登录-->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
    <!--切换代理身份-->
    <uni-popup ref="changeAgent" type="bottom">
      <view class="change-agent-content">
        <scroll-view scroll-y="true">
          <radio-group name="store_name" @change="changeAgent">
            <template v-for="(item,index) in agent_list">
              <div class="store-list">
                <label :key="item.id" class="store-list-item">
                  <view class="text">{{ getAgentTypeText(item) }}</view>
                  <radio class="radio" :value="index" :checked="agent_info.id == item.id ? true : false" />
                </label>
              </div>
            </template>
          </radio-group>
        </scroll-view>
      </view>
    </uni-popup>
    <!--二维码-->
    <uni-popup ref="qrCodePopup" type="center">
      <view class="qr-code-content">
        <image class="image" :src="qrCode"></image>
        <view class="close-qr-code" @click="closeQrCode()">关闭</view>
      </view>
    </uni-popup>
	</view>
</template>

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

export default {
  name: 'business',
  components: {
    authorize,
    emptyPage,
  },
  computed: {
    menu_list() {
      let menuList = [];
      let agentType = this.agent_info.agent_type || 0;
      // 类型：1=总部发起人,2=省公司发起人,3=省合伙人(外勤),4=省合伙人(内勤),
      // 5=区县运营商,6=区县合伙人,7=餐厅,8=配送商,9=总部外勤,10=总部内勤
      if(Number(agentType) <= 5){
        menuList.push({
          title: '供应商邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'supplier'
          }
        });
      }
      if(Number(agentType) === 1){
        menuList.push({
          title: '总部外勤邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'subordinate',
            level: 9,
          }
        });
        menuList.push({
          title: '总部内勤邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'subordinate',
            level: 10,
          }
        });
      }
      if(Number(agentType) === 9){
        menuList.push({
          title: '省公司邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'subordinate',
            level: 2,
          }
        });
      }
      if(Number(agentType) === 2){
        menuList.push({
          title: '外勤合伙人邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'subordinate',
            level: 3,
          }
        });
        menuList.push({
          title: '内勤合伙人邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'subordinate',
            level: 4,
          }
        });
      }
      if(Number(agentType) === 3){
        menuList.push({
          title: '运营商邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'subordinate',
            level: 5,
          }
        });
      }
      if(Number(agentType) === 5){
        menuList.push({
          title: '合伙人邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'subordinate',
            level: 6,
          }
        });
      }
      if(Number(agentType) === 6){
        menuList.push({
          title: '餐厅邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'subordinate',
            level: 7,
          }
        });
        menuList.push({
          title: '配送商邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'iconfont icon-erweima1',
          params: {
            type: 'subordinate',
            level: 8,
          }
        });
      }
      // 除内勤、餐厅、配送商外都有下级管理
      if(!['4','7','8','10'].includes(String(agentType))){
        menuList.push({
          title: '下级管理',
          type: 'link',
          url: '/pages/agent/user/list',
          icon: 'iconfont icon-yonghu1',
        });
      }
      // 除内勤外都有佣金明细
      if(!['4','10'].includes(String(agentType))){
        menuList.push({
          title: '佣金明细',
          type: 'link',
          url: '/pages/agent/user/commission',
          icon: 'iconfont icon-yonghu1',
        });
      }


      return menuList;
    },
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 代理信息
      agent_list: {},
      agent_info: {},
      agent_id: '',
      // 二维码
      qrCode: '',
    }
  },
  onLoad(options) {
    this.agent_id = options.agent_id || '';
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      this.getMyAgentList();
    },
    // 代理身份操作 - 获取当前登录用户的代理身份列表
    getMyAgentList(){
      let _this = this;
      let params = {
        uid: _this.uid,
        not_page: 1,
        id: _this.agent_id
      };
      myAgentList(params).then(res => {
        if (res.status == 200) {
          let data = res.data || {};
          if(Object.values(data).length <= 0){
            this.$util.Tips({
              title: '无有效的代理身份！',
            },{tab:1,url:'/pages/user/index'});
            return false;
          }else{
            _this.agent_list = res.data;
            _this.agent_info = res.data[0] || {};
          }
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 代理身份操作 - 切换弹框显示
    changeAgentPopupShow(){
      if(Object.values(this.agent_list).length <= 1) return false;
      this.$refs.changeAgent.open('bottom')
    },
    // 代理身份操作 - 切换弹框关闭
    changeAgentPopupClose(){
      this.$refs.changeAgent.close();
    },
    // 代理身份操作 - 切换代理
    changeAgent(e){
      let index = e.detail.value || e.target.value;
      this.agent_info = this.agent_list[index] || {};
      this.changeAgentPopupClose();
    },
    // 渲染类型信息
    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;
        case 9:
          title = '总部外勤';
          break;
        case 10:
          title = '总部内勤';
          break;
      }

      title = title.replace('市辖区', '');

      return title;
    },
    // 点击菜单 进行对应的操作
    clickMenu(menu){
      let _this = this;
      let params = menu.params || {};
      params.agent_id = _this.agent_info.id || 0;
      switch (menu.type) {
        // 邀请入驻二维码
        case 'invite_qr_code':
          inviteSupplierJoinQrCode(params).then(res => {
            if (res.status == 200) {
              _this.qrCode = res.data.qr_code || '';
              _this.$refs.qrCodePopup.open('center');
            }
          }).catch(err => {
            this.$util.Tips({title: err});
          });
          break;
          // 点击跳转
        case 'link':
          uni.navigateTo({
            url: menu.url + '?agent_id=' + params.agent_id
          })
          break;
      }
    },
    // 关闭二维码弹框
    closeQrCode() {
      this.$refs.qrCodePopup.close();
    },
  }
}
</script>

<style scoped lang="scss">
.main-content{
  // 顶部信息
  .header {
    height: 305rpx;
    background: linear-gradient(180deg, #2291F8 0%, rgba(34,145,248,0) 100%);
    position: fixed;
    width: 100%;
    text-align: center;
    top: 0;
    left: 0;
    .header-box {
      min-width: 360rpx;
      width: max-content;
      margin: 33rpx auto 0 auto;
      position: relative;
      padding: 10rpx;
      background-color: rgba(0, 0, 0, .25);
      border-radius: 30rpx;
      color: #FFFFFF;
      .font {
        display: inline-block;
        margin-left: 10rpx;
        line-height: 28rpx;
      }
      .spin {
        display: inline-block;
        transform: rotate(180deg);
        font-size: 36rpx;
      }
    }
  }
  // 操作菜单列表
  .menu-list {
    width: 100%;
    padding: 0 calc((100% - (345rpx * 2)) / 3);
    margin-top: 151rpx;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    .listBox {
      width: 345rpx;
      height: 270rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 5rpx 15rpx rgba(142, 82, 77, 0.1);
      border-radius: 20rpx;
      z-index: 1;
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image {
        width: 66rpx;
        height: 66rpx;
        background: #F34C20;
      }
    }
    .businessIcon {
      color: #2291F8;
      font-size: 80rpx;
      display: inline-block;
      margin-bottom: 29rpx;
    }
  }
  // 切换代理
  .change-agent-content{
    width: 100vw!important;
    min-height: 65vh!important;
    background-color: #fff;
    border-top-left-radius: 30rpx!important;
    border-top-right-radius: 30rpx!important;
    padding: 30rpx!important;
    .store-list{
      width: 100% !important;
      height: 120rpx;
      line-height: 120rpx;
      .store-list-item{
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
      }
      .store-list-item:not(:last-child){
        border-bottom: 2rpx solid #f6f6f6;
      }
      .title{
        width: calc(100% - 80rpx) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    /deep/ radio .wx-radio-input.wx-radio-input-checked, /deep/radio .uni-radio-input.uni-radio-input-checked {
      border: 1px solid #2291F8 !important;
      background-color: #2291F8 !important
    }
  }
  // 二维码弹框
  .qr-code-content{
    width: 80vw;
    .image{
      width: 80vw;
      height: 80vw;
    }
    .close-qr-code{
      position: fixed;
      top: 35rpx;
      right: 70rpx;
      color: #FFFFFF;
      border: 2rpx solid #FFFFFF;
      height: 40rpx;
      line-height: 36rpx;
      padding: 0 20rpx;
      border-radius: 50rpx;
    }
  }
}
</style>
