<template>
	<view class="page-content">
    <!--主要内容-->
    <view class="main-content">
      <!--顶部信息-->
      <view class="top">
        <view class="title">四川金牛区代理-万马奔鸿实业D</view>
        <view class="identity-info">
          <view class="identity">省公司发起人</view>
          <view class="change-btn">切换</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">
          <view v-for="(item,index) in staging_list" :key="index" class="info-list-item">
            <view class="item-icon">
              <text :class="['iconfont', item.icon ]"></text>
            </view>
            <view class="item-title">{{ item.title }}</view>
          </view>
        </view>
      </view>
    </view>

    <!--授权登录-->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
	</view>
</template>

<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';

export default {
  name: 'business',
  components: {
    authorize,
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      // 登录相关
      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},
      },
      // 工作台
      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'},
      ]




    }
  },
  onLoad(options) {
    // 判断：是否登录
    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 () {},






  }
}
</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{
        --info-list-item-size-: calc(var(--info-list-content-width-) / 4);
        .item-icon{
          .iconfont{
            font-size: 50rpx;
          }
        }
      }
    }
  }
}
</style>
