<!--
 * @Author: Jenkins
 * @Date: 2020-12-02 14:49:10
 * @LastEditTime: 2020-12-03 16:16:11
 * @LastEditors: Please set LastEditors
 * @Description: 创建新闻
 * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\newsCategory\newsCreator\index.vue
-->
<template>
  <div id='newsCreator'>
    <div class="top">
        <div class="title" @click="$parent.componentName='nebulaDynamics'">
            <img src="/static/images/return.png"/>
            返回上一页
        </div>
    </div>
    <div class="form">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="*资讯标题">
                <el-col :span="12">
                    <el-input v-model="form.title" placeholder="请输入资讯标题"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="*封面图">
                <singleImageX :value="form.coverImg" @input="onPreview"></singleImageX>
            </el-form-item>
            <el-form-item label="*资讯简介">
                <el-col :span="12">
                    <el-input v-model="form.introduce" placeholder="请输入资讯简介"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="*资讯类型">
                <el-col :span="8">
                    <el-select v-model="form.region" placeholder="请选择选择资讯类型">
                        <el-option label="类型一" value="type1"></el-option>
                        <el-option label="类型二" value="type2"></el-option>
                    </el-select> 
                </el-col>
            </el-form-item>
            <el-form-item label="*资讯详情">
                <el-col :span="20">
                    <Kind-editor  ref="kindeditor" :html="form.html" @input="getContent"></Kind-editor>
                </el-col>
            </el-form-item>
            <el-form-item label="*排序">
                <el-col :span="12">
                    <el-input v-model="form.sort" placeholder="请输入序号"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button @click="$parent.componentName='nebulaDynamics'">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>
import singleImageX from '@/components/Upload/singleImageX';
import KindEditor from "@/components/Kindeditor";
export default {
  name: 'newsCreator',
  components: {
      singleImageX,
      KindEditor
  },
  data(){
    return {
        form: {
          title: '',
          coverImg: '',
          introduce: '',
          region: '',
          sort: '',
          content: '',
          html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
        },
    }
  },
  mounted() {

  },
  methods: {
    // 获取编辑器内容
    getContent(content) {
        this.form.content = content
    },
    // 编辑器内容转换成在线url
    async getcontent2Url() {
        try {
            const htmlUrl =  await this.$refs.kindeditor.content2Url()
            return htmlUrl
        } catch (error) {
            console.log(error)
        }
    },
    onPreview(url){   
        this.form.coverImg = url
    },
    onSubmit() {
        console.log('submit!');
    }
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    #newsCreator{
        margin: 0 1% 0 1%;
        width: 98%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        color: #5178F2;
        .top{
            width: 100%;
            height: 68px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            border-bottom: 1px solid #EEEEEE;
            .title{ 
                width: auto;
                margin: 0 0 0 30px;
                height: 46px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                color: #5178F2;
                overflow: hidden;
                cursor: pointer;
            }
        }
        .form{
            padding: 30px 60px;
            width: calc(100% - 30px);
            height: calc(100% - 68px - 60px);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            color: #5178F2;
        }
    }
</style>