<template>
	<view class="custom-content">
    <!--顶部搜索框-->
    <view class="search-content" :style="'background-image:url('+ custom_top_bg +')'">
      <view class="search-box">
        <text class="iconfont icon-sousuo" @click="searchCustom()"></text>
        <input class="search-input" type='text' placeholder='请输入会员昵称' v-model="search.nickname" @input="searchCustom()" />
      </view>
    </view>
    <!-- 客户列表 -->
    <view class="custom-list">
      <view class="list-item" v-for="(item,index) in list" :key="index">
        <view class="left-avatar">
          <image v-if="item.avatar.length > 10" :src="item.avatar" mode="widthFix"/>
        </view>
        <view class="center-info">
          <view class="info-top">
            <view class="nickname">{{ item.nickname }}</view>
            <view class="custom-id">{{ item.uid }}</view>
          </view>
          <view class="info-bottom">已预支积分：{{ item.advance_exchange_integral || 0.00 }}</view>
        </view>
        <view class="right-btn">
          <!--<view class="give-btn" @click="showIntegralChangePopup(item)">赠送积分</view>-->
          <view class="give-btn" v-if="Number(item.advance_exchange_integral) <= 0" @click="advanceIntegral(item)">预支积分</view>
        </view>
      </view>
    </view>
    <!-- 积分变更弹框 -->
    <uni-popup ref="integralChangePopup">
      <view class="integral-change">
        <view class="integral-change-content">
          <view class="title">赠送积分</view>
          <view class="form-content">
            <view class="form-content-box">
              <view class="box-title">变更数量：</view>
              <view class="box-value">
                <input type='number' placeholder='输入变更数量' v-model="integral_change.number"/>
              </view>
            </view>
            <view class="form-content-box">
              <view class="box-title">变更凭证：</view>
              <view class="box-value">
                <!--图片内容-->
                <view class="image-img image-size-set" v-if="integral_change.voucher_image" @click="uploadImage">
                  <image class="image-img-image" :src="integral_change.voucher_image" mode="widthFix"></image>
                  <view class="change-image-btn">替换图片</view>
                </view>
                <!--上传图片按钮-->
                <view class="upload-btn-box image-size-set" v-else @click="uploadImage">
                  <image class="upload-btn-icon" src="@/static/images/custom/creamer.png" mode="widthFix"></image>
                  上传凭证
                </view>
              </view>
            </view>
          </view>
          <view class="submit-button">
            <view class="submit-btn" @click="submitIntegralChange">提交</view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 图片上传 -->
    <avatar @upload="doUpload" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx"></avatar>
	</view>
</template>

<script>
import avatar from "@/components/yq-avatar/yq-avatar.vue";
import { HTTP_REQUEST_URL } from '@/config/app';
import { getCustomList,customIntegralChange,advanceExchangeIntegral } from "@/api/user.js";

