<!--
 * @Author: Jenkins
 * @Date: 2020-12-02 14:49:10
 * @LastEditTime: 2020-12-10 14:18: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'">
            <i class="el-icon-back"></i>
            <!-- <img src="/static/images/return.png"/> -->
            返回上一页
        </div>
    </div>
    <div class="form">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <el-form-item label="资讯标题" prop="title">
                <el-col :span="12">
                    <el-input v-model="form.title" placeholder="请输入资讯标题"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="封面图" prop="coverImg">
                <singleImageX :value="form.coverImg" @input="onPreview"></singleImageX>
            </el-form-item>
            <el-form-item label="资讯简介" prop="introduce">
                <el-col :span="12">
                    <el-input v-model="form.introduce" placeholder="请输入资讯简介"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="资讯类型" prop="region">
                <el-col :span="8">
                    <el-select v-model="form.region" placeholder="请选择选择资讯类型">
                        <el-option
                            v-for="item in types"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                        <!-- <el-option v-for="item in types" :key="item.key" :label="item.label" :value="item.key" v-show="types.length>0"></el-option> -->
                        <!-- <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="资讯详情" prop="content">
                <el-col :span="20">
                <kind-editor id="editor_id" :content.sync="form.content" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
                </el-col>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-col :span="12">
                    <el-input type="number" 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";
import {timestamp2Date} from '@/utils/dateUtils';
import {uuid} from "@/utils/uuid";// 导入请求
import {
  addUpdateNewsInfo,
} from "@/api/website/newsCategory/index";
export default {
  name: 'newsCreator',
  components: {
      singleImageX,
      KindEditor
  },
  data(){
    return {
        types: [],
        form: {
          id: '',
          title: '',
          coverImg: '',
          introduce: '',
          region: '',
          sort: '',
          content: '',
        },
        rules:{  
            title: [{ required: true, message: '请输入资讯标题', trigger: 'blur' }],
            coverImg: [{ required: true, message: '请上传封面图', trigger: 'blur' }],
            introduce: [{ required: true, message: '请输入资讯简介', trigger: 'blur' }],
            region: [{ required: true, message: '请选择选择资讯类型', trigger: 'blur' }],
            content: [{ required: true, message: '请输入资讯详情', trigger: 'blur' }],
            sort: [{ required: true, message: '请输入序号', trigger: 'blur' }],
        },
    }
  },
  mounted() {
    this.types = []
    this.$parent.regions.forEach(element => {
        if(element.status==1){
            this.types.push({
                value: element.id,
                label: element.nameCn,
            })
        }
    });
    if(this.$parent.info!=null){
        this.form.id = this.$parent.info.id
        this.form.title = this.$parent.info.title
        this.form.coverImg = this.$parent.info.icon.url
        this.form.introduce = this.$parent.info.introduce
        this.form.region = this.$parent.info.typeId
        this.form.sort = this.$parent.info.sort
        this.form.content = this.$parent.info.content
    }
  },
  methods: {
    onContentChange (val) {
      console.log(val)
    },
    afterChange () {

    },
    onPreview(url){   
        this.form.coverImg = url
    },
    onSubmit() {
        if(this.form.title==""){
            this.$message.error('请输入资讯标题!!!');
        }else if(this.form.coverImg==""){
            this.$message.error('请输入上传封面图!!!');
        }else if(this.form.introduce==""){
            this.$message.error('请输入资讯简介!!!');
        }else if(this.form.region==""){
            this.$message.error('请选择选择资讯类型!!!');
        }else if(this.form.sort==""){
            this.$message.error('请输入序号!!!');
        }else if(this.form.content==""){
            this.$message.error('请输入资讯详情!!!');
        }else{
            let data,message
            if(this.$parent.info!=null){
                data = {
                    id: this.form.id,
                    title: this.form.title,
                    detail: this.form.introduce,
                    coverImg: this.form.coverImg,
                    content: this.form.content,
                    newsDate: timestamp2Date((new Date()).getTime()),
                    typeId: this.form.region,
                    isDel: 0,// 0为未被删除,1为已删除
                    status: 2, // 默认上传即为下架状态(1为上架2为下架)
                    indexShow: 1,
                    typeName: (this.types.find(ele => ele.value == this.form.region)).label,
                    isHot: "1",
                    rank: this.form.sort+"",
                }
                message = "修改成功!!!"
            }else{
                data = {
                    title: this.form.title,
                    detail: this.form.introduce,
                    coverImg: this.form.coverImg,
                    content: this.form.content,
                    newsDate: timestamp2Date((new Date()).getTime()),
                    typeId: this.form.region,
                    isDel: 0,// 0为未被删除,1为已删除
                    status: 2, // 默认上传即为下架状态(后端规定1为启用2为禁用)
                    indexShow: 1,
                    typeName: (this.types.find(ele => ele.value == this.form.region)).label,
                    isHot: "1",
                    rank: this.form.sort+"",
                }
                message = "创建成功!!!"
            }
            // 新增新闻资讯
            addUpdateNewsInfo(data).then((res) => {
              if(res.status==200){
                let _this = this
                this.$message({
                    message: message,
                    type: 'success',
                    duration: 2000,
                });
                setTimeout(()=>{
                    _this.$parent.componentName = "nebulaDynamics"
                    _this.$parent.info = null
                },2100);
              }
            });
        }
    }
  },
}
</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>