<template>
  <view class="main-content">
    <!--总统计-->
    <view class="statistics" v-if="Object.values(statistics).length > 0">
      <view class="statistics-content">
        <view class="statistics-block" v-for="(item,index) in statistics" :key="index">
          <view class="statistics-num">{{ item.num || '0.00'}}</view>
          <view class="statistics-title">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!--选项卡-->
    <view class="tabs">
      <view :class="['tabs-item',{'tabs-item-active': (tab_active === 'mer')}]" @click="changeTab('mer')">绑定商家</view>
      <view :class="['tabs-item',{'tabs-item-active': (tab_active === 'order')}]" @click="changeTab('order')">收益记录</view>
    </view>
    <!--绑定商户列表-->
    <view class="list-content">
      <!--商家列表-->
      <template v-if="tab_active === 'mer'">
        <view class="line" v-for="(item,index) in list" :key="index">
          <image class="left-image" :src="item.mer_avatar || default_mer_logo" mode="widthFix"></image>
          <view class="right">
            <view class="store-name">{{ item.mer_name || '' }}</view>
            <view class="rate">收益比例：{{ item.resource_shareholders_rate || '' }}%</view>
          </view>
        </view>
      </template>
      <!--订单列表-->
      <template v-if="tab_active === 'order'">
        <view class="order-line" v-for="(item,index) in list" :key="index">
          <!--顶部内容 订单号、状态-->
          <view class="top-content">
            <view class="order_sn">{{ item.order_sn || ''}}</view>
            <view :class="['status','status-' + item.status]">{{ item.status | statusText}}</view>
          </view>
          <!--主要信息-->
          <view class="info-content">
            <view class="left">
              <view class="mark">{{ item.mark || ''}}</view>
              <view class="time">{{ item.create_time || ''}}</view>
            </view>
            <view v-if="item.pm == 1" class="right-num right-inc">+{{ item.number }}</view>
            <view v-else class="right-num right-dec">-{{ item.number }}</view>
          </view>
        </view>
      </template>
    </view>
    <!--授权登录-->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import {shareholdersMerList, shareholdersStatistics, shareholdersOrderList} from "@/api/user";
import { HTTP_REQUEST_URL } from '@/config/app.js';

export default {
  name: 'business',
  components: {
    authorize
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 统计
      statistics: {},
      // 选项卡
      tab_active: 'mer',// mer=绑定商家；order=收益记录
      // 列表相关
      list: [],
      total: 0,
      page: 1,
      default_mer_logo: '',
    }
  },
  filters: {
    statusText(value) {
      if(value){
        let list = {
          '0': '待结算',
          '1': '已结算',
          '-1': '已退款',
        };

        return list[value];
      }
    }
  },
  onLoad(options) {
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  onReady() {
    this.default_mer_logo = `${HTTP_REQUEST_URL}/static/images/icon/default_mer_logo.png`;
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      this.getStatistics();
      this.getList();
    },
    // 统计
    getStatistics(){
      let _this = this;
      shareholdersStatistics().then(res => {
        _this.statistics = res.data || {};
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 记录
    getList() {
      let _this = this;
      let params = {
        page: _this.page
      };
      // 根据类型获取对应的内容；mer=绑定商家；order=收益记录
      if(_this.tab_active === 'mer'){
        // 绑定商家
        shareholdersMerList(params).then(res => {
          let list = res.data.list || {};
          _this.total = res.data.count || 0;
          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});
        });
      }else{
        // 收益记录
        shareholdersOrderList(params).then(res => {
          let list = res.data.list || {};
          _this.total = res.data.count || 0;
          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});
        });
      }
    },
    // 切换选项卡
    changeTab(type){
      this.tab_active = type || 'mer';
      this.list = [];
      this.page = 1;
      this.getList();
    },


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

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

  .statistics{
    padding: 20rpx;

    .statistics-content{
      width: 100%;
      background: #ffffff;
      border-radius: 15rpx;
      padding: 20rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
      box-shadow: 0px 0px 5px 1px #0015295e;
      .statistics-block{
        width: calc(100% / 3);
        height: 130rpx!important;
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        .statistics-num{
          font-size: 34rpx;
          font-weight: bold;
          height: 50rpx;
          line-height: 50rpx;
        }
        .statistics-title{
          font-size: 26rpx;
          color: #909399;
        }
      }
    }
  }

  .tabs{
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    .tabs-item{
      width: 50%;
      padding: 0 20px;
      height: 40px;
      box-sizing: border-box;
      line-height: 40px;
      display: inline-block;
      list-style: none;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      position: relative;
      text-align: center;
      border-bottom: 2rpx solid #CCCCCC;
    }
    .tabs-item-active{
      color: #409eff;
      border-bottom: 2rpx solid #409eff;
    }
  }

  .list-content{
    width: 100%;
    .line{
      padding: 30rpx;
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      background: #ffffff;
      .left-image{
        width: 100rpx;
        height: 100rpx;
      }
      .right{
        width: calc(100% - 100rpx);
        padding-left: 20rpx;
        .store-name{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 30rpx;
          font-weight: bold;
        }
        .rate{
          font-size: 26rpx;
        }
      }
    }
    .line:not(:last-child){
      border-bottom: 2rpx solid #f6f6f6;
    }

    .order-line{
      padding: 30rpx;
      width: 100%;
      background: #ffffff;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: center;
      margin-bottom: 20rpx;
      .top-content{
        width: 100%;
        height: 50rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 2rpx solid #f6f6f6;
        .order_sn{
          font-size: 30rpx;
          text-align: left;
        }
        .status{
          font-size: 28rpx;
          text-align: right;
        }
        .status-0{
          color: #909399
        }
        .status-1{
          color: #67c23a;
        }
        .status--1{
          color: #f56c6c;
        }
      }
      .info-content{
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        .left{
          width: calc(100% - 120rpx);
          text-align: left;
          .mark{
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 30rpx;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .time{
            font-size: 26rpx;
            width: 100%;
            height: 40rpx;
            line-height: 40rpx;
          }
        }
        .right-num{
          font-size: 30rpx;
          width: 120rpx;
          text-align: right;
        }
        .right-inc{
          color: #67c23a;
        }
        .right-dec{
          color: #f56c6c;
        }
      }
    }
  }
}
</style>
