<template>
  <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: popupHeight, zIndex: 3000 }">
    <div class="donate-wrapper">
      <div class="donate-title">
        您所有捐助的爱心
        <van-icon :name="icon_flower" />
        都将用于多民族语言发展
      </div>
      <div class="shortcut-choose-wrapper">
        <van-row gutter="10">
          <van-col v-for="(v, index) in checkList" :key="index" span="8">
            <div :class="['base-item', donate_number === +index ? 'checked-item' : 'uncheck-item']" @click="donate_number = +index">
              {{ v }}
            </div>
          </van-col>
        </van-row>
      </div>
      <!-- <div style="background: #FFFFFF; border-radius: 3px; border: 1px solid #713610; padding: 0.5rem 1rem; margin: 0.5rem 1rem; text-align: center;">更多花花</div> -->
      <div class="donate-number">
        <van-row>
          <van-col span="12">&nbsp;花花数量 </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-name">
        <van-row>
          <van-col span="4" style="line-height: 2;">幼儿园</van-col>
          <van-col span="18">
            <div class="donate-text">杨浦民办科技幼稚园杨浦民办科技幼稚园</div>
          </van-col>
        </van-row>
      </div>
      <div class="donate-name">
        <van-row>
          <van-col span="4" style="line-height: 2;">助力人</van-col>
          <van-col span="18">
            <div class="donate-text">瑟日古娜</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>
      <van-row style="margin: 1rem 0;">
        <van-col span="12" offset="8">
          <div style="display: flex;align-items: center; box-sizing: content-box;">
            <div style="display: flex; flex-direction: column; justify-content: center;">
              <van-checkbox v-model="agreed" checked-color="#ee0a24">同意&nbsp;</van-checkbox>
            </div>
            <div style="display: flex; flex-direction: column; justify-content: center;">
              <span style="text-decoration: underline; color: #713610;" @click="handleDonationAgreement">捐赠协议</span>
            </div>
          </div>
        </van-col>
      </van-row>

      <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>
  <van-popup v-model:show="showDonationAgreement" position="bottom" :style="{ height: '100%', zIndex: 4000 }">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum voluptates architecto! Itaque magnam modi ducimus minima. Ullam quam, excepturi modi cupiditate quidem optio consequuntur minus porro, saepe, neque incidunt!
    <div class="bottom-btn" @click="closeDonationAgreement">
      <div class="text">关闭</div>
    </div>
  </van-popup>
</template>

<script setup>
import Cookies from 'js-cookie'
import { icon_flower } from '@/utils/generateIcons'

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('100%');

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

// TODO: 微信支付

onMounted(() => {

})
// 选择捐赠数量
const checkList = ref({
  1: '1朵金花',
  2: '2朵金花',
  3: '3朵金花',
});
// 捐赠协议
const agreed = ref(false);
// 显示捐赠协议弹框
const showDonationAgreement = ref(false);
const handleDonationAgreement = () => {
  showDonationAgreement.value = true
}
const closeDonationAgreement = () => {
  showDonationAgreement.value = false
}
</script>

<style lang="less" scoped>
.donate-wrapper {
  .donate-title {
    padding: 1rem 1rem 0 1rem; 
    color: #999999; 
    text-align: center;
  }
  .shortcut-choose-wrapper {
    padding: 1rem;

    .base-item {
      text-align: center;
      color: #713610;
      padding: 0.5rem 0;
    }

    .checked-item {
      background: #F9EA57;
      border-radius: 3px;
      border: 1px solid #F9EA57;
    }

    .uncheck-item {
      background: #FFFFFF;
      border-radius: 3px;
      border: 1px solid #713610;
    }
  }

  .donate-name {
    padding: 1rem;

    .donate-text {
      background: #F4F4F4; 
      border-radius: 3px;
      padding: 0.5rem; 
      margin-left: 5%; 
      width: 95%;
    }
    .donate-input {
      border: 1px solid #B9B9B9;
      border-radius: 5px;
      padding: 0.2rem;
      margin-left: 1rem;
    }
  }

  .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;
}

.bottom-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
  .text {
    text-align: center;
    padding: 0.7rem;
    margin: 0.8rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 24px;
    // border: 1px solid F7F7F7;
    color: #713610;
    background-color: @base-color;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  }
}
</style>