<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2022-05-31 22:09:58
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-02-08 13:45:09
 * @FilePath: /tswj/src/components/DonateFlower/index.vue
 * @Description: 捐花组件
-->
<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 defaultOptions" :key="index" span="8">
            <div :class="['base-item', donate_number === +index ? 'checked-item' : 'uncheck-item']"
              @click="selectDonate(+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 v-if="more_donate">
          <van-col span="18" style="text-align: right;">
            <van-field v-model="donate_number" style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" type="digit"
              input-align="center" label="" placeholder="请输入花花数量" />
          </van-col>
          <van-col span="6" style="line-height: 2.5;">&nbsp;朵花花</van-col>
        </van-row>
        <div v-else style="border: 1px solid #11D2B1; padding: 0.4rem 1rem;" @click="more_donate = true">更多花花</div>
      </div>
      <div v-if="item.kg_id" class="donate-name">
        <van-row>
          <van-col span="4" style="line-height: 2;">幼儿园</van-col>
          <van-col span="18">
            <div class="donate-text">{{ item.kg_name }}</div>
          </van-col>
        </van-row>
      </div>
      <div v-if="item.perf_id" class="donate-name">
        <van-row>
          <van-col span="4" style="line-height: 2;">助力人</van-col>
          <van-col span="18">
            <div class="donate-text">{{ item.perf_name }}</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.donate_name" type="text" style="border: 0; padding: 0.25rem;">
          </van-col>
        </van-row>
      </div>
      <van-row class="agree-wrapper">
        <van-col span="12" offset="8">
          <div class="agree-content">
            <div class="btn">
              <van-checkbox v-model="agreed" checked-color="#ee0a24">同意&nbsp;</van-checkbox>
            </div>
            <div class="text">
              <span @click="showDA=true">捐赠协议</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="donateFlower">确定</my-button>
        </div>
      </div>
    </div>
  </van-popup>
  <div class="popup-wrapper">
    <van-popup v-model:show="showDA" position="bottom" :style="{ height: '100%', zIndex: 4000 }">
      <agreement />
      <div class="bottom-btn" @click="showDA=false">
        <div class="text">关闭</div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { icon_flower } from '@/utils/generateIcons'
import MyButton from '@/components/MyButton/index.vue'
import agreement from './agreement.vue'
import { ref, watch, nextTick } from 'vue'
import { $, Toast } from '@/utils/generatePackage'
import { addDonateAPI } from '@/api/C/donate.js'
// import { wxJsAPI } from '@/api/wx/config'
// import { wxPayAPI } from '@/api/wx/pay'
// import wx from 'weixin-js-sdk'

const props = defineProps({
  item: Object,
  showPopup: Boolean
})
const emit = defineEmits(['on-close']);

let donate_number = ref(1);
const donateFlower = () => {
  if (!agreed.value) {
    Toast.fail('请先查看捐赠协议，勾选同意！');
    return false;
  }
  if (!props.item.donate_name) {
    Toast.fail('捐赠人姓名不能为空！');
    return false;
  }
  // 业务逻辑调整，有值就传值显示
  let params = {
    qty: donate_number.value,
    donate_name: props.item.donate_name,
    perf_id: props.item.perf_id,
    kg_id: props.item.kg_id,
  };
  addDonate(params);
}

const addDonate = async (params) => {
  const { data } = await addDonateAPI(params);
  if (data.id) {
    closeBtn();
    // TAG: 微信支付
    wechatPay(data.id);
  }
}

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

// TAG: 微信支付
const wechatPay = (id) => {
  const base = 'http://voice.onwall.cn/WxpayAPI/voice_pay/jsapi_voice.php'
  location.href = `${base}?i=${id}`
}

const more_donate = ref(false);
// 选择捐赠数量
const selectDonate = (index) => {
  donate_number.value = index
  more_donate.value = false
}
const defaultOptions = ref({
  1: '1朵花花',
  3: '3朵花花',
  5: '5朵花花',
});
// 捐赠协议
const agreed = ref(false);
// 显示捐赠协议弹框
const showDA = ref(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;
      padding: 0.5rem 0;
    }

    .checked-item {
      color: @base-font-color;
      background: @base-color;
      border-radius: 3px;
      border: 1px solid @base-color;
    }

    .uncheck-item {
      color: @base-color;
      background: @base-font-color;
      border-radius: 3px;
      border: 1px solid @base-color;
    }
  }

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

  .agree-wrapper {
    margin: 1rem 0;

    .agree-content {
      display: flex;
      align-items: center;
      box-sizing: content-box;

      .btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;

        span {
          text-decoration: underline;
          color: #11D2B1;
        }
      }
    }
  }

  .donate-number {
    padding: 1rem;
    padding-top: 0;
    text-align: center;
    color: #11D2B1;
  }

  .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: fixed;
  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: @base-font-color;
    background-color: @base-color;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  }
}

.popup-wrapper {
  .agreementHtml {
    padding: 1rem;
  }
}
</style>