<template>
	<view class="page-content">
    <!--主要内容-->
    <view class="main-content">
      <!--顶部信息-->
      <view class="top">
        <view class="title">{{ corporate_name || '' }}</view>
        <view class="identity-info">
          <view class="identity">{{ agent_info.agent_type_text || '' }}</view>
          <view class="change-btn" @click="identityChangeShow" v-if="Object.values(children).length > 1">切换</view>
        </view>
      </view>
      <!--下级订单中心-->
      <!--<view class="block-content order">
        <view class="title">
          <view class="left">下级订单中心</view>
          <view class="right">
            <text class="iconfont icon-xiangyou"></text>
          </view>
        </view>
        <view class="info-list">
          <view v-for="(item,index) in order_list" :key="index" class="info-list-item">
            <view class="item-num">{{ item.num }}</view>
            <view class="item-title">{{ item.title }}</view>
          </view>
        </view>
      </view>-->
      <!--数据统计-->
      <!--<view class="block-content statistics">
        <view class="title">
          <view class="left">数据统计</view>
          <view class="right"></view>
        </view>
        <view class="info-list">
          <view v-for="(item,index) in statistics_list" :key="index" class="info-list-item">
            <view class="item-num">{{ item.num }}</view>
            <view class="item-title">{{ item.title }}</view>
          </view>
        </view>
      </view>-->
      <!--工作台-->
      <view class="block-content staging">
        <view class="title">
          <view class="left">工作台</view>
          <view class="right">
            <!--<view class="see-btn">查看补货申请</view>-->
          </view>
        </view>
        <view class="info-list">
          <template v-if="Object.keys(staging_list).length > 0">
            <view v-for="(item,index) in staging_list" :key="index" class="info-list-item"  @click="clickStaging(item)" >
              <view class="item-icon">
                <text :class="['iconfont', item.icon ]"></text>
              </view>
              <view class="item-title">{{ item.title }}</view>
            </view>
          </template>
          <view v-else class="empty-tips">暂无任何操作权限~</view>
        </view>
      </view>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
    <!-- 身份切换 -->
    <uni-popup ref="identityChange" type="bottom" :is-mask-click="false">
      <view class="identity-change-content">
        <view class="_list">
          <view class="_list-item" v-for="(item,index) in children" :key="index" @click="identityChangeSelected(item)">
            <view class="top">
              {{ item.agent_type_text || '' }}
              <view class="top-tag" v-if="item.id == agent_info.id">使用中</view>
            </view>
            <view class="tag-list">
              <view class="tag-list-item tag-list-id">ID：{{ item.id }}</view>
              <view class="tag-list-item">{{ item.contact_name }}</view>
            </view>
          </view>
        </view>
        <view class='close-btn' @click="identityChangeClose">取消</view>
      </view>
    </uni-popup>
    <!-- 推广二维码类型选择 -->
    <uni-popup ref="promotionQrCode" type="bottom" :is-mask-click="false">
      <view class="identity-change-content promotion-qr-code">
        <view class="_list">
          <view class="_list-item" v-for="(item,index) in qrcode_list" :key="index" @click="qrCodeTypeSelected(item)">
            <view class="top">{{ item.title || '' }}</view>
          </view>
        </view>
        <view class='close-btn' @click="qrCodeTypeClose">取消</view>
      </view>
    </uni-popup>
    <!-- 二维码弹框 -->
    <uni-popup ref="qrCodePopup" type="center">
      <view class="qr-code-content">
        <image class="image" :src="promotion_qr_code"></image>
        <view class="close-qr-code" @click="qrCodeClose()">关闭</view>
      </view>
    </uni-popup>




  </view>
</template>

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

