<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="文章类型" v-if=" uploadUrl=='https://dppz.ctc.ac.cn/api'">
          <el-select v-model="Form.type" placeholder="文章类型" style="width:80%">
            <el-option
              v-for="item in typeOption"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </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 {getArticle, updateArticle} from "@/api/cms";

export default {
  name: 'TinymceDemo',
  components: { Tinymce },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API,
      Form:{
        title:'',
        ifrom:'',
        elink:'',
        content:''
      },
      typeOption: [
        { name: '技能大赛', value: 1 },
        { name: '铺装工匠', value: 2 },
        { name: '培训信息', value: 3 },
        { name: '大赛信息', value: 4 }
      ],
      submitLoding: false,
      rules: {
        title: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
        ifrom: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
      },
      is_show: true
    }
  },
  created() {
    this.Form.id = this.$route.query.id  //接收参数
    this.getArticle();
  },
  watch:{
    'Form.elink':'showEditor'
  },
  methods:{
    goBack() {
      this.$router.go(-1)
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // this.submitLoding = true
              updateArticle(this.Form.id, this.Form).then(response => {
                this.submitLoding = false
                if(response.code >= 200){
                this.$message({
                type: "success",
                message: "修改成功!"
                });
                this.goBack()
                }


              });
        } else {
          return false;
        }
      });
    },
    getArticle() {
      getArticle(this.Form.id).then(response => {
        this.Form = response.data ;
      });
    },
    showEditor(){
      if(this.Form.elink){
        this.Form.content = ''
        this.is_show = false
      }else{
        this.is_show = true
      }
    }
  }
}
</script>



