<script setup lang="tsx">
import { ref, reactive, PropType } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElRadioGroup,
  ElRadio,
  ElInput,
  FormInstance,
  ElDatePicker,
  ElMessage
} from 'element-plus'

import { formatTime} from '@/utils'

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null
  }
})

const coupon = ref({
  start_time: '',
  end_time: '',
  range_date: [],
  is_permanent: 0,
  total_count: 0,
  is_full_give: 0,
  cid: 0,
  full_reduction: 0,
  status: 1,
  is_give_subscribe: 0
})
const formRef = ref<FormInstance>()
const emits = defineEmits(['releaseCoupon'])
const btzero = (_rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请输入赠送优惠券的最低消费金额'))
  } else {
    callback()
  }
}
const btzeroASz = (_rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请输入发放张数'))
  } else if (!Number.isInteger(value)) {
    callback(new Error('请输入大于零的整数'))
   }
    else {
    callback()
  }
}
const rules = reactive({
  full_reduction: [{ validator: btzero, trigger: 'blur' }],
  total_count: [{ validator: btzeroASz, trigger: 'blur' }]
})

const save = async (elRef) => {
  await elRef.validate((valid, fields) => {
    if (valid) {
      console.log('submit!', valid)
      coupon.value.cid = props.currentRow.id
      emits('releaseCoupon', coupon.value)
    } else {
      for (const key in fields) {
        ElMessage.error(fields[key][0].message)
        return
      }
    }
  })
}
const rangeChange = (data) => {
  coupon.value.start_time = formatTime(data[0], 'yyyy-MM-dd HH:mm:ss')
  coupon.value.end_time = formatTime(data[1], 'yyyy-MM-dd HH:mm:ss')
}
</script>

<template>
  <ElForm label-width="100px" :rules="rules" ref="formRef" :model="coupon">
    <ElFormItem label="优惠券ID">
      <ElInput v-model="props.currentRow.id" disabled />
    </ElFormItem>
    <ElFormItem label="领取时间">
      <ElDatePicker
        v-model="coupon.range_date"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY/MM/DD ddd"
        time-format="hh:mm:ss"
        @change="rangeChange"
      />
      <div class="text-xs text-gray-400 mt-5px"> 不选择为永久有效</div>
    </ElFormItem>
    <ElFormItem label="是否限量">
      <ElRadioGroup v-model="coupon.is_permanent" class="ml-4">
        <ElRadio :label="0" size="large">否</ElRadio>
        <ElRadio :label="1" size="large">是</ElRadio>
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem label="发布数量" v-if="coupon.is_permanent == 1" prop="total_count">
      <ElInput type="number" v-model="coupon.total_count" placeholder="请输入发布数量" />
    </ElFormItem>
    <!-- 消费满赠 -->
    <ElFormItem label="消费满赠">
      <ElRadioGroup v-model="coupon.is_full_give" class="ml-4">
        <ElRadio :label="0" size="large">关闭</ElRadio>
        <ElRadio :label="1" size="large">开启</ElRadio>
      </ElRadioGroup>
    </ElFormItem>

    <ElFormItem label="满赠金额" v-if="coupon.is_full_give === 1" prop="full_reduction">
      <ElInput
        type="number"
        v-model="coupon.full_reduction"
        placeholder="请输入赠送优惠券的最低消费金额"
      />
    </ElFormItem>
    <!-- is_give_subscribe -->
    <ElFormItem label="首次关注赠送">
      <ElRadioGroup v-model="coupon.is_give_subscribe" class="ml-4">
        <ElRadio :label="0" size="large">否</ElRadio>
        <ElRadio :label="1" size="large">是</ElRadio>
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem label="状态">
      <ElRadioGroup v-model="coupon.status" class="ml-4">
        <ElRadio :label="0" size="large">未开启</ElRadio>
        <ElRadio :label="1" size="large">正常</ElRadio>
        <ElRadio :label="-1" size="large">已失效</ElRadio>
      </ElRadioGroup>
    </ElFormItem>

    <div
      class="text-right border-gray-200 py-10px mt-10px position-sticky bottom-0 left-0 right-0 bg-white"
    >
      <BaseButton type="primary" @click="save(formRef)"> 保存 </BaseButton>
      <BaseButton> 取消 </BaseButton>
    </div>
  </ElForm>
</template>
