<template>
  <div class="page-body">
    <q-card>
      <q-card-section>
        <div>
          <span class="text-h6" v-if="addMsg.Id > 0">修改</span>
          <span class="text-h6" v-if="addMsg.Id == 0">新增</span>
          <q-btn
            color="accent"
            style="float:right;"
            size="sm"
            class="q-mr-md"
            label="返回"
            @click="goback"
          ></q-btn>
        </div>
      </q-card-section>

      <q-card-section>
        <div
          class="row wrap scroll"
          style="width:100%;height:calc(100vh - 260px)"
        >
          <q-input
            class="col-12 q-mb-sm"
            clearable
            filled
            v-model="addMsg.Title"
            label="标题"
            maxlength="50"
            ref="title"
            :rules="[val => !!val || '请输入标题']"
          />
          <q-input
            class="col-12 q-mb-sm"
            clearable
            filled
            v-model="addMsg.LinkUrl"
            label="链接"
            ref="link"
            maxlength="1000"
          />
          <q-input
            class="col-12 q-mb-sm"
            clearable
            filled
            v-model="addMsg.Digest"
            label="摘要"
            type="textarea"
            maxlength="50"
          />
          <div class="col-12 q-mb-sm">
            <q-uploader
              :style="{ backgroundImage: 'url(' + addMsg.Img + ')' }"
              style="width:auto;height:500px;background-repeat:no-repeat;background-size:cover; border:1px solid #eee"
              flat
              hide-upload-btn
              max-files="1"
              label="封面图"
              accept=".jpg, image/*"
              :factory="uploadFile"
              auto-upload
            >
            </q-uploader>
          </div>
          <div class="col-12">
            <div class="q-mb-sm">内容</div>
            <div class="col-12">
              <Ueditor
                :value="ueditor.value"
                :config="ueditor.config"
                @input="setVal"
                ref="ue"
                no-margin
                :isShowInsertImage="false"
                :isShowAttachment="false"
                :isShowVoice="false"
              ></Ueditor>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn
          label="保存"
          color="accent q-px-md"
          style="font-weight:400 !important"
          @click="saveData"
        />
      </q-card-actions>
    </q-card>
  </div>
</template>
<script>
import {
  setLearningGarden,
  getLearningGarden
} from "../../../api/OfficialAccounts/index";
import { UploadSelfFile } from "../../../api/common/common";
import Ueditor from "../../../components/editor/UeEditor";
export default {
  model: {
    prop: "persistent",
    event: "input"
  },
  props: {
    saveObj: {
      type: Object,
      default: () => {
        return {};
      }
    },
    persistent: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Ueditor
  },
  data() {
    return {
      defaultProps: {
        children: "SubList",
        label: "Name"
      },
      addMsg: {
        Id: 0,
        Title: "",
        Img: "",
        Content: "",
        Digest: "",
        LinkUrl: ""
      },
      //富文本
      ueditor: {
        value: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 100,
          autoHeightEnabled: true,
          enableContextMenu: false
        }
      }
    };
  },
  mounted() {
    if (this.$route.query.Id && this.$route.query.Id > 0) {
      this.addMsg.Id = this.$route.query.Id;
      this.getDetail(this.addMsg.Id);
    } else {
      this.addMsg.Id = 0;
      this.init(null);
    }
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    getDetail(id) {
      getLearningGarden({ Id: id }).then(res => {
        this.init(res.Data);
      });
    },
    init(val) {
      if (val && val.Id > 0) {
        this.addMsg.Id = val.Id;
        this.addMsg.Img = val.Img;
        this.addMsg.LinkUrl = val.LinkUrl;
        this.addMsg.Digest = val.Digest;
        this.addMsg.Title = val.Title;
        this.addMsg.Content = val.Content;
        this.setVal(this.addMsg.Content);
      } else {
        this.addMsg.Id = 0;
        this.addMsg.LinkUrl = "";
        this.addMsg.Img = "";
        this.addMsg.Digest = "";
        this.addMsg.Title = "";
        this.addMsg.Content = "";
        this.setVal("");
      }
    },
    toggleDig(val) {
      this.$emit("input", val);
    },
    uploadFile(files) {
      UploadSelfFile("course", files[0], res => {
        if (res.Code == 1) {
          this.addMsg.Img = res.FileUrl;
        }
      });
    },
    //   富文本
    setVal(val) {
      this.addMsg.Content = val;
      this.ueditor.value = val;
    },
    saveData() {
      this.$refs.title.validate();
      if (!this.$refs.title.hasError) {
        setLearningGarden(this.addMsg).then(res => {
          if (res.Code == 1) {
            this.Success(res.Message);
            this.goback();
          }
        });
      }
    }
  }
};
</script>
<style lang="sass">
@import url('~assets/css/table.sass')
</style>
