<template>
  <div>
    <el-dialog title="健康建议模板" v-model="dialogVisible">
      <div>
        <el-form ref="formRef" :model="form" label-width="120px">
          <el-form-item
            label="标题："
            prop="title"
            :rules="[
              {
                required: true,
                message: '请输入模板标题',
                trigger: 'blur'
              }
            ]"
          >
            <el-input
              v-model="form.title"
              placeholder="请输入模板标题"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            label="适用范围："
            prop="scope"
            :rules="[
              {
                required: true,
                message: '请输入适用范围',
                trigger: 'blur'
              }
            ]"
          >
            <el-input
              v-model="form.scope"
              placeholder="请输入适用范围"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            label="内容："
            prop="content"
            :rules="[
              {
                required: true,
                message: '请输入内容',
                trigger: 'blur'
              }
            ]"
          >
            <Editor v-model:value="form.content"></Editor>
          </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 { request } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
import Editor from "@/components/Editor.vue";
import { nextTick } from "process";

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) {
        nextTick(() => {
          form.title = props.rowData.title;
          form.scope = props.rowData.scope;
          form.id = props.rowData.id;
          form.content = props.rowData.content;
        });
      }
    } else {
      formRef.value.resetFields();
      form.id = undefined;
    }
  }
);
const form = reactive({
  title: "",
  scope: "",
  content: "",
  id: undefined
});
const formRef = ref();

const onSubmit = () => {
  formRef.value.validate(valid => {
    if (!valid) return;
    let api = form.id
      ? "dataService/schemeManage/healthAdvise/update"
      : "dataService/schemeManage/healthAdvise";
    request.post(api, form).then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
      emits("success");
    });
  });
};
</script>
