<style scoped lang="scss">

</style>
<template>
  <div class="system-dialog-container">
    <el-dialog
        :title="state.dialog.title"
        v-model="state.dialog.isShowDialog"
        width="500px"
        draggable
        destroy-on-close
        :close-on-click-modal="false"
        align-center>
      <el-form
          :model="state.ruleForm"
          :rules="state.rules"
          label-position="top"
          ref="formRef"
          size="default">
        <el-form-item label="充值金额（元）" prop="rechargeAmountYuan">
          <el-input-number
              v-model="state.ruleForm.rechargeAmountYuan"
              placeholder="充值金额"
              :min="0"
              :step="10"
              style="width: 100%">
          </el-input-number>
        </el-form-item>
        <el-form-item label="赠款金额（元）" prop="grantsAmountYuan">
          <el-input-number
              v-model="state.ruleForm.grantsAmountYuan"
              placeholder="赠款金额（0表示不赠送）"
              :min="0"
              :step="5"
              style="width: 100%">
          </el-input-number>
        </el-form-item>
        <el-form-item label="标签" prop="label">
          <el-input
              v-model="state.ruleForm.label"
              placeholder="如：推荐、限时"
              clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="设为默认项" prop="isDefault">
          <el-switch
              v-model="state.ruleForm.isDefault"
              active-text="是"
              inactive-text="否">
          </el-switch>
          <span style="margin-left:8px;font-size:12px;color:#999;">每个分组仅一个默认项，小程序端将默认选中</span>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="ItemDialog">
import { reactive, ref } from 'vue';
import { Msg } from "/@/utils/message";
import { $body } from "/@/utils/request";
import u from '/@/utils/u'

const emit = defineEmits(['refresh']);
const formRef = ref();

const initState = () => ({
  ruleForm: {
    id: null as number | null,
    groupId: null as number | null,
    rechargeAmountYuan: 0,
    grantsAmountYuan: 0,
    label: '',
    isDefault: false,
  },
  btnLoading: false,
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  rules: {
    rechargeAmountYuan: [u.validator.required],
  },
})

const state = reactive(initState());

const open = (action: string = 'add', row: any) => {
  state.dialog.title = u.dialog.actions[action].title + "『配置项』"
  state.dialog.submitTxt = u.dialog.actions[action].btn + "『配置项』"
  state.dialog.isShowDialog = true;
  if (action !== 'add' && row) {
    state.ruleForm = {
      id: row.id,
      groupId: row.groupId,
      rechargeAmountYuan: (row.rechargeAmount || 0) / 100,
      grantsAmountYuan: (row.grantsAmount || 0) / 100,
      label: row.label || '',
      isDefault: !!row.isDefault,
    };
  } else if (row) {
    state.ruleForm.groupId = row.groupId;
  }
};

const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState());
};

const onCancel = () => {
  onClose();
};

const onSubmit = () => {
  formRef.value.validate((v: boolean) => {
    if (v) {
      state.btnLoading = true;
      const payload = {
        id: state.ruleForm.id,
        groupId: state.ruleForm.groupId,
        rechargeAmount: Math.round(state.ruleForm.rechargeAmountYuan * 100),
        grantsAmount: Math.round(state.ruleForm.grantsAmountYuan * 100),
        label: state.ruleForm.label || null,
        isDefault: state.ruleForm.isDefault,
      };
      const url = !!state.ruleForm.id ? "/rechargeConfig/item/modify" : "/rechargeConfig/item/add";
      $body(url, payload).then(() => {
        state.btnLoading = false;
        Msg.message('操作成功');
        onClose();
        emit('refresh');
      }).catch(() => {
        state.btnLoading = false;
        Msg.message('操作失败', 'error');
      });
    } else {
      Msg.message('请先完整填写表单', 'error');
    }
  });
};

defineExpose({ open });
</script>
