<template>
  <div class="main_box screen1" v-loading="loading">
    <el-form :model="articleModel" :rules="rules" ref="editor" label-width="100px">
      <el-form-item prop="CatalogId" label="分类" size="small">
        <el-select v-model="articleModel.CatalogId" placeholder="请选择">
           <el-option label="华连头条" :value="1"></el-option>
           <el-option label="优惠活动" :value="2"></el-option>
            <el-option label="常见问题" :value="3"></el-option>
           <el-option label="新手教程" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="Title" label="标题">
        <el-input placeholder="请填标题" v-model="articleModel.Title" size="small"></el-input>
      </el-form-item>
      <el-form-item prop="SubTitle" label="副标题">
        <el-input placeholder="请填副标题" v-model="articleModel.SubTitle" size="small"></el-input>
      </el-form-item>
      <el-form-item prop="Keyword" label="关键字">
        <el-input v-model="articleModel.Keyword" type="number" size="small"></el-input>
      </el-form-item>
      <el-form-item prop="AccessCount" label="访问人数">
        <el-input
          placeholder="请填访问人数："
          v-model="articleModel.AccessCount"
          type="number"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item prop="OnLine" label="发布状态">
        <el-switch
          v-model="articleModel.Publish"
          :active-value="1"
          :inactive-value="0"
          size="small"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div class="editor-container">
      <UE v-model="articleModel.Content" :config="config" ref="ue"></UE>
    </div>
    <div class="handel_box clr">
      <el-button @click="$router.go(-1)" size="small">取 消</el-button>
      <el-button type="primary" @click="save('editor')" size="small">确定</el-button>
    </div>
  </div>
</template>
<script>
let that;
export default {
  components: {},
  data() {
    return {
      articleModel: {
        Publish: 0,
        id: 0,
        Thumb: "",
        CatalogId:1,
      },
      loading: false,
      rules: {
        Title: [this.$vaild.required("标题")],
        SubTitle: [this.$vaild.required("副标题")]
        //  Banner: [this.$vaild.required("课程主图")],
        // Cover: [this.$vaild.required("课程封面")],
      },
      config: {
        serverUrl: this.$api.baseURL + "ueditor",
        UEDITOR_HOME_URL: "/static/ueditor/",
        autoHeightEnabled: false,
        initialFrameHeight: 500
      },
      options: []
    };
  },
  created() {
    this.$store.commit("setCurrentNav", "资讯管理>>添加资讯");
    var query = this.$route.query;
    if (query.optype == 2) {
      this.getInfo(query.id);
    }
  },
  methods: {
    getInfo(id) {
      this.$api.get("course/v1/article/Get", { id: id }).then(res => {
        this.articleModel = res.Data;
      });
    },
    save(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (that.$route.query.optype == "1") {
            that.add();
          } else if (that.$route.query.optype == "2") {
            that.edit();
          }
        }
      });
    },
    add() {
      this.$api.post("course/v1/article/post", this.articleModel).then(res => {
        this.$router.push({ name: "articlelist" });
      });
    },
    edit() {
      this.$api.post("course/v1/article/put", this.articleModel).then(res => {
        this.$router.push({ name: "articlelist" });
      });
    },
    upload(callback) {
      this.$api.upload("oss/v1/ImageCloud/upload").then(res => {
        callback && callback(res.Data);
      });
    },
    setCover(ret) {
      this.articleModel.Thumb = ret.Url;
    }
  }
};
</script>
<style scoped>
.el-form {
  width: 600px;
}
</style>
