<template>
  <!--pages/goods-list/index.wxml-->
  <view class="container">
    <view class="content">
      <view class="title flex_r flex_ac"> 茶宝 </view>
      <view class="moeny flex_r flex_ac flex_jb">
        <input
          type="text"
          :maxlength="12"
          v-model="inputMoney"
          placeholder="请输入兑换茶宝数量"
        />
        <view class="title_select">
          <picker
            @change="bindPickerChange"
            :value="index"
            :range="array"
            :range-key="'source'"
          >
            <view class="flex_r flex_ac">
              <view class="select_name">{{ array[index]["source"] }}</view>
              <image
                style="width: 25rpx; height: 25rpx; margin-left: 15rpx"
                src="/static/img/down.png"
                mode=""
              ></image>
            </view>
          </picker>
        </view>
      </view>
      <view class="option flex_r flex_ac flex_jb">
        <view class="balance flex_r flex_ac">当前可用茶宝：{{ qxMoney }}</view>
      </view>
    </view>
    <view class="btn flex_r flex_ac flex_jc" @tap="onSubForm">确定兑换</view>
    <view class="showlist" v-for="(item, index) in show" :key="index"
      >{{ index + 1 }}、{{ item }}</view
    >
  </view>
</template>

<script>
let app = getApp();
// var reqApi = new ReqApi();
var appEv = app.$vm.$options;
// var https = app.globalData.ShopUrl;
// var util = require("@/utils/util.js");
// import { ReqApi } from "@/utils/reqTools.js";
export default {
  data() {
    return {
      show: [],
      qxMoney: 0.0,
      inputMoney: "",
      array: [{ name: "多分CHA", type: 12 }],
      index: 0,
      type: "", //兑换类型
    };
  },
  onLoad: function (options) {
    // this.qxMoney = 0.0;
    // this.inputMoney = "";
    // this.loadData();
  },
  methods: {
    bindPickerChange: function (e) {
      this.index = e.target.value;
      this.type = this.array[index].type;
    },
    loadData() {
      var that = this;
      const cash = reqApi.integralType();
      if (cash) {
        cash.then((res) => {
          if (res.data.status == 200) {
            (that.qxMoney = res.data.integral), (that.show = res.data.show);
            that.array = res.data.data;
            this.type = res.data.data[0].type;
          } else {
            appEv.errTips(res.data.msg || "");
          }
        });
      }
    },

    onSubForm() {
      let that = this;
      var priceTest = /^[0-9]+([.]{1}[0-9]{0,2}){0,1}$/;
      if (this.inputMoney == "") {
        appEv.errTips("请输入金额");
        return;
      }
      if (
        !priceTest.test(this.inputMoney) ||
        parseFloat(this.inputMoney) <= 0
      ) {
        uni.showModal({
          content: "请输入不超过3位小数的金额",
          showCancel: false,
          success(res) {},
        });
        return;
      }

      if (Number(this.inputMoney) > this.qxMoney) {
        uni.showModal({
          content: `当前可提现${that.qxMoney}`,
          showCancel: false,
          success(res) {},
        });
        return;
      }
      uni.showModal({
        content: "是否进行茶宝兑换",
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            that.toCach();
          } else if (res.cancel) {
          }
        },
      });
    },
    toCach() {
      let that = this;
      var money = (Math.round(this.inputMoney * 100) / 100).toFixed(0);

      console.log(money, that.type);
      var cashApply = reqApi.exchangeIntegral({
        integral: money,
        type: that.type,
      });
      if (cashApply) {
        cashApply.then((res) => {
          uni.hideLoading();
          if (res.data.status == 200) {
            that.inputMoney = "";
            appEv.errTips(res.data.msg);
            that.loadData();
          } else {
            uni.showModal({
              content: res.data.msg || "",
              showCancel: false,
              success(res) {},
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
// 页面配置
.container {
  border-top: 20rpx solid #f5f5f5;
  padding: 43rpx 30rpx;
  box-sizing: border-box;
}
// 页面配置-end

.title_select {
  margin-left: 36rpx;
}
.select_name {
  color: #2db48a;
  font-size: 24rpx;
}
.balance {
  font-size: 28rpx;
  color: #7c838d;
}
.hint {
  font-size: 26rpx;
  color: #8f8f8f;
  margin-top: 40rpx;
}
.title {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 40rpx;
}
.showlist {
  font-size: 26rpx;
  color: #7c838d;
  margin-bottom: 20rpx;
}
.moeny input {
  color: #121922;
  font-size: 32rpx;
  height: 56rpx;
  margin-left: 10rpx;
}
.upload_con {
  width: 200rpx;
  height: 200rpx;
  border: 3rpx solid #898989;
  border-radius: 10rpx;
  margin-top: 60rpx;
}
.moeny {
  font-size: 42rpx;
  color: #121922;
  line-height: 1;
  height: 56rpx;
  border-bottom: 3rpx solid #2db48a;
  margin-bottom: 40rpx;
  padding: 37rpx 0;
}
.content {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  width: 100%;
  overflow: hidden;
  padding: 40rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
}
.btn {
  width: 348rpx;
  height: 80rpx;
  background: #18bb88;
  color: #fff;
  font-size: 40rpx;
  border-radius: 10rpx;
  box-shadow: 0px 8px 22px 2px rgba(24, 187, 136, 0.22);
  margin: 64rpx auto;
}
</style>

