<template>
  <div>
    <el-form ref="form" label-width="80px">
      <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="media.cover" :src="media.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-upload
          class="upload-demo"
          :action="root + '/system/upload'"
          :on-success="handleZipSuccess"
          :on-remove="handleRemove"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="语言" style="text-align: left">
        <el-select v-model="media.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="media.type" 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="排序">
        <el-input v-model="media.sort"></el-input>
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="media.text"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="$emit('submit', media)">{{media.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 () {
    let fileList = []
    if (this.datap.zip) {
      fileList.push({name: '已有文件', url: this.datap.zip})
    }

    return {
      root,
      fileList,
      media: {
        ...this.datap
      }
    }
  },
  methods: {
    handleCoverSuccess (data) {
      this.media.cover = data.content
    },
    handleRemove () {
      this.fileList = []
    },
    handleZipSuccess (data) {
      this.fileList = [{
        name: '成功上传文件',
        url: data.content
      }]
    }
  },
  watch: {
    fileList () {
      if (this.fileList.length > 0) {
        this.media.zip = this.fileList[0].url
      } else {
        this.media.zip = null
      }
    }
  }
}
</script>

<style scoped>

</style>
