<template>
  <view class="content">
    <custom :bgColor="'transparent'">
      <template v-slot:content>
        <view class="custom_content flex_ac">
          <view class="custom_c_txt">マインポイント</view>
        </view>
      </template>
    </custom>

    <view class="main">
      <view class="zon-box">
        <view class="zon-tit">マインポイント</view>
        <view class="zon-jifen"
          ><view class="img">
            <image src="../../static/img/icon_28.png" /> </view
          >{{ allIntegral }}</view
        >
      </view>
      <view class="kou-box">
        <view class="kou-tit"> ご利用ポイント数 </view>
        <view class="kou-nr">
          <view class="nr-left">
            <input
              type="number"
              class="uni-input"
              name="input"
              v-model="userNum"
              :style="{ color: userNum == 0 ? '#dbdbdb' : '#000000' }"
            />
          </view>
          <view class="nr-right">
            <view class="txt">{{ $t("Point") }}</view>
            <view @tap="allBtn" class="button"
              >全部使う/{{ $t("全部使用") }}</view
            >
          </view>
        </view>
        <view class="kou-txt">※ポイント利用上限 {{ integCap }}point</view>
      </view>

      <view @tap="btnOk" :class="['btn-btm', { 'btn-acv': userNum != 0 }]"
        >確認/{{ $t("确认") }}</view
      >
    </view>
  </view>
</template>

<script>
import { getWriteOffInfo } from "@/request/ticketReq.js";
import { getUserWallet } from "@/request/loginReq.js";
export default {
  data() {
    return {
      userNum: "",
      allIntegral: "",
      heXiaoData: [],
      integCap: "", // 计算后积分上限
      poins_deduction: "", // 店铺设置的上限
    };
  },
  onLoad(e) {
    let storeId = uni.getStorageSync("store_obj").id;
    let userId = uni.getStorageSync("customer_info")[0];
    this.getListFn(storeId, userId);
    this.getUserWalletFn(userId);

    this.heXiaoData = uni.getStorageSync("heXiaoData");

    console.log("heXiaoData", this.heXiaoData);
  },
  methods: {
    btnOk() {
      this.userNum = +this.userNum;
      if (this.userNum == 0) return;

      // 判断输入的积分是否超过上限
      if (this.integCap < this.userNum) {
        uni.showToast({
          icon: "none",
          title: this.$t(
            "超出账号可使用积分上限,以帮你修正,请确认并再次点击按钮"
          ),
        });
        this.userNum = this.integCap;
        return;
      }
      console.log("确定", this.userNum);
      // 计算抵扣后的金额
      // if (!!this.heXiaoData.dMoney) {
      // 抵扣后的价格=总价-(积分抵扣+优惠券抵扣)
      this.heXiaoData.dMoney =
        this.heXiaoData.totalMoney - (this.userNum + this.heXiaoData.dTicket);
      // } else {
      //   this.heXiaoData.dMoney = this.heXiaoData.totalMoney - this.userNum;
      // }
      // 抵扣的积分
      this.heXiaoData.dIntegral = this.userNum;
      uni.setStorageSync("heXiaoData", this.heXiaoData);

      //   uni.setStorageSync("use_point", this.userNum);
      uni.navigateBack({
        delta: 1,
      });
    },
    // 获取用户积分
    async getUserWalletFn(id) {
      let res = await getUserWallet(id);
      this.allIntegral = res.data.data.points;
      getUserWallet;
      console.log("钱包", res);
    },
    async getListFn(spid, userId) {
      let res = await getWriteOffInfo({ shop_id: spid, user_id: userId });
      this.poins_deduction = res.data.data.poins_deduction;
      console.log("店铺上限", this.poins_deduction);

      this.integCap = Math.round(
        (this.poins_deduction.deduction_ratio / 100) *
          this.heXiaoData.totalMoney
      );

      // 一个是对比消费金额计算出的积分上限，一个是店铺设置的积分上限
      //     -优先显示计算出的上限，如果计算出的上限超过店铺设置的上限，则显示店铺设置的上限
      if (
        this.poins_deduction.max_poins_deduction != 0 &&
        this.poins_deduction.max_poins_deduction < this.integCap
      ) {
        this.integCap = this.poins_deduction.max_poins_deduction;
      }
      console.log("计算后", this.integCap);
    },
    allBtn() {
      // 可使用的积分上限
      if (this.allIntegral > this.integCap) {
        this.userNum = this.integCap;
      } else {
        this.userNum = this.allIntegral;
      }
    },
  },
};
</script>

<style>
page {
  background: linear-gradient(
    rgba(160, 204, 87, 0.2) 0%,
    rgba(223, 226, 0, 0.2) 100%
  );
}
</style>
<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.custom_content {
  width: 500rpx;
  justify-content: center;
}
.custom_c_txt {
  font-size: 40rpx;
  color: $step_color;
  font-weight: 600;
}

.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: auto;
  background-color: #f8f9fb;
  height: 100vh;
  background: linear-gradient(
    rgba(160, 204, 87, 0.2) 0%,
    rgba(223, 226, 0, 0.2) 100%
  );
  background: linear-gradient(
    rgba(160, 204, 87, 0.2) 0%,
    rgba(223, 226, 0, 0.2) 100%
  );
}
.main {
  padding: 32rpx 30rpx 0;
  .zon-box {
    padding: 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    .zon-tit {
      color: #85bc6b;
      font-weight: 600;
      font-size: 28rpx;
      margin-bottom: 8rpx;
    }
    .zon-jifen {
      font-weight: 600;
      font-size: 68rpx;
      color: #000;
      display: flex;
      align-items: center;
      .img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 10rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .kou-box {
    padding: 30rpx;
    background-color: #fff;
    border-radius: 16rpx;

    .kou-tit {
      font-weight: 600;
      font-size: 28rpx;
      color: #85bc6b;
    }

    .kou-nr {
      margin: 16rpx 0 20rpx;
      border: 1px solid #85bc6b;
      padding: 24rpx;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      .nr-left {
        flex: 1;
        input {
          font-weight: 600;
          font-size: 48rpx;
          //   color: #dbdbdb;
        }
      }
      .nr-right {
        display: flex;
        align-items: center;
        .txt {
          font-weight: 400;
          font-size: 36rpx;
          color: #000;
        }
        .button {
          padding: 20rpx 30rpx;
          border-radius: 39rpx;
          background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
          margin-left: 24rpx;
          color: #fff;
          font-weight: 700;
        }
      }
    }

    .kou-txt {
      font-weight: 600;
      font-size: 28rpx;
      color: #007ad7;
    }
  }

  .btn-btm {
    padding: 20rpx 0;
    width: 560rpx;
    background-color: #f2f2f2;
    font-weight: 600;
    font-size: 32rpx;
    color: #acacac;
    border-radius: 41rpx;
    text-align: center;
    margin: 0 auto;
    margin-top: 60rpx;
    &.btn-acv {
      background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
      color: #fff;
    }
  }
}
</style>