export default {
  name: 'custom',
  components: {
    avatar
  },
  data() {
    return {
      mer_id: 0,
      list: [],
      search:{
        page: 1,
        limit: 20,
        nickname: '',
      },
      // 积分改变
      integral_change:{
        uid: 0,
        pm: 1,// 0 = 支出 1 = 获得
        number: '',// 变更数量
        voucher_image: '',// 积分变更凭证
      },
      imgName: "",
      custom_top_bg: '',
    }
  },
  computed: { },
  onLoad: function(options) {
    this.mer_id = options.mer_id || 0;
    if(this.mer_id <= 0){
      uni.showModal({
        title: '提示',
        content: '非法访问，参数不明确！',
        success: function success(res) {
          uni.navigateBack();
        }
      });
    }
    // 获取用户列表
    this.getCustom();
  },
  onReady() {
    this.custom_top_bg = `${HTTP_REQUEST_URL}/static/images/mer/custom_top_bg.jpg`;
  },
  methods: {
    // 获取用户列表
    getCustom(isRefresh = false) {
      let _this = this;
      // 是否为刷新
      if(isRefresh) {
        _this.search.page = 1;
        _this.list = [];
      }
      // 发起请求
      getCustomList(_this.mer_id, _this.search).then(res => {
        let list = res.data.list || {};
        if(Object.values(list).length > 0){
          // 数据接收
          _this.list = _this.list.concat(list);
          _this.search.page++;
        }
      }).catch(err => {
        console.log("错误 catch：",err);
      })
    },
    // 搜索
    searchCustom(){
      this.$nextTick(()=>{
        this.getCustom(true);
      });
    },
    // 赠送积分 - 初始化并且显示弹框
    showIntegralChangePopup(item){
      let _this = this;
      _this.integral_change = _this.$options.data().integral_change;
      _this.integral_change.uid = item.uid;
      _this.$refs.integralChangePopup.open('center');
    },
    // 图片上传 - 触发上传
    uploadImage() {
      let avatar = this.$refs.avatar;
      avatar.fChooseImg(1,{selWidth: '350upx', selHeight: '350upx', inner: true});
    },
    // 图片上传 - 上传
    doUpload(rsp) {
      let _this = this
      uni.uploadFile({
        url: HTTP_REQUEST_URL + '/api/upload/image/field',
        filePath: rsp.path,
        name: 'field',
        formData: {
          'filename': rsp.path,
          'name': _this.imgName
        },
        header: {
          // #ifdef MP
          "Content-Type": "multipart/form-data",
          // #endif
          // [TOKENNAME]: 'Bearer ' + store.state.app.token
        },
        success: (uploadFileRes) => {
          let imgData = JSON.parse(uploadFileRes.data)
          // console.log(imgData.data);
          _this.integral_change.voucher_image = imgData.data.path || '';
        }
      });
    },
    // 提交赠送积分请求
    submitIntegralChange(){
      let _this = this;
      // 数据验证
      let integralChangeInfo = Object.assign({},_this.integral_change);
      let number = isNaN(parseFloat(integralChangeInfo.number)) ? 0 : parseFloat(integralChangeInfo.number);
      if(number <= 0) {
        uni.showModal({
          title: '提示',
          content: '请输入正确的变更数量！',
        });
        return false;
      }
      if(integralChangeInfo.voucher_image.length <= 0){
        uni.showModal({
          title: '提示',
          content: '请上传凭证！',
        });
        return false;
      }
      // 发起请求
      customIntegralChange(_this.mer_id, integralChangeInfo).then(res => {
        // 关闭弹框
        _this.$refs.integralChangePopup.close();
        // 刷新
        _this.getCustom(true);
        // 提示
        uni.showModal({
          title: '提示',
          content: res.message,
        });
      }).catch(err => {
        console.log("错误 catch：",err);
      })
    },
    // 预支积分
    advanceIntegral(item){
      let _this = this;
      // 点击按钮触发弹框输入框的显示
      uni.showModal({
        title: '预支积分', // 弹框标题
        content: '',
        editable: true,//是否显示输入框
        placeholderText: '请输入预支积分数量',//输入框提示内容
        showCancel: true, // 是否显示取消按钮
        cancelText: '取消', // 取消按钮文字
        confirmText: '确定', // 确认按钮文字
        success: (res) => {
          if (res.confirm && Number(res.content) > 0) {
            let inputValue = Number(res.content);
            let params = {
              mer_id: _this.mer_id,
              integral: inputValue,
              uid: item.uid,
            };
            advanceExchangeIntegral(params).then(res => {
              this.$util.Tips({ title: res.message });
              // 刷新
              _this.getCustom(true);
            }).catch(err => {
              this.$util.Tips({title: err});
            });
          } else if (res.cancel) {
            console.log('用户点击了取消');
          }
        }
      })
    },
    // 加载动画
    loadingModel(){
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
    }
  },
  onReachBottom() {
    this.getCustom()
  }
}
</script>

