<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="item.avatar ? item.avatar : 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 type="plain" @on-click="cancelDonate">取消</my-button>
        </div>
        <div class="donate-imd">
          <my-button type="primary" @on-click="donateBook">立即捐赠</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, Dialog } 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) => {
  // 如果没有默认儿童需要用户确认一次
  if (v && !props.item.perf_id) {
    Dialog.confirm({
      title: '温馨提示',
      message: '默认儿童为空, 是否继续捐书!',
      confirmButtonColor: '#713610'
    })
      .then(() => {
        show.value = v;
        // DOM调整后，把弹出框高度设定到适合高度，配合不同分辨率效果
        nextTick(() => {
          let height = $('.donate-wrapper').height();
          popupHeight.value = height + 10 + 'px';
        })
      })
      .catch(() => {
        // 取消按钮回调
        closeBtn();
      });
    return false;
  }
  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();
}

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>