<template>
  <div class="editor">
    <p class="text-2xl font-bold mb-5">新增活动</p>
    <a-form-model :model="form" :rules="rules" ref="activityPublishForm">
      <a-form-model-item prop="title">
        <a-input v-model="form.title" placeholder="请输入标题" />
      </a-form-model-item>
      <!-- 上传概要图片 -->
      <a-form-model-item prop="file_hash" ref="timeUploader" :autoLink="false">
        <editor-upload @getFileHash="getFileHash" :path="file_src" />
      </a-form-model-item>
      <!-- 编辑器 -->
      <a-form-model-item prop="content" ref="editor" :autoLink="false">
        <editor
          class="edit-news text-left"
          @getContent="getContent"
          :editorContent.sync="form.content"
          :text="form.editableContent"
        />
      </a-form-model-item>
      <!-- 新增操作 -->
      <a-button type="primary" @click="onSubmit" class="mt-5"
        >确定</a-button
      >
    </a-form-model>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Editor from "@/components/Editor/index.vue";
import EditorUpload from "@/components/Editor/editorUpload.vue";
import ActivityService from "@/service/ActivityService/index";
import { message, FormModel } from "ant-design-vue";
import { eActivityItem } from "@/service/ActivityService/type";
import FileService from "@/service/FileService/index";

export default Vue.extend({
  components: { Editor, EditorUpload },
  computed:{
    disabled(){
      let result=true
      const {title,content,file_hash} = this.form
      if(title&&content&&file_hash){
        result = false
      }
      return result
    }
  },
  data() {
    return {
      form: {
        title: "",
        content: "",
        file_hash: "",
        editableContent: "",
      },
      rules: {
        title: [{ required: true, message: "请输入活动标题", trigger: "blur" }],
        content: [
          { required: true, message: "请输入活动内容", trigger: "blur" },
        ],
        file_hash: [
          { required: true, message: "请上传概要图片", trigger: "blur" },
        ],
      },
      uuid: "",
      isEditable: false,
      file_src: "",
    };
  },
  mounted() {
    this.isEditable = this.$route.name == "editActivity" ? true : false;
    if (this.$route.query.record) {
      const items: eActivityItem = JSON.parse(
        this.$route.query.record as string
      );
      this.form.title = items.title;
      this.form.editableContent = items.content;
      console.log(items.content);
      
      this.form.file_hash = items.file_name;
      this.uuid = items.uuid;
      if (this.form.file_hash) {
        this.file_src = FileService.getInstance().getImageSrc(
          this.form.file_hash
        );
      }
    }
  },
  methods: {
    getContent(value: string) {
      this.form.content = value;
      (this.$refs.editor as any).onFieldBlur();
    },
    getFileHash(value: string) {
      this.form.file_hash = value;
      (this.$refs.timeUploader as any).onFieldBlur();
    },
    isValid(): boolean {
      let isValid = false;
      (this.$refs.activityPublishForm as FormModel).validate((valid) => {
        if (valid) {
          isValid = true;
        } else {
          isValid = false;
        }
      });
      return isValid;
    },
    async onSubmit() {
      if (this.isValid()) {
        if (this.isEditable) {
          const ret = await ActivityService.getInstance().modifyActivity({
            title: this.form.title,
            content: this.form.content,
            file_name: this.form.file_hash,
            uuid: this.uuid,
          });
          if (ret.code == 200) {
            message.success("编辑成功");
            this.$router.push({ name: "activity" });
          } else {
            return;
          }
        } else {
          const ret = await ActivityService.getInstance().addActivity({
            title: this.form.title,
            content: this.form.content,
            file_name: this.form.file_hash,
          });
          console.log(ret);
          if (ret.code == 200) {
            message.success("新增成功");
            this.$router.push({ name: "activity" });
          } else {
            return;
          }
        }
      } else {
        return;
      }
    },
  },
});
</script>

<style lang="scss">
</style>