<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, watch, nextTick } 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();

const props = defineProps({
  item: Object,
  showPopup: Boolean
})

const emit = defineEmits(['on-close']);

let donate_number = ref(1)
const donateBook = () => {
  // 爱心捐书接口
  axios.post('/srv/?a=add_donate', {
    book_id: props.item.book_id,
    qty: donate_number.value,
    donate_name: props.item.perf_name,
  })
  .then(res => {
    if (res.data.code === 1) {
      console.warn(res.data.data);
      closeBtn();

      // 交易成功跳转回调页面
      // TEMP: 临时传参 donate_id
      $router.push({
        path: '/client/wechatpayCallback',
        query: {
          donate_id: res.data.data.id
        }
      })
    } else {
      console.warn(res);
      if (!res.data.show) return false;
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err); 
  })
}

const show = ref(false);
let popupHeight = ref('60%');

watch(() => props.showPopup, (v) => {
  show.value = v
  // DOM调整后，把弹出框高度设定到适合高度，配合不同分辨率效果
  nextTick(() => {
    let height = $('.donate-wrapper').height();
    popupHeight.value = height + 10 + 'px';
  })
})

const closeBtn = () => {
  emit('on-close', false)
  show.value = false;
}

const cancelDonate = () => { 
  closeBtn();
}

// TODO: 微信支付

onMounted(() => {

})
</script>

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

export default {
  mixins: [mixin.init],
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  }
}
</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>