<style scoped lang="scss">
.custom-content{
  // 搜索框
  .search-content{
    width: 100vw;
    background-repeat: no-repeat;
    padding: 20rpx 30rpx;

    .search-box{
      width: 100%;
      height: 70rpx;
      padding: 10rpx 15rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      font-size: 28rpx;

      .icon-sousuo{
        width: calc(70rpx - 15rpx);
        padding-right: 15rpx;
        height: calc(70rpx - (10rpx * 2));
        line-height: calc(70rpx - (10rpx * 2));
        text-align: center;
      }
      .search-input{
        width: calc(100% - 70rpx + 15rpx);
        height: calc(70rpx - (10rpx * 2));
      }
    }
  }

  // 客户列表
  .custom-list{
    width: 100vw;
    background: #FFFFFF;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    .list-item:not(:last-child){
      border-bottom: 2rpx solid #f6f6f6;
    }
    .list-item{
      --item-height-value-: 100rpx;

      width: 100vw;
      padding: 20rpx 30rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      .left-avatar{
        width: 100rpx;
        height: var(--item-height-value-);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        image{
          width: 80rpx !important;
          height: 80rpx !important;
          border-radius: 50% !important;
        }
      }
      .center-info{
        width: calc(100% - 100rpx - 150rpx);
        height: var(--item-height-value-);
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        padding-left: 10rpx;
        .info-top{
          width: 100%;
          height: calc(100rpx - 40rpx);
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          .nickname{
            font-size: 28rpx;
          }
          .custom-id{
            background: #ffeed5;
            padding: 0rpx 8rpx;
            border-radius: 50rpx;
            font-size: 23rpx;
            color: #f8cc88;
            width: max-content;
            height: 30rpx;
            line-height: 30rpx;
            margin-left: 10rpx;
          }
        }
        .info-bottom{
          width: 100%;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 26rpx;
          color: #9e9e9e;
        }
      }
      .right-btn{
        width: 150rpx;
        height: var(--item-height-value-);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        .give-btn{
          background: #ea9a1f;
          padding: 6rpx 15rpx;
          border-radius: 50rpx;
          font-size: 26rpx;
          color: #FFFFFF;
          width: max-content;
        }
      }
    }
  }

  // 积分变更弹框
  .integral-change{
    width: 100vw;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;

    .integral-change-content{
      width: calc(100vw - (20rpx * 2) - (30rpx * 2));
      background: #FFFFFF;
      border-radius: 20rpx;
      padding: 20rpx;

      .title{
        width: 100%;
        text-align: center;
        font-size: 30rpx;
        font-weight: 600;
        height: 60rpx;
        line-height: 45rpx;
        margin-bottom: 35rpx;
      }
      .form-content{
        width: 100%;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: flex-start;
        .form-content-box:not(:last-child){
          margin-bottom: 20rpx;
        }
        .form-content-box{
          --box-width-: 180rpx;

          width: 100%;
          display: inline-flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: nowrap;
          align-items: center;
          line-height: 60rpx;
          .box-title{
            width: var(--box-width-);
            text-align: right;
            font-size: 28rpx;
          }
          .box-value{
            width: calc(100% - var(--box-width-));

            .image-size-set{
              width: 210rpx;
              height: 210rpx;
              border: 2rpx solid #dddddd;
              border-radius: 8rpx;
              display: inline-flex;
              flex-direction: row;
              justify-content: center;
              flex-wrap: nowrap;
              align-items: center;

              image{
                max-width: 100% !important;
                max-height: 100% !important;
              }
            }

            .upload-btn-box{
              font-size: 24rpx;
              color: #999999;
              display: inline-flex;
              flex-direction: column!important;
              justify-content: center;
              flex-wrap: nowrap;
              align-items: center;
              .upload-btn-icon{
                width: 45rpx !important;
              }
            }



          }
        }
        .image-img{
          position: relative;
          border: unset!important;
          .change-image-btn{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 24rpx!important;
            height: 40rpx;
            line-height: 40rpx;
            background: rgba(0,0,0,.5);
            color: #FFFFFF;
          }
        }
      }
      .submit-button{
        width: 100%;
        margin-top: 60rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        .submit-btn{
          color: #fff;
          background-color: #437ffd;
          border-color: #437ffd;
          padding: 10rpx 25rpx;
          font-size: 24rpx;
          border-radius: 6rpx;
        }
      }
    }
  }

}
</style>
