<template>
  <div class="remind-preview" v-loading="loading">
    <template v-if="detail">
      <el-form>
        <el-form-item label="提醒类型：">
          {{ detail.categoryName || "--" }}
        </el-form-item>
        <el-form-item label="提醒名称：">
          {{ detail.name || "--" }}
        </el-form-item>
        <el-form-item label="提醒内容：">
          {{ detail.remark || "--" }}
        </el-form-item>
      </el-form>
    </template>
  </div>
</template>
<script>
import { getRemindTemplateApi } from '@/api/hospital/remindManage/remindList'
export default {
  name: "RemindPreview",
  props: {
    id: {
      type: [String, Number],
    },
  },
  data() {
    return {
      detail: null,
      loading: false,
    };
  },
  watch: {
    id(val) {
      if (val) {
        this.loadDetail();
      }
    },
  },
  methods: {
    async loadDetail() {
      this.loading = true;
      try {
        const { data } = await getRemindTemplateApi(this.id);
        this.detail = data;
      } catch (err) {
        console.error(err);
      } finally {
        this.loading = false;
      }
    },
  },
  created() {
    this.loadDetail()
  }
};
</script>
<style lang="scss" scoped>
.remind-preview {
  width: 100%;
  height: 100%;
}
</style>
