<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="来源logo">
        <el-upload
          class="cover-uploader"
          :action="root + '/system/upload'"
          :show-file-list="false"
          :on-success="handleLogoSuccess"
          :before-upload="handleLogoBefore"
          :style="{width: '50%', paddingTop: '50%'}">
          <div class="cover-content">
            <img v-if="logoUrl" :src="logoUrl" class="cover">
            <template v-else class="cover-content">
              <i class="el-icon-plus cover-uploader-icon"></i>
              <p>点击上传LOGO（限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-select v-model="label" placeholder="请选择标签">
          <el-option label="文博" value="文博"></el-option>
          <el-option label="工业" value="工业"></el-option>
          <el-option label="地产" value="地产"></el-option>
          <el-option label="政务" value="政务"></el-option>
          <el-option label="文物" value="文物"></el-option>
          <el-option label="电商" value="电商"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="sort" placeholder="输入序号，升序"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="link" placeholder="大场景链接" class="input-with-select">
          <el-select v-model="type" style="width: 100px" slot="prepend" placeholder="请选择">
            <el-option label="场景" :value="1"></el-option>
            <el-option label="视频" :value="2"></el-option>
          </el-select>
        </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-input v-model="label" placeholder="输入案例标签"></el-input> -->

        <el-select v-model="proType" placeholder="请选择项目类型">
          <el-option label="不限" :value="0"></el-option>
          <el-option label="PC" :value="1"></el-option>
          <el-option label="手机端" :value="2"></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="项目地点">
        <el-input v-model="address" 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>
    <el-form label-width="80px" class="r-form">
      <!-- <el-form-item label="独占一列">
        <el-select v-model="type" placeholder="请选择">
          <el-option label="是" :value="2"></el-option>
          <el-option label="否" :value="1"></el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item label="案例标题">
        <el-input v-model="title" placeholder="输入案例标题，限30字"></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="primary" @click="submit(1)">{{id ? '修改' : '新增'}}</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

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

export default {
  data () {
    return {
      id: null,
      coverUrl: '',
      logoUrl: '',
      label: '',
      sort: '',
      link: '',
      address: '',
      adate: '',
      title: '',
      content: '',
      type: 1,
      proType: 0,
      language: null,
      on_language: null,
      root
    }
  },
  methods: {
    handleCoverBefore () {
    },
    handleLogoBefore () {
    },
    handleCoverSuccess (data) {
      this.coverUrl = data.content
    },
    handleLogoSuccess (data) {
      this.logoUrl = data.content
    },
    async submit (oper) {
      if (!this.title) {
        return this.$error('请填写标题')
      } else if (!this.coverUrl) {
        return this.$error('请上传封面')
      }
      let body = {
        proType: this.proType,
        language: this.language,
        title: this.title,
        content: this.content,
        cover: this.coverUrl,
        logo: this.logoUrl,
        label: this.label,
        date: new Date(this.adate).getTime(),
        sort: this.sort,
        link: this.link,
        type: this.type,
        address: this.address
      }

      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('/case', body)
            this.$success('修改成功')
          } else {
            await this.$http.post('/case', body)
            this.$router.back()
          }
        } catch (e) {
          this.$error(e.msg)
        }
      } else {
        this.previewData = body
      }
    },
    async getInfo () {
      try {
        let {content} = await this.$http.get('/case/' + this.id)
        this.proType = content.pro_type
        this.title = content.title
        this.content = content.content
        this.coverUrl = content.cover
        this.logoUrl = content.logo
        this.label = content.label
        this.adate = new Date(Number(content.date))
        this.sort = content.sort
        this.link = content.link
        this.type = content.type
        this.address = content.address
        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.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)
    }
  }
}
</script>

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