<template>
  <div>
    <el-dialog title="会员卡设置" v-model="dialogVisible">
      <div>
        <el-form ref="formRef" :model="form" label-width="120px">
          <el-form-item
            label="会员卡名称"
            :rules="[
              {
                required: true,
                message: '请输入会员卡名称',
                trigger: 'blur'
              }
            ]"
            prop="name"
          >
            <el-input
              v-model="form.name"
              placeholder="请输入会员卡名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="副标题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="请输入副标题"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="有效期"
            :rules="[
              {
                required: true,
                message: '请输入有效期天数',
                trigger: 'blur'
              }
            ]"
            prop="lifespan"
          >
            <el-input
              v-model="form.lifespan"
              placeholder="请输入天数"
              clearable
            >
              <template #suffix>
                <span>天</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="价格"
            :rules="[
              {
                required: true,
                message: '请输入价格',
                trigger: 'blur'
              }
            ]"
            prop="price"
          >
            <el-input v-model="form.price" placeholder="请输入价格" clearable>
              <template #suffix>
                <span>元</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="备注信息" prop="remark">
            <el-input
              v-model="form.remark"
              placeholder="请输入备注信息"
              type="textarea"
              clearable
            />
          </el-form-item>
          <el-form-item label="会员权益" prop="content">
            <Editor v-model:value="form.content" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import Editor from "@/components/Editor.vue";
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:show", "success"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      if (props.rowData?.id) {
        const { name, lifespan, price, remark, content, id, title } =
          props.rowData;
        form.id = id;
        form.name = name;
        form.lifespan = lifespan;
        form.price = price / 100;
        form.remark = remark;
        form.content = content;
        form.title = title;
        console.log("form", form);
      } else {
        form.id = undefined;
        form.name = "";
        form.lifespan = "";
        form.price = undefined;
        form.remark = "";
        form.content = "";
        form.title = "";
      }
    } else {
      formRef.value.resetFields();
    }
  }
);

const formRef = ref();
const form = reactive({
  id: undefined,
  name: "",
  lifespan: "",
  title: "",
  price: undefined,
  remark: "",
  content: ""
});
const onSubmit = () => {
  formRef.value.validate(valid => {
    if (!valid) return;
    request
      .post(
        `walletService/mechanism/membershipCard${form.id ? "/update" : ""}`,
        {
          ...form,
          price: Number(form.price) * 100,
          lifespan: Number(form.lifespan)
        }
      )
      .then(resp => {
        ElMessage.success(resp.message);
        dialogVisible.value = false;
        emits("success");
      });
  });
};
</script>
