<!--
 * @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="是否热门">
          <el-col :span="8">
            <el-radio-group v-model="form.isHot">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </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: "",
        isHot: 2,
      },
      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;
      this.form.isHot = this.$parent.info.isHot;
    }
  },
  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: this.form.isHot,
            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: this.form.isHot,
            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>