export default {
  name: 'business',
  components: {
    authorize,
  },
  computed: {
    staging_list() {
      // 类型：1=总部发起人,2=省公司发起人,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商,9=总部外勤,10=总部内勤
      let menuList = [];
      let agentType = this.agent_info.agent_type || 0;
      // 推广二维码
      if(['1','2','3','5','6','9'].includes(String(agentType))){
        menuList.push({
          title: '推广二维码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
        });
      }
      // 除内勤、餐厅、配送商外都有下级管理
      if(!['4','7','8','10'].includes(String(agentType))){
        menuList.push({
          title: '下级管理',
          type: 'link',
          url: '/pages/agent/user/list',
          icon: 'icon-yonghu1',
        });
      }


      // 工作台
      // staging_list:[
      //   {title: '库存管理', icon: 'icon-dingdan1'},
      //   {title: '立即进货', icon: 'icon-daifahuo1'},
      //   {title: '收入管理', icon: 'icon-jinbi_o'},
      //   {title: '管辖门店', icon: 'icon-dianpu1'},
      //   {title: '代理资料', icon: 'icon-jiaoyidingdan'},
      //   {title: '推广二维码', icon: 'icon-hexiaoma'},
      //   {title: '我的进货', icon: 'icon-fenxiaodingdan'},
      //   {title: '省分公司', icon: 'icon-gerentouxiang_o'},
      //   {title: '下载物料', icon: 'icon-baoguo_shouna_o'},
      //   {title: '扫码核销', icon: 'icon-saoma'},
      //   {title: '我的申报', icon: 'icon-quanbudingdan-3'},
      //   {title: '业务员管理', icon: 'icon-wodetuandui'},
      // ],
      //


      return menuList;
    },
    qrcode_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: 'icon-erweima1',
          params: {
            type: 'supplier'
          }
        });
      }
      if(Number(agentType) === 1){
        menuList.push({
          title: '总部外勤邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
          params: {
            type: 'subordinate',
            level: 9,
          }
        });
        menuList.push({
          title: '总部内勤邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
          params: {
            type: 'subordinate',
            level: 10,
          }
        });
      }
      if(Number(agentType) === 9){
        menuList.push({
          title: '省公司邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
          params: {
            type: 'subordinate',
            level: 2,
          }
        });
      }
      if(Number(agentType) === 2){
        menuList.push({
          title: '外勤合伙人邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
          params: {
            type: 'subordinate',
            level: 3,
          }
        });
        menuList.push({
          title: '内勤合伙人邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
          params: {
            type: 'subordinate',
            level: 4,
          }
        });
      }
      if(Number(agentType) === 3){
        menuList.push({
          title: '运营商邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
          params: {
            type: 'subordinate',
            level: 5,
          }
        });
      }
      if(Number(agentType) === 5){
        menuList.push({
          title: '合伙人邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
          params: {
            type: 'subordinate',
            level: 6,
          }
        });
      }
      if(Number(agentType) === 6){
        menuList.push({
          title: '餐厅邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
          params: {
            type: 'subordinate',
            level: 7,
          }
        });
        menuList.push({
          title: '配送商邀请码',
          type: 'invite_qr_code',
          url: '',
          icon: 'icon-erweima1',
          params: {
            type: 'subordinate',
            level: 8,
          }
        });
      }

      return menuList;
    },
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      // 页面参数信息
      agent_id: 0,
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 下级订单中心相关信息
      order_list: {
        'toBeShipped': {title: '待发货', num: 0},
        'toBeReceived': {title: '待收货', num: 0},
        'exchangeInProgress': {title: '换货中', num: 0},
        'completed': {title: '已完成', num: 0}
      },
      // 数据统计相关信息
      statistics_list: {
        'transactionVolumeToday': {title: '今日成交额', num: 0},
        'transactionVolumeYesterday': {title: '昨日成交额', num: 0},
        'transactionVolumeThisMonth': {title: '本月成交额', num: 0},
        'orderCountToday': {title: '今日订单数', num: 0},
        'orderCountYesterday': {title: '昨日订单数', num: 0},
        'orderCountThisMonth': {title: '本月订单数', num: 0},
      },
      // 其他信息
      use_agent_id: 0,
      corporate_name: '',
      agent_info: {},
      children: {},
      promotion_qr_code: '',
    }
  },
  onLoad(options) {
    // 参数获取
    this.agent_id = options.agent_id || 0;
    if(this.agent_id <= 0){
      uni.showModal({
        title: '提示',
        content: '非法访问，参数错误！',
        success: function success(res) {
          uni.navigateBack();
        }
      });
    }
    // 判断：是否登录
    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.getAgentRoleInfo()
    },
    // 获取当前代理角色信息及相关代理角色信息
    getAgentRoleInfo(){
      let _this = this;
      let params = {
        agent_id: _this.agent_id > 0 ? _this.agent_id : _this.use_agent_id,
      };
      roleAndCorrelationRole(params).then(res => {
        if(res.status == 200){
          let data = res.data || {};
          _this.corporate_name = data.corporate_name || '';
          _this.agent_info = data.agent_info || {};
          _this.children = data.children || {};
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 身份切换 - 显示弹框
    identityChangeShow(){
      this.$refs.identityChange.open('bottom');
    },
    // 身份切换 - 关闭弹框
    identityChangeClose(){
      this.$refs.identityChange.close();
    },
    // 身份切换 - 选中新身份，进行切换
    identityChangeSelected(info){
      this.agent_info = info;
      this.identityChangeClose();
    },
    // 点击工作台按钮
    clickStaging(menu){
      let _this = this;
      let params = menu.params || {};
      params.agent_id = _this.agent_info.id || 0;
      switch (menu.type) {
          // 推广二维码
        case 'invite_qr_code':
          _this.qrCodeTypeShow();
          break;
          // 点击跳转
        case 'link':
          uni.navigateTo({
            url: menu.url + '?agent_id=' + params.agent_id
          })
          break;
      }
    },
    // 推广二维码 - 二维码类型弹框显示
    qrCodeTypeShow(){
      this.$refs.promotionQrCode.open('bottom');
    },
    // 推广二维码 - 二维码类型弹框关闭
    qrCodeTypeClose(){
      this.$refs.promotionQrCode.close();
    },
    // 推广二维码 - 二维码类型选中
    qrCodeTypeSelected(menu){
      let _this = this;
      _this.qrCodeTypeClose();
      _this.promotion_qr_code = '';

      let params = menu.params || {};
      params.agent_id = _this.agent_info.id || 0;
      // 请求获取推广二维码
      inviteSupplierJoinQrCode(params).then(res => {
        if (res.status == 200) {
          _this.promotion_qr_code = res.data.qr_code || '';
          _this.qrCodeShow();
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 推广二维码 - 二维码弹框显示
    qrCodeShow(){
      this.$refs.qrCodePopup.open('center');
    },
    // 推广二维码 - 二维码弹框关闭
    qrCodeClose(){
      this.$refs.qrCodePopup.close();
    },



  }
}
</script>

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

  .main-content{
    background: linear-gradient( to bottom, #82201d 0%, #82201d 300rpx, #f6f6f6 300rpx, #f6f6f6 100% );
    padding: 0 25rpx;
    // 公共块样式
    .block-content{
      --info-list-content-width-: calc((100vw - (25rpx * 2) - (25rpx * 2)));

      background-color: #FFFFFF;
      padding: 25rpx;
      border-radius: 10rpx;

      .title{
        width: 100%;
        height: 55rpx;
        margin-bottom: 15rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        .left{
          font-size: 26rpx;
          font-weight: bold;
        }
      }
      .info-list{
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        align-content: flex-start;
        .info-list-item{
          width: var(--info-list-item-size-);
          //height: var(--info-list-item-size-);
          height: 150rpx;
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-evenly;
          .item-num{
            font-size: 26rpx;
            font-weight: bold;
          }
          .item-title{
            font-size: 26rpx;
          }
        }
      }
    }
    .block-content:not(:last-child){
      margin-bottom: 20rpx;
    }
    // 顶部内容
    .top{
      padding-top: 10rpx;
      padding-bottom: 20rpx;
      color: #f8d0a9;
      .title{
        width: 100%;
        font-size: 35rpx;
        font-weight: bold;
        height: 55rpx;
        line-height: 45rpx;
      }
      .identity-info{
        height: 45rpx;
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        .identity{
          font-size: 26rpx;
        }
        .change-btn{
          margin-left: 20rpx;
          background: #f8d0a9;
          color: #82201d;
          height: 35rpx;
          line-height: 35rpx;
          text-align: center;
          font-size: 26rpx;
          width: 80rpx;
          border-radius: 50rpx;
        }
      }
    }
    // 下级订单中心
    .order{
      .info-list{
        --info-list-item-size-: calc(var(--info-list-content-width-) / 4);
      }
    }
    // 数据统计
    .statistics{
      .info-list{
        --info-list-item-size-: calc(var(--info-list-content-width-) / 3);
      }
    }
    // 工作台
    .staging{
      .title{
        .right{
          .see-btn{
            background: #82201d;
            color: #FFFFFF;
            font-size: 26rpx;
            height: 50rpx;
            line-height: 50rpx;
            border-radius: 100rpx;
            padding: 0 30rpx;
          }
        }
      }
      .info-list{
        width: 100%;
        --info-list-item-size-: calc(var(--info-list-content-width-) / 4);
        .item-icon{
          .iconfont{
            font-size: 50rpx;
          }
        }
        .empty-tips{
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          height: 150rpx;
          line-height: 150rpx;
        }
      }
    }
  }
  // 身份切换弹框
  .identity-change-content{
    --list-padding-: 30rpx;

    background: #f6f6f6;
    width: 100vw;
    height: 80vh;
    padding: var(--list-padding-);
    position: relative;
    ._list{
      height: calc(100% - 160rpx);
      width: calc(100% - (var(--list-padding-) * 2));
      position: fixed;
      top: var(--list-padding-);
      left: var(--list-padding-);
      overflow-y: auto;
      ._list-item{
        width: 100%;
        background: #FFFFFF;
        border-radius: 15rpx;
        padding: 20rpx;
        .top{
          width: 100%;
          height: 50rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          font-size: 30rpx;
          font-weight: bold;
          .top-tag{
            //background-color: #f3e6e8;
            //color: #926c6b;
            margin-left: 15rpx;
            height: 35rpx;
            line-height: 35rpx;
            font-size: 24rpx;
            padding: 0 10rpx;
            border-radius: 5rpx;
            font-weight: normal;
            color: #fff;
            background-color: #67c23a;
            border-color: #67c23a;
          }
        }
        .address{
          height: 35rpx;
          line-height: 35rpx;
          font-size: 25rpx;
        }
        .tag-list{
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          .tag-list-item{
            background-color: #f3e6e8;
            color: #926c6b;
            height: 35rpx;
            line-height: 35rpx;
            font-size: 24rpx;
            padding: 0 10rpx;
            border-radius: 5rpx;
            font-weight: normal;
            margin-right: 15rpx;
            max-width: 100%;
          }
          .tag-list-id{
            color: #fff;
            background-color: #e6a23c;
            border-color: #e6a23c;
          }
          .tag-list-item:last-child{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      ._list-item:not(:last-child){
        margin-bottom: 20rpx;
      }
    }
    .close-btn{
      width: calc(100% - (var(--list-padding-) * 2));
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      font-size: 35rpx;
      border-radius: 100rpx;
      position: fixed;
      bottom: var(--list-padding-);
      left: var(--list-padding-);
      color: #fff;
      background-color: #f56c6c;
      border-color: #f56c6c;
    }
  }
  // 二维码类型选择
  .promotion-qr-code{
    height: 500rpx!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>
