<template>
  <div class="view">
    <el-form label-width="80px" class="l-form">
      <el-form-item label="封面图片">
        <el-upload
          class="cover-uploader"
          :action="root + '/system/upload'"
          :show-file-list="false"
          :on-success="handleCoverSuccess"
          :before-upload="handleCoverBefore"
          :style="{width: '100%', paddingTop: '60%'}">
          <div class="cover-content">
            <img v-if="coverUrl" :src="coverUrl" class="cover">
            <template v-else class="cover-content">
              <i class="el-icon-plus cover-uploader-icon"></i>
              <p>点击上传案例封面图片（限5M）<br> 支持格式为jpg/png</p>
            </template>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="标签">
        <el-input v-model="label" placeholder="输入案例标签"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="sort" placeholder="输入序号，升序"></el-input>
      </el-form-item>
      <el-form-item label="编辑时间">
        <el-date-picker
          v-model="adate"
          align="right"
          type="date"
          placeholder="选择时间"
          style="width: 100%">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="来源">
        <el-input v-model="origin" placeholder="输入新闻来源，限30字"></el-input>
      </el-form-item>
      <el-form-item label="语言">

        <el-input
          v-model="on_language"
          :placeholder="
            !language ? '请选择当前文章的语言':
              language === 1 ? '请填写对应英文文章ID' : '请填写对应中文文章ID'
          "
          class="input-with-select">
          <el-select v-model="language" style="width: 100px" slot="prepend" placeholder="请选择">
            <el-option label="中文" :value="1"></el-option>
            <el-option label="英文" :value="2"></el-option>
            <el-option label="德文" :value="3"></el-option>
          </el-select>
        </el-input>

      </el-form-item>
      <el-form-item label="转向中文">
        <el-select v-model="redire" style="width: 100px">
          <el-option label="否" :value="0">否</el-option>
          <el-option label="是" :value="1">是</el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-form label-width="80px" class="r-form">
      <el-form-item label="新闻标题">
        <el-input v-model="title" placeholder="输入新闻标题，限30字"></el-input>
      </el-form-item>
      <el-form-item label="新闻简介">
        <el-input type="textarea" :rows="5" placeholder="请输入新闻简介" v-model="brief">
        </el-input>
      </el-form-item>
      <el-form-item label="正文内容">
        <div ref="editContent">
        </div>
      </el-form-item>
      <el-form-item>
        <div style="float: right">
          <el-button type="info" plain @click="$router.back()">取消</el-button>
          <el-button type="warning" plain @click="submit(0)">预览</el-button>
          <el-button type="primary" @click="submit(1)">{{id ? '修改' : '新增'}}</el-button>
        </div>
      </el-form-item>
    </el-form>
    <div class="preview" v-if="previewData">
      <i class="el-icon-close" @click="previewData = null"></i>
      <div class="preview-layer">
        <preview :activep="previewData" class="layer"/>
      </div>
    </div>
  </div>
</template>

<script>
import {root} from '@/util/http'
import preview from '../preview'

export default {
  data () {
    return {
      id: null,
      coverUrl: '',
      label: '',
      sort: '',
      adate: '',
      title: '',
      content: '',
      origin: '',
      brief: '',
      language: null,
      on_language: null,
      redire: 1,
      root,
      previewData: null
    }
  },
  methods: {
    handleCoverBefore () {
    },
    handleCoverSuccess (data) {
      this.coverUrl = data.content
    },
    async submit (oper) {
      if (!this.title) {
        return this.$error('请填写标题')
      } else if (!this.adate) {
        return this.$error('请选择日期')
      } else if (!this.coverUrl) {
        return this.$error('请上传封面')
      }

      let body = {
        language: this.language,
        title: this.title,
        content: this.content,
        cover: this.coverUrl,
        label: this.label,
        brief: this.brief,
        date: new Date(this.adate).getTime(),
        sort: this.sort,
        origin: this.origin,
        redire: this.redire
      }

      if (body.language === 1) {
        body.english_id = this.on_language
      } else {
        body.chinese_id = this.on_language
      }

      if (oper) {
        try {
          if (this.id) {
            body.id = this.id
            await this.$http.put('/news', body)
            this.$success('修改成功')
          } else {
            await this.$http.post('/news', body)
            this.$router.back()
          }
        } catch (e) {
          this.$error(e.msg)
        }
      } else {
        this.previewData = body
      }
    },
    async getInfo () {
      try {
        let {content} = await this.$http.get('/news/' + this.id)
        this.title = content.title
        this.content = content.content
        this.coverUrl = content.cover
        this.label = content.label
        this.brief = content.brief
        this.adate = new Date(Number(content.date))
        this.sort = content.sort
        this.origin = content.origin
        this.redire = content.redire
        this.language = content.language || null

        if (content.language === 1) {
          this.on_language = content.english_id || null
        } else {
          this.on_language = content.chinese_id || null
        }
      } catch (e) {
        this.$router.back()
      }
    }
  },
  async mounted () {
    let editor = new this.Editor(this.$refs.editContent)
    editor.customConfig.menus = [
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'foreColor',
      'backColor',
      'link',
      'list',
      'justify',
      'quote',
      'emoticon',
      'image',
      'table',
      'video',
      'code',
      'undo',
      'redo'
    ]
    editor.customConfig.onchange = html => {
      this.content = html
    }
    editor.customConfig.uploadImgServer = root + '/system/uploads'
    editor.customConfig.uploadFileName = 'file'
    editor.customConfig.uploadImgMaxLength = 1
    editor.create()

    let id = Number(this.$route.params.id)
    if (Number.isFinite(id)) {
      this.id = id
      await this.getInfo()
      editor.txt.html(this.content)
    }
  },
  components: {preview}
}
</script>

<style scoped>
@import url('./style.css');
</style>
