<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 v-if="item.avatar" width="80" height="80" :src="item.avatar" />
              <van-image v-else width="80" height="80" :src="icon_avatar" />
            </div>
          </van-col>
          <van-col>
            <div class="donate-detail">
              <p class="text">{{ item.name }}</p>
              <p class="price">¥{{ item.price }}</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="item.perf_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 Cookies from 'js-cookie'
import icon_avatar from '@images/que-touxiang@2x.png'

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();

// TODO: 微信支付

onMounted(() => {

})
</script>

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

export default {
  props: ['showPopup', 'item'],
  mixins: [mixin.init],
  data() {
    return {
      popupHeight: '60%',
      show: false,
      donate_number: 1,
    }
  },
  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() {
      // 爱心捐书接口
      axios.post('/srv/?a=add_donate', {
        book_id: this.item.book_id,
        qty: this.donate_number,
        donate_name: this.item.perf_name,
      })
      .then(res => {
        if (res.data.code === 1) {
          console.warn(res.data.data);
          this.closeBtn();

          // 交易成功跳转回调页面
          // TEMP: 临时传参 donate_id
          this.$router.push({
            path: '/client/wechatpayCallback',
            query: {
              donate_id: res.data.data.id
            }
          })
        } else {
          console.warn(res);
          Toast({
            icon: 'close',
            message: res.data.msg
          });
        }
      })
      .catch(err => {
        console.error(err); 
      })
    },
  }
}
</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>