<template>
  <view :style="viewColor">
    <!--具体内容-->
    <view class='content-box'>
      <!--选项卡-->
      <view class="tabs">
        <view :class="['tabs-item',{'tabs-item-active': (tab_active == 'list')}]" @click="init('list')">酒道馆</view>
        <view :class="['tabs-item',{'tabs-item-active': (tab_active == 'exchange_record')}]" @click="init('exchange_record')">兑换记录</view>
      </view>
      <!--站点管理-->
      <view class="site-list" v-if="tab_active == 'list'">
        <view class="site-box" v-for="(item, index) in list" :key="index">
          <view class="left">
            <view class="title">{{item.title}}</view>
            <view class="address">{{item.address}}</view>
          </view>
          <view v-if="item.is_show == 1" class="right" @click="showQrCode(item)">兑换码</view>
          <view v-else class="right not-btn">已停用</view>
        </view>
      </view>
      <!--兑换记录-->
      <view class="site-exchange-record" v-if="tab_active == 'exchange_record'">
        <view class="record-box" v-for="(item, index) in list" :key="index">
          <view class="top-info">
            <view class="left">
              <view class="title">{{ item.point_title }}</view>
              <view class="time">{{ item.create_time }}</view>
            </view>
            <view class="right">{{ item.total_money }}</view>
          </view>
          <view class="other-info">
            <view class="other-info-line">消费用户：{{ item.nickname || item.uid }}</view>
            <view class="other-info-line">扣除酒卡额度：{{ (item.total_money - item.diff_money_pay).toFixed(2) }}</view>
            <view class="other-info-line">使用酒水卡积分：{{ item.use_integral }}</view>
            <view class="other-info-line" v-if="item.diff_money > 0">差价：{{ item.diff_money }}</view>
            <view class="other-info-line" v-if="item.diff_money_pay > 0">差价实付金额：{{ item.diff_money_pay }}</view>
          </view>
        </view>
      </view>
    </view>
    <!--授权登录-->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
    <!--二维码-->
    <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 { siteManage, getSiteQrCode } from '@/api/exchange.js';
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import emptyPage from '@/components/emptyPage.vue';

const app = getApp();
export default {
  components: {
    authorize,
    emptyPage,
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      pointUserInfo: {},
      // 选项卡
      tab_active: 'list',// list=我的站点；exchange_record=兑换记录
      // 列表
      list: [],
      page: 1,
      // 二维码
      qrCode: '',
    };
  },
  computed: {
    ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
  },
  onLoad(options) {
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init('list');
    }
  },
  onReachBottom: function () {
    this.getList();
  },
  watch: {},
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authColse(e) {
      this.isShowAuth = e
    },
    // 授权成功 信息初始化
    init (active) {
      let _this = this;
      _this.tab_active = active || 'list';
      _this.list = [];
      _this.page = 1;
      _this.getList();
    },
    // 提货记录
    getList() {
      let _this = this;
      let params = {
        page: _this.page
      };
      siteManage(_this.tab_active, params)
          .then(res => {
            let list = res.data.list || {};
            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
            });
          });
    },
    // 显示店铺兑换二维码
    showQrCode(item){
      let _this = this;
      // 点击按钮触发弹框输入框的显示
      uni.showModal({
        title: '兑换商品金额', // 弹框标题
        content: '',
        editable: true,//是否显示输入框
        placeholderText: '请输入用户兑换商品的总金额',//输入框提示内容
        showCancel: true, // 是否显示取消按钮
        cancelText: '取消', // 取消按钮文字
        confirmText: '确定', // 确认按钮文字
        success: (res) => {
          console.log(res)
          if (res.confirm && Number(res.content) > 0) {
            let inputValue = Number(res.content);
            let params = {
              point_id: item.id,
              total_money: inputValue,
            };
            getSiteQrCode(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
              });
            });
          } else if (res.cancel) {
            console.log('用户点击了取消');
          }
        }
      })
    },
    // 关闭二维码
    closeQrCode(){
      this.$refs.qrCodePopup.close();
    }






  }
}
</script>

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

  .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;
    }
  }

  .site-list{
    width: 100%;
    .site-box{
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      border-bottom: 2rpx solid #CCCCCC;
      .left{
        width: calc(100% - 120rpx);

        .title{
          font-size: 30rpx;
          font-weight: bold;
          width: 100%;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .address{
          width: 100%;
          text-align: left;
          font-size: 26rpx;
          color: #a0a1a7;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .right{
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 15rpx;
        border-radius: 50rpx;
        width: 120rpx;
        text-align: center;
      }
      .not-btn{
        background-color: #909399!important;
        border-color: #909399!important;
        color: #fff!important;
      }
    }
    .site-box:last-child{
      border-bottom: 0!important;
    }
  }

  .site-exchange-record{
    width: 100%;
    .record-box{
      width: 100%;
      padding: 30rpx 20rpx;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;

      .top-info{
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        .left{
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: flex-start;
          .title{
            font-size: 30rpx;
            font-weight: bold;
            width: 100%;
            text-align: left;
          }
          .time{
            width: 100%;
            text-align: left;
            font-size: 26rpx;
            color: #C1C1C1;
          }
        }
        .right{
          font-size: 40rpx;
        }
      }
      .other-info{
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        .other-info-line{
          width: 50%;
          height: 35rpx;
          line-height: 35rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}
.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>
