<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="新闻标题">
        <el-input v-model="news.title"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="news.sort"></el-input>
      </el-form-item>
      <el-form-item label="封面图片">
        <el-upload
          class="cover-uploader"
          :action="root + '/system/upload'"
          :show-file-list="false"
          :on-success="handleCoverSuccess"
          :style="{width: '200px', paddingTop: '20%'}">
          <div class="cover-content">
            <img v-if="news.cover" :src="news.cover" 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="语言" style="text-align: left">
        <el-select v-model="news.language" 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-form-item>
      <el-form-item label="关联文章" style="text-align: left">
        <el-select v-model="news.nid" filterable :filter-method="filter" placeholder="关联文章" >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="简介">
        <div style="padding-right: 10%; position: relative">
          <el-button type="primary" @click="news.text.push('')" circle class="addText" icon="el-icon-plus"></el-button>
          <el-input type="text" v-model="news.text[k]" v-for="(t, k) in news.text" :key="k" style="margin-bottom: 10px"></el-input>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$emit('submit', news)">{{news.id ? '修改' : '创建'}}</el-button>
        <el-button @click="$emit('quit')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

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

export default {
  props: ['datap'],
  data () {
    return {
      root,
      options: [],
      news: {
        ...this.datap
      }
    }
  },
  methods: {
    handleCoverSuccess (data) {
      this.news.cover = data.content
    },
    async filter (keyword) {
      this.options = (await this.$http.get('/news', {params: {limit: 10, keyword}})).content.data
      this.options = this.options.map(item => {
        return {
          label: item.title,
          value: item.id
        }
      })
    }
  },
  async mounted () {
    if (!this.news.nid) {
      this.filter('')
    } else {
      let {content} = (await this.$http.get('/news/' + this.news.nid))
      this.options = [{
        label: content.title,
        value: content.id
      }]
    }

    if (this.news.text) {
      this.news.text = JSON.parse(this.news.text)
    }
  }
}
</script>

<style scoped>
  .addText {
    position: absolute;
    right: 0;
    top: 0;
  }
</style>
