<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2022-05-31 22:09:58
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-06-02 19:21:18
 * @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 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" integer input-width="40px" button-size="32px" />
          </van-col>
        </van-row>
      </div>
      <div v-if="userType === 'C' || userType === 'K'" 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="userType === 'C'" 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 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="handleDA">捐赠协议</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>
  <!-- TODO: 正式文案需要更新 -->
  <van-popup v-model:show="showDA" position="bottom" :style="{ height: '100%', zIndex: 4000 }">
    <div v-html="agreementHtml"></div>
    <div class="bottom-btn" @click="closeDA">
      <div class="text">关闭</div>
    </div>
  </van-popup>
</template>

<script setup>
import { icon_flower } from '@/utils/generateIcons'
import MyButton from '@/components/MyButton/index.vue'
import { ref, onMounted, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { $, Toast } from '@/utils/generatePackage'
import { addDonateAPI } from '@/api/C/donate.js'
import agreementHtml from './agreement'

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

let donate_number = ref(1);
const donateFlower = async () => {
  if (!agreed.value) {
    Toast.fail('请选勾选同意按钮！');
    return false;
  }
  // 捐钱接口
  // 根据类型过滤提交数据
  // C 儿童: 提交 perf_id,kg_id
  // K 幼儿园: 提交 kg_id
  // V 访客: 不提交 perf_id,kg_id
  let params = {
    qty: donate_number.value, 
    donate_name: props.item.donate_name,
  };
  if (props.donateType === 'C') { // 助力TA
    params.perf_id = props.item.perf_id;
    params.kg_id = props.item.kg_id;
  } else if (props.donateType === 'K') {
    params.kg_id = props.item.kg_id;
  }
  const { data } = await addDonateAPI(params);
  if (data.id) {
    closeBtn();
    // 交易成功跳转回调页面
    // TEMP: 临时传参 donate_id
    $router.push({
      path: '/client/wechatpayCallback',
      query: {
        donate_id: 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();
}

// TODO: 微信支付

onMounted(() => {

})
// 选择捐赠数量
const checkList = ref({
  1: '1朵金花',
  2: '2朵金花',
  3: '3朵金花',
});
// 捐赠协议
const agreed = ref(false);
// 显示捐赠协议弹框
const showDA = ref(false);
const handleDA = () => {
  showDA.value = true
}
const closeDA = () => {
  showDA.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: 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: #713610;
    background-color: @base-color;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  }
}

</style>