<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-tabs v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane :label="t('market.basicInformation')" name="first">
          <el-form-item :label="t('market.cardName')" prop="name">
            <el-input v-model="formData.name" :placeholder="t('market.pleaseEnterTheNameOfTheMembershipCard')" />
          </el-form-item>
          <el-form-item :label="t('market.cardStyle')" prop="styleImg">
            <el-image v-for="(item,key) in cardbg"
             :key="key" 
             style="width: 100px; height: 60px;margin-right:10px;" 
             :src="item.img"
             @click="selectImg(item)"
             :class="{'checked':item.id == checkedid}" 
              />
          </el-form-item>
          <el-form-item :label="t('public.sort')" prop="sort">
            <el-input v-model="formData.sort" :placeholder="t('market.pleaseEnterTheOrder')" />
          </el-form-item>
          <el-form-item :label="t('market.discount')" prop="isDiscount">
            <el-radio-group v-model="formData.isDiscount">
              <el-radio :label="1">{{t('common.yes')}}</el-radio>
              <el-radio :label="0">{{ t('public.none') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="t('market.discountRatio')" prop="discount" v-show="formData.isDiscount == 1">
            <el-input v-model="formData.discount" :placeholder="t('market.pleaseEnterThePercentageOfDiscount')" />
          </el-form-item>
          <el-form-item :label="t('market.freeGiftWhenYouOpenTheCard')" prop="giveMethod">
              <el-checkbox :label="t('market.bonusPoints')" v-model="integral" />
              <el-checkbox :label="t('market.balance')" v-model="mony" />
          </el-form-item>
          <el-form-item :label="t('market.NumberBonusPoints')" prop="integral" v-show="integral">
            <el-input v-model="formData.integral" :placeholder="t('market.pleaseEnterTheNumberOfBonusPoints')" />
          </el-form-item>
          <el-form-item :label="t('market.bonusBalance')" prop="mony" v-show="mony">
            <el-input v-model="formData.mony" :placeholder="t('market.pleaseEnterTheBalanceOfTheGift')" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane :label="t('market.receiveConfiguration')" name="second">
          <el-form-item :label="t('market.validityPeriod')" prop="period">
            <el-input v-model="formData.period" :placeholder="t('market.pleaseEnterTheValidityPeriod')" />
            <el-text class="mx-1" type="warning">{{t('market.theValidityPeriodIsInMonths0MeansPermanent')}}</el-text>
          </el-form-item>
          <el-form-item :label="t('market.purchasePrice')" prop="price">
            <el-input v-model="formData.price" :placeholder="t('market.pleaseEnterThePurchasedPrice')" />
          </el-form-item>
          <el-form-item :label="t('public.status')" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :label="1">{{t('public.close')}}</el-radio>
              <el-radio :label="0">{{t('public.normal')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="t('market.rulesForUse')" prop="rule">
            <Editor v-model="formData.rule" height="150px" />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>  
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">{{t('common.confirm')}}</el-button>
      <el-button @click="dialogVisible = false">{{t('common.cancel')}}</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import * as VipCardApi from '@/api/market/vipCard'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  name: undefined,
  styleImg: undefined,
  sort: undefined,
  isDiscount: undefined,
  discount: undefined,
  igiveMethod: undefined,
  integral: undefined,
  coupon: undefined,
  mony: undefined,
  period: undefined,
  price: undefined,
  status: undefined,
  rule: undefined
})
const formRules = reactive({
  name: [{ required: true, message: t('market.cardNameCannotBeEmpty'), trigger: 'blur' }],
  styleImg: [{ required: true, message: t('market.cardStyleCannotBeEmpty'), trigger: 'blur' }],
  period: [{ required: true, message: t('market.expiryDateCannotBeEmpty'), trigger: 'blur' }],
  price: [{ required: true, message: t('market.purchasePriceCannotBeEmpty1'), trigger: 'blur' }],
  // rule: [{ required: true, message: '使用的规则不能为空', trigger: 'blur' }],
})
const activeName = ref('first')
let protocol = window.location.protocol;
let currentDomain = window.location.hostname;
console.log('protocol:',protocol);
console.log('currentDomain:',currentDomain);
const hostUrl = protocol + '//' + currentDomain
console.log('hostUrl:',hostUrl);
const cardbg = ref([
  {
    id: 1,
    img: hostUrl + '/card01.jpg'
  },
  {
    id: 2,
    img: hostUrl + '/card02.jpg'
  },
  {
    id: 3,
    img: hostUrl + '/card03.jpg'
  }
])
const checkedid = ref(0)
const integral = ref(false)
const mony = ref(false)


const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await VipCardApi.getVipCard(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as VipCardApi.VipCardVO
    if (formType.value === 'create') {
      await VipCardApi.createVipCard(data)
      message.success(t('common.createSuccess'))
    } else {
      await VipCardApi.updateVipCard(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const selectImg = (item) => {
  checkedid.value = item.id
  formData.value.styleImg = item.img
}



/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    name: undefined,
    styleImg: undefined,
    sort: 0,
    isDiscount: 0,
    discount: undefined,
    giveMethod: '',
    integral: undefined,
    coupon: undefined,
    mony: undefined,
    period: undefined,
    price: undefined,
    status: 0,
    rule: undefined
  }
  formRef.value?.resetFields()
}
</script>
<style scope>
.checked {
		border:solid;
    border-color:red;
	}
</style>
