<template>
  <!-- 购买优惠码 -->
  <div class="discountCodePage flex-col">
    <s-header :name="'购买优惠码'" :noback="false"></s-header>
    <div class="discountCodeBox flex-col">
      <van-form @submit="onSubmit">
        <van-field
          v-model="number"
          name="number"
          label="优惠码个数"
          :placeholder="'请输入优惠码个数'"
        >
          <template #button>
            <span>单次生成不能超过200个</span>
          </template>
        </van-field>
        <van-field
          v-model="month"
          name="number"
          label="有效期"
          :placeholder="'请输入有效期'"
        >
          <template #button>
            <span>个月<span>(不超过3个月)</span></span>
          </template>
        </van-field>
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label"><span>类型</span></div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="type" direction="horizontal">
              <van-radio name="1" icon-size="18px">抵扣卷</van-radio>
              <van-radio name="0" icon-size="18px">打折</van-radio>
            </van-radio-group>
          </div>
        </div>
        <van-field
          v-if='type === "1"'
          v-model="discount"
          name="number"
          label="抵扣价格"
          :placeholder="'请输入抵扣价格'"
        >
        </van-field>
        <van-field
          v-if='type === "0"'
          v-model="discount"
          name="number"
          label=""
          :placeholder="'输入数字'"
        >
          <template #button>
            <span>0-10</span>
          </template>
        </van-field>
        <div class="van-cell van-field" v-if='type === "0" && discount === "0"'>
          <div class="van-cell__title van-field__label"><span>支付方式</span></div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="frpCode" direction="horizontal">
              <van-radio name="WEIXIN_NATIVE" icon-size="18px">微信</van-radio>
              <van-radio name="ALIPAY_NATIVE" icon-size="18px">支付宝</van-radio>
            </van-radio-group>
          </div>
        </div>
        <van-row justify="space-around" style="padding: 1em;">
          <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">进行支付</van-button>
        </van-row>
      </van-form>
    </div>
    <nav-bar></nav-bar>
    <van-popup v-model:show="payCodeType" round class="payCodePopup" @close="payCodeClose">
      <div style="text-align: center; font-size: 14px; padding: 1em; line-height: 1.8;">
        <div>price: {{ewmObj.price}}</div>
        <div>sn: {{ewmObj.sn}}</div>
        <img :src="ewmObj.image"/>
      </div>
    </van-popup>
  </div>
</template>

<script>
import navBar from "@/components/NavBar";
import sHeader from "@/components/SimpleHeader";
import { onMounted, reactive, toRefs, ref } from "vue";
import { getLoginUser } from "@/common/js/utils";
import { Toast } from "vant";
import { addCode } from "@/service/discountCode";
import { useRouter } from "vue-router";

export default {
  name: "payCode",
  components: { sHeader, navBar },
  setup() {
    const router = useRouter();
    let payParams = reactive({
      number: '', // 优惠码个数
      month: '', // 有效期
      type: '1', // 优惠卷类型
      discount: '', // 折扣
      frpCode: 'WEIXIN_NATIVE', // 支付方式
    });
    const payCodeType = ref(false);
    const ewmObj = ref(null);

    // 初始化页面
    onMounted(async () => {
      payCodeType.value = false;
      payParams.number = '';
      payParams.month = '';
      payParams.type = '1';
      payParams.discount = '';
      payParams.frpCode = 'WEIXIN_NATIVE';
      const user = getLoginUser();
      if (user) { payParams.adminId = user.id; }
    });
  
    // 提交搜索表单触发搜索
    const onSubmit = async () => {
      if (payParams.number === '') { Toast.fail('请输入优惠码个数'); return; }
      if (payParams.month === '') { Toast.fail('请输入有效期'); return; }
      if (payParams.type === '1' && payParams.discount === '') { Toast.fail('请输入抵扣价格'); return; }
      if (payParams.type === '0' && payParams.discount === '') { Toast.fail('请输入折扣'); return; }
      if (parseInt(payParams.number) > 200) { Toast.fail('优惠码个数不能超过200'); return; }
      if (parseInt(payParams.month) > 3) { Toast.fail('有效期不能超过3个月'); return; }
      if (payParams.type === '0' && parseInt(payParams.discount) > 10) { Toast.fail('折扣不能大于10'); return; }
      const { data } = await addCode( Object.assign({}, payParams) );
      if (payParams.type === '0') {
        ewmObj.value = data.data;
        payCodeType.value = true;
      } else {
        if (data.code === '00000') {
          Toast.success('生产优惠码成功');
          router.push({ path: '/discountCode' });
        } else {
          Toast.fail(data.message);
        }
      }
    }
    const payCodeClose = () => { router.push({ path: '/discountCode' }); }
    return {
      ...toRefs(payParams),
      payCodeType,
      ewmObj,
      onSubmit,
      payCodeClose
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./index.less";
</style>
