<template>
  <div class="app-container">
    <div>
    <el-form
      :model="Form"
      :rules="rules"
      ref="Form"
      label-width="100px"
      status-icon
    >
      <el-form-item label="标题" prop="title">
    <el-input v-model="Form.title" style="width: 80%"></el-input>
  </el-form-item>
  <el-form-item label="来源" prop="ifrom">
    <el-input v-model="Form.ifrom" style="width: 80%"></el-input>
  </el-form-item>
  <el-form-item label="外部链接" prop="elink" >
    <el-input v-model="Form.elink" style="width: 80%"></el-input>
  </el-form-item>
  <el-form-item label="内容" prop="content" v-show="is_show">
      <tinymce v-model="Form.content" :height="400" width="80%"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">立即创建</el-button>
        <el-button type="warning" @click="goBack()">返回</el-button>
      </el-form-item>
          </el-form>
      
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import {createArticle} from "@/api/cms";

export default {
  name: 'TinymceDemo',
  components: { Tinymce },
  data() {
    return {
      Form:{
        title:'',
        ifrom:'',
        elink:'',
        content:''
      },
      submitLoding: false,
      rules: {
        title: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
        ifrom: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
      },
      is_show: true
    }
  },
  watch:{
    'Form.elink':'showEditor'
  },
  methods:{
    goBack() {
      this.$router.go(-1)
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // this.submitLoding = true
              createArticle(this.Form).then(response => {
                this.submitLoding = false
                if(response.code >= 200){
                this.$message({
                type: "success",
                message: "新建成功!"
                });
                this.goBack()
                }
                
                
              });
        } else {
          return false;
        }
      });
    },
    showEditor(){
      if(this.Form.elink){
        this.Form.content = ''
        this.is_show = false
      }else{
        this.is_show = true
      }
    }
  }
}
</script>



