<template>
  <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: popupHeight }">
    <div class="donate-wrapper">
      <div class="donate-header">
        <van-row>
          <van-col>
            <div class="donate-book">
              <van-image width="80" height="80" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed" />
            </div>
          </van-col>
          <van-col>
            <div class="donate-detail">
              <p class="text">逃家小兔绘本</p>
              <p class="price">¥59</p>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="donate-name">
        <van-row>
          <van-col span="4" style="line-height: 2;">捐赠人<span style="color: red;">*</span></van-col>
          <van-col class="donate-input" span="18">
            <input v-model="donate_name" type="text" style="border: 0; padding: 0.25rem;" />
          </van-col>
        </van-row>
      </div>
      <div class="van-hairline--bottom donate-tips">
        <p style="color: #999999;">
          <van-icon name="warning-o" />&nbsp;&nbsp;您捐献的书籍将用于多民族语言发展项目
        </p>
      </div>
      <div class="donate-number">
        <van-row>
          <van-col span="12"> 数量 </van-col>
          <van-col span="12" style="text-align: right;">
            <van-stepper v-model="donate_number" min="1" max="100" integer input-width="40px" button-size="32px" />
          </van-col>
        </van-row>
      </div>
      <div class="donate-handle">
        <div class="donate-cancel">
          <my-button @on-click="cancelDonate" type="plain">取消</my-button>
        </div>
        <div class="donate-imd">
          <my-button @on-click="donateBook" type="primary">立即捐赠</my-button>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import MyButton from '@/components/MyButton/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

onMounted(() => {

})
</script>

<script>
import mixin from 'common/mixin';

export default {
  props: ['showPopup'],
  mixins: [mixin.init],
  data() {
    return {
      popupHeight: '60%',
      show: false,
      donate_number: 1,
      donate_name: ''
    }
  },
  mounted() {
  },
  watch: {
    showPopup(value, pre) {
      if (value) {
        this.show = value;
        // DOM调整后，把弹出框高度设定到适合高度，配合不同分辨率效果
        this.$nextTick(() => {
          let height = $('.donate-wrapper').height();
          this.popupHeight = height + 10 + 'px';
        })
      }
    }
  },
  methods: {
    closeBtn() {
      this.$emit('on-close', false)
      this.show = false;
    },
    cancelDonate() { 
      this.closeBtn();
    },
    donateBook() {
      console.warn(this.donate_name); 
      console.warn(this.donate_number); 
      this.closeBtn();

      // 交易成功跳转回调页面
      this.$router.push({
        path: '/client/wechatpayCallback'
      })
    },
  }
}
</script>

<style lang="less" scoped>
.donate-wrapper {
  .donate-header {
    padding: 1rem;
    .donate-book {
      border: 1px solid #ECECEC; 
      border-radius: 5px; 
      padding: 0.1rem;
    }
    .donate-detail {
      font-size: 1.25rem; 
      padding: 1rem;
      .text {
        color: #292929; 
        font-weight: bold;
      }
      .price {
        color: #EE332E;
      }
    }
  }
  .donate-name {
    padding: 1rem;
    .donate-input {
      border: 1px solid #B9B9B9; 
      border-radius: 5px; 
      padding: 0.2rem; 
      margin-left: 1rem;
    }
  }
  .donate-tips {
    padding: 1rem; 
    padding-top: 0;
  }
  .donate-number {
    padding: 1rem;
  }
  .donate-handle {
    overflow: auto;
    .donate-cancel {
      width: 49%; 
      float: left;
    }
    .donate-imd {
      width: 50%; 
      float: left;
    }
  }
}
.button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 0 0.5rem;
}
</style>