<template>
  <view class="page-content">
    <!--主要内容-->
    <view class="main-content">
      <!--顶部内容-->
      <view class="top">
        <image class="top-image" mode="widthFix" :src="top_icon" />
        <view class="top-title">
          <view class="title">共创股东</view>
          <view class="sub-title">邀请共创股东 助力店铺推广</view>
        </view>
      </view>
      <!--等级列表-->
      <view class="_list">
        <view class="_list-box" v-for="(item,index) in level_list" :key="index">
          <!--标题-->
          <view class="title">
            <image class="top-image" mode="widthFix" :src="title_icon" />
            {{ item.title || '' }}
          </view>
          <!--名额-->
          <view class="quota">
            <view class="quota-item" v-if="item.mer_quota > 0">剩余名额：{{ item.quota_surplus || 0 }}</view>
            <view class="quota-item">已邀请名额：{{ item.quota_used || 0 }}</view>
          </view>
          <!--赠送-->
          <view class="give" v-if="item.quota > 0 || item.wine_quota > 0 || item.vegetable_quota > 0 || item.oil_quota > 0 || Object.values(item.coupon_list).length > 0">
            <view class="give-quota" v-if="item.quota > 0">赠送瓶装酒额度：{{ item.quota || 0 }}</view>
            <view class="give-quota" v-if="item.wine_quota > 0">赠送封坛酒额度：{{ item.wine_quota || 0 }}</view>
            <view class="give-quota" v-if="item.vegetable_quota > 0">赠送菜卡额度：{{ item.vegetable_quota || 0 }}</view>
            <view class="give-quota" v-if="item.oil_quota > 0">赠送油卡额度：{{ item.oil_quota || 0 }}</view>
            <view class="give-coupon" v-if="Object.values(item.coupon_list).length > 0">
              <view class="give-coupon-title">赠送优惠券：</view>
              <view class="coupon-item" v-for="(couponItem,couponIndex) in item.coupon_list" :key="couponIndex">
                {{ couponItem.title || '' }}
              </view>
            </view>
          </view>
          <!--操作-->
          <view class="operation">
            <view class="price">{{ item.price > 0 ? ('¥' + item.price): '免费' }}</view>
            <view class="qr-code-btn" @click="invite(item)">邀请码</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
    <!--二维码弹框-->
    <qr-code :isShow="qr_code_show" :params="qr_code_params" @close="qr_code_show = false"></qr-code>

  </view>
</template>

<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import { HTTP_REQUEST_URL } from '@/config/app.js';
import { merShareholderLevelList } from "@/api/store";
import qrCode from "@/components/diyPopup/qrCode";

export default {
  name: 'business',
  components: {
    authorize,
    qrCode
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor', 'shopIsLogin', 'shopMerId'])
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 等级列表相关
      level_list: {},
      merchant_type: '',
      // 图片
      top_icon: '',
      title_icon: '',
      // 二维码信息
      qr_code_show: false,
      qr_code_params: {},

    }
  },
  onReady() {
    this.top_icon = `${HTTP_REQUEST_URL}/static/images/mer/shareholder/bg001.jpg`;
    this.title_icon = `${HTTP_REQUEST_URL}/static/images/mer/shareholder/1.png`;
  },
  onLoad(options) {
    this.merchant_type = options.merchant_type
    // 判断：是否登录
    if (!this.isLogin) {
      this.isAuto = true;
      this.isShowAuth = true;// 未登录  授权登录
    }
    else this.init();// 已登录  获取信息
  },
  watch: {},
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      // 判断：商户是否登录
      if(!this.shopIsLogin){
        uni.showModal({
          title: '未登录',
          content: '请先登录商户账号!',
          confirmText: '去登录',
          cancelText: '返回首页',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url:'/pages/user/index'
              })
            }
            else{
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          }
        });
        return false;
      }
      // 商户登录成功后操作
      this.getLevelList();
    },
    // 获取等级列表
    getLevelList(){
      let _this = this;
      merShareholderLevelList({merchant_type: _this.merchant_type, mer_id: _this.shopMerId}).then(res => {
        _this.level_list = res.data || {};
      })
    },
    // 点击去邀请
    invite(item){
      let _this = this;
      this.qr_code_params = {
        type: 'mer_shareholder_invite',
        mer_id: _this.shopMerId,
        level: item.id,
      };
      this.qr_code_show = true;
    },
  },
  // 滚动到底部
  onReachBottom() {},
}
</script>

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

  .top{
    position: relative;
    width: 100%;
    display: inline-flex;
    .top-image{
      width: 100vw;
    }
    .top-title{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: center;
      padding-left: 30rpx;
      .title{
        font-size: 65rpx;
        letter-spacing: 10rpx;
        font-weight: bold;
        color: transparent;
        background-image: linear-gradient(to bottom, #ffffff, #f8f4c2);
        background-clip: text;
      }
      .sub-title{
        color: #fffcdb;
        font-size: 30rpx;
        height: 50rpx;
        line-height: 50rpx;
      }
    }
  }

  ._list{
    width: 100%;
    padding: 0 20rpx 50rpx 20rpx;
    position: relative;
    top: -45rpx;
    ._list-box{
      border-radius: 20rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;
      padding: 20rpx;

      .title{
        width: 100%;
        height: 60rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
        .top-image{
          width: 35rpx!important;
          height: 35rpx!important;
          margin-right: 20rpx!important;
        }
      }

      .quota{
        width: 100%;
        height: 50rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;

        .quota-item{
          font-size: 28rpx;
          color: #7b7b7b;
        }
        .quota-item:first-child{
          margin-right: 35rpx;
        }
      }

      .give{
        width: 100%;
        border-radius: 10rpx;
        padding: 20rpx;
        background-color: #f6f6f6;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        align-content: flex-start;
        .give-quota{
          width: 50%;
          font-size: 26rpx;
          height: 40rpx;
          line-height: 40rpx;
        }
        .give-coupon{
          width: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;
          align-content: flex-start;
          .give-coupon-title{
            margin-bottom: 10rpx;
            height: 40rpx;
            line-height: 38rpx;
            font-size: 26rpx;
          }
          .coupon-item{
            border: 2rpx solid #c7c7c7;
            border-radius: 2rpx;
            font-size: 24rpx;
            height: 40rpx;
            line-height: 38rpx;
            padding: 0 10rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
          }
        }
      }

      .operation{
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding-top: 20rpx;
        .price{
          color: #da0000;
          font-size: 32rpx;
        }
        .qr-code-btn{
          background-color: #da0000;
          color: #ffffff;
          border-radius: 150rpx;
          font-size: 30rpx;
          height: 50rpx;
          line-height: 48rpx;
          padding: 0 30rpx;
        }
      }
    }
  }
}
</style>
