<template>
  <div class="cmain">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="新闻标题" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入标题"
          disabled
        ></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="新闻类型" prop="type">
            <el-select
              v-model="form.type"
              placeholder="请选择"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in typeList"
                :key="item.value + 'typeList'"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新闻来源">
            <el-input
              v-model="form.source"
              placeholder="请输入来源"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="新闻封面">
        <el-image
          v-if="form.picture"
          :fit="'contain'"
          style="
            width: 20%;
            margin-top: 10px;
            border-radius: 5px;
            margin-bottom: -15px;
          "
          :z-index="50000"
          :src="this.baseUrl + form.picture"
        ></el-image>
        <!-- <cropper v-model="form.picture" :fixed_number="[4, 2]"></cropper> -->
      </el-form-item>
      <el-form-item label="新闻内容" prop="content">
        <div v-html="form.content"></div>
      </el-form-item>
    </el-form>
    <div class="mfooter">
      <el-button @click="$layer.close(layerid)">返回</el-button>
    </div>
  </div>
</template>
  
  <script>
import {
  listNEWS,
  getNEWS,
  delNEWS,
  addNEWS,
  updateNEWS,
  upload,
  setTop,
  newCommit,
  updateAndex,
  downloadpic,
} from "@/api/portal/news/NEWS.js";
export default {
  data() {
    return {
      typeList: [
        { label: "要闻动态", value: 1 },
        { label: "政策文件", value: 2 },
        { label: "通知公告", value: 3 },
        { label: "政策解读", value: 4 },
        { label: "投资导航", value: 5 },
      ],
      form: { type: 2 },
      rules: {
        title: [{ required: true, message: "标题", trigger: "blur" }],
        content: [{ required: true, message: "内容", trigger: "blur" }],
        fileUrl: [{ required: true, message: "附件", trigger: "blur" }],
        type: [{ required: true, message: "类型", trigger: "change" }],
        typeName: [
          { required: true, message: "字典类型名称", trigger: "blur" },
        ],
        picture: [{ required: true, message: "图片", trigger: "blur" }],
        status: [{ required: true, message: "状态", trigger: "blur" }],
      },
    };
  },
  props: {
    param: {
      type: Object,
      default: () => {
        return {};
      },
    },
    layerid: {
      type: String,
    },
  },
  mounted() {
    if (this.param.type) {
      this.form.type = parseInt(this.param.type);
    }
    if (this.param.id) {
      getNEWS(this.param.id).then((response) => {
        this.form = response.data;
        this.form.type = parseInt(this.form.type);
        this.form.content = response.data.content.replace(
          new RegExp("/profile/upload/", "g"),
          this.baseUrl + "/profile/upload/"
        );
      });
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateAndex(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$layer.close(this.layerid);
              this.$parent.getList();
            });
          } else {
            this.form.status = "1";
            addNEWS(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$layer.close(this.layerid);
              this.$parent.getList();
            });
          }
        }
      });
    },
  },
};
</script>
  