<template>
  <div class=" editor">
    <p class=" text-2xl font-bold mb-5">发布资讯</p>
    <div class=" flex content-between justify-between">
      <!-- 标题 -->
      <a-input v-model="title" placeholder="请输入标题" style="width: 40%"/>
      <!-- 作者 -->
      <a-input v-model="author" placeholder="请输入作者名称" style="width: 35%" />
      <!-- 文章分类 -->
      <a-select style="width: 20%" v-model="type" placeholder="请选择资讯分类"> 
        <a-select-option v-for="item in articalType" :key="item.value">{{item.label}}</a-select-option>
      </a-select>
    </div>
    <!-- 上传概要图片 -->
    <editor-upload class=" mt-5" :path="imageUrl" @getFileHash="getImage" />
    <!-- 文章概要 -->
    <a-textarea v-model="summary" :maxLength="50" placeholder="请输入文章概要，字数限制50字以内" auto-size />
    <!-- 编辑器 -->
    <editor class="edit-news text-left mt-5" :text="editableContent" :editorContent.sync="content"
            @getContent="getContent"/>
    <!-- 发布操作 -->
    <a-button type="primary" @click="onSubmit" class=" mt-5">确定发布</a-button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Editor from '@/components/Editor/index.vue'
import EditorUpload from '@/components/Editor/editorUpload.vue'
import News from '@/service/News/index'
import FileService from "@/service/FileService/index";
import { message } from 'ant-design-vue';

const news = new News()

export default Vue.extend({
  components:{ Editor,EditorUpload },
  props:{
    articalType:{
      type:Array,
      default(){
        return [{
          label: '新闻',
          value: 2
        }, {
          label: '政策',
          value: 1
        }]
      }
    }
  },
  data(){
    return{
      title:'',
      author:'',
      type: undefined as number|any,
      imgUrl: '',
      imageUrl: '',
      summary:'',
      content:'',
      editableContent: '',
    }
  },
  created() {
    this.getDetails()
  },
  methods:{
    getDetails() {
      if (Object.keys(this.$route.query).length === 0) {
        this.type = undefined
        return
      }
      const type = this.$route.query.type
      const id = this.$route.query.key as string
      this.type = +type
      if (+type === 1) {
        news.searchPolicy(id).then(res => {
          this.initData(res.data)
        })
      } else {
        news.searchNews(id).then(res => {
          this.initData(res.data)
        })
      }
    },
    initData(res: any) {
      this.title = res.title
      this.author = res.writer
      this.imgUrl = res.file_name
      this.imageUrl = new FileService().getImageSrc(res.file_name)
      this.summary = res.desc
      this.editableContent = res.content
    },
    getContent(value:string){
      this.content = value
      console.log(value)
    },
    getImage(val: string) {
      this.imgUrl = val
    },
    addForm() {
      const params = {
        article_type: this.type,
        content: this.content,
        desc: this.summary,
        file_name: this.imgUrl,
        title: this.title,
        writer: this.author
      }
      news.addArticle(params).then(res => {
        if (res.code === 200) {
          message.success('新增成功')
          this.$router.push({ name: 'newsManage' })
        }
      })
    },
    editForm() {
      const params = {
        article_type: this.type,
        content: this.content,
        desc: this.summary,
        file_name: this.imgUrl,
        title: this.title,
        writer: this.author,
        uuid: this.$route.query.key as string
      }
      news.editArticle(params).then(res => {
        if (res.code === 200) {
          message.success('编辑成功')
          this.$router.push({ name: 'newsManage' })
        }
      })
    },
    onSubmit() {
      console.log(this.content)
      if (this.$route.query.key) {
        this.editForm()
      } else {
        this.addForm()
      }
    },
  }
})
</script>