<template>
  <!-- 购买优惠码 -->
  <div class="discountCodePage flex-col">
    <s-header :name="$t('discountCode.applDiscCode')" :noback="false"></s-header>
    <div class="discountCodeBox flex-col">
      <van-form @submit="onSubmit">
        <van-field
          v-model="number"
          name="number"
          :label="$t('discountCode.numberOfDiscountCodesLabel')"
          :placeholder="$t('discountCode.numberOfDiscountCodesPlaceholder')"
        >
          <template #button>
            <span>{{$t('discountCode.aSingleGenerationCannotExceed')}}</span>
          </template>
        </van-field>
        <van-field
          v-model="month"
          name="number"
          :label="$t('discountCode.termOfValidity')"
          :placeholder="$t('discountCode.pleaseEnterTheValidityPeriod')"
        >
          <template #button>
            <span>{{$t('discountCode.Months')}}<span>{{$t('discountCode.noMoreThanMonths')}}</span></span>
          </template>
        </van-field>
        <van-field
          readonly
          v-model="validDays"
          :label="$t('discountCode.validDays')"
          placeholder=""
        />
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label"><span>{{$t('discountCode.type')}}</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">{{$t('discountCode.deductionRoll')}}</van-radio>
              <van-radio name="0" icon-size="18px">{{$t('discountCode.discount2')}}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <van-field
          v-if='type === "1"'
          v-model="discount"
          name="number"
          :label="$t('discountCode.deductionPriceLabdel')"
          :placeholder="$t('discountCode.deductionPricePlaceholder')"
        >
        </van-field>
        <van-field
          v-if='type === "0"'
          v-model="discount"
          name="number"
          :label="$t('discountCode.discount')"
          :placeholder="$t('discountCode.enterNumber')"
        >
          <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>{{$t('discountCode.paymentMethod')}}</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">{{$t('discountCode.weChat')}}</van-radio>
              <van-radio name="ALIPAY_NATIVE" icon-size="18px">{{$t('discountCode.alipay')}}</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">{{$t('discountCode.apply')}}</van-button>
        </van-row>
      </van-form>
    </div>
    <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 sHeader from "@/components/SimpleHeader";
import { onMounted, reactive, toRefs, ref, watch } from "vue";
import { getLoginUser,$M_FormatCalcuDecial } from "@/common/js/utils";
import { Toast } from "vant";
import { addCode } from "@/service/discountCode";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

export default {
  name: "payCode",
  components: { sHeader },
  setup() {
    // 引入语言
    const {t} = useI18n();
    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(t('discountCode.numberOfDiscountCodesPlaceholder')); return; }
      if (payParams.month === '') { Toast.fail(t('discountCode.pleaseEnterTheValidityPeriod')); return; }
      if (payParams.type === '1' && payParams.discount === '') { Toast.fail(t('discountCode.deductionPricePlaceholder')); return; }
      if (payParams.type === '0' && payParams.discount === '') { Toast.fail(t('discountCode.pleaseEnterDiscount')); return; }
      if (parseInt(payParams.number) > 200) { Toast.fail(t('discountCode.theNumberOfDiscountCodesCannotExceed')); return; }
      if (parseInt(payParams.month) > 3) { Toast.fail(t('discountCode.theValidityPeriodCannotExceedMonths')); return; }
      if (payParams.type === '0' && parseInt(payParams.discount) > 10) { Toast.fail(t('discountCode.discountCannotBeGreaterThan')); 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(t('discountCode.successfulProductionOfDiscountCode'));
          router.push({ path: '/discountCode' });
        } else {
          Toast.fail(data.message);
        }
      }
    }
    const payCodeClose = () => { router.push({ path: '/discountCode' }); }
    // 有效天数
    const validDays = ref('0天');
    // 监听有效期，计算有效天数
    watch(()=>payParams.month,(newVal)=>{
      validDays.value = $M_FormatCalcuDecial(newVal,30)+'天';
    },{immediate:true,deep:true});
    return {
      ...toRefs(payParams),
      payCodeType,
      ewmObj,
      onSubmit,
      payCodeClose,
      validDays,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./index.less";
.discountCodePage {
  /deep/ .van-field__button{
    width: 150px;
  }
  .van-field{
	width:100%;
	display: flex;
	align-items: center;//上下对齐
	justify-content: space-between; 
  }
}
</style>
