<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form
          ref="artForm"
          :model="artForm"
          :rules="artRule"
          label-width="100px"
        >
          <el-form-item label="题目:" prop="title">
            <el-input v-model="artForm.title" style="width:350px" />
          </el-form-item>
          <el-form-item label="作者:" prop="author">
            <el-input v-model="artForm.author" style="width:200px" />
          </el-form-item>
          <el-form-item label="第几期:">
            <el-input v-model="artForm.issue" type="number" style="width:200px" min="0" />
          </el-form-item>
          <el-form-item label="文章类型:" prop="group_id">
            <el-select v-model="artForm.group_id" placeholder="请选择文章类型" class="filter-item">
              <el-option
                v-for="item in cleGroupList"
                :key="item.id"
                :label="item.group_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否置顶:" prop="is_top">
            <el-select v-model="artForm.is_top" placeholder="请选择">
              <el-option label="不置顶" value="0" />
              <el-option label="置顶" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否推荐:" prop="recommended">
            <el-select v-model="artForm.recommended" placeholder="请选择">
              <el-option label="不推荐" value="0" />
              <el-option label="推荐" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="上传封面:" required>
            <el-upload
              action=""
              :show-file-list="false"
              :http-request="thumbPictureUpload"
            >
              <el-button size="mini">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                (上传图片最大为200K,只能上传1张，如需修改请重新上传主图)
              </div>
            </el-upload>
            <div v-if="artForm.avatar">
              <img :src="artForm.avatar" class="thumbUrl">
            </div>
          </el-form-item>
          <el-form-item label="内容:" required>
            <editor ref="infoEditor" :value="artForm.contents" />
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="handleAddArtCancel">
              取消
            </el-button>
            <el-button type="primary" size="mini" @click="handleArtSubmit">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- <el-col :span="8">
        <div class="previewMain">
          <div
            class="preview"
            v-html="previewHtml"
          />
        </div>
      </el-col> -->
    </el-row>
    <div v-if="thumbLoad" v-loading="thumbLoad" class="loadingShade" />
  </div>
</template>

<script>
// 修改
import { setAdd, getArticleGroup } from '@/api/community/list'
import { uploadImage } from '@/api/goods'
import 'tinymce/icons/default/icons.min.js'
export default {
  data() {
    return {
      artForm: {
        title: '',
        author: '',
        issue: '',
        tag: '',
        label: '',
        group_id: '',
        is_top: '',
        recommended: '',
        contents: '',
        avatar: ''
      },
      params: {
        search_content: '',
        status: 0
      },
      cleGroupList: [],
      artRule: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        issue: [{ required: true, message: '请输入期数', trigger: 'blur' }],
        author: [
          { required: true, message: '请输入文章作者', trigger: 'blur' }
        ],
        group_id: [
          { required: true, message: '请选择文章类型', trigger: 'change' }
        ],
        is_top: [
          { required: true, message: '请选择是否置顶', trigger: 'change' }
        ],
        recommended: [
          { required: true, message: '请选择是否推荐', trigger: 'change' }
        ]
      },
      thumbLoad: false
    }
  },
  computed: {
    previewHtml() {
      return 1
    }
  },
  created() {
    this.getArticleGroup()
  },
  methods: {
    async getArticleGroup() {
      this.loadingFull = true
      await getArticleGroup(this.params).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.cleGroupList = res.data.list
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 上传封面图
    thumbPictureUpload(params) {
      this.thumbLoad = true
      const file = params.file
      const imgType = ['image/png', 'image/jpg', 'image/jpeg']
      if (imgType.indexOf(file.type) === -1) {
        this.$message.warning('上传图片格式必须为: png或jpg格式')
        return false
      }
      const formdata = new FormData()
      formdata.append('file', file)
      uploadImage(formdata)
        .then(res => {
          this.thumbLoad = false
          try {
            const { message, code, data } = res
            if (code === 200) {
              console.log(data, '上传图片')
              this.artForm.avatar = data
            } else {
              this.artForm.avatar = ''
              this.$message.error(message)
            }
          } catch (e) {
            console.log(`上传商品主图失败: ${e}`)
          }
        })
        .catch(() => {
          this.thumbLoad = false
        })
    },
    // 提交
    handleArtSubmit() {
      this.artForm.label = this.artForm.group_id
      this.$refs.artForm.validate(valid => {
        if (valid) {
          const contents = this.$refs.infoEditor.getContent()
          if (!contents) {
            this.$message.warning('还未添加文章详情哦!!!')
            return false
          }
          const { title, author, label, avatar, is_top, recommended, group_id, issue } = this.artForm
          if (!avatar) {
            this.$message.warning('还未上传封面图哦!!!')
            return false
          }
          // 判断是否为视频
          const reg = /[\<video | \<\\video\>]/g
          const type = reg.test(contents) ? 1 : 0
          this.setAdd({
            avatar,
            title,
            author,
            label,
            is_top,
            group_id,
            recommended,
            type,
            issue,
            contents
          })
        } else {
          return false
        }
      })
    },
    // 添加文章
    async setAdd(data) {
      const res = await setAdd(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success('添加成功!')
          this.handleAddArtCancel()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 取消
    handleAddArtCancel() {
      this.$router.push({
        name: 'community_list'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.thumbUrl {
  display: block;
  width: 100px;
  height: 100px;
  margin: 15px;
}
.previewMain {
  width: 346px;
  height: 618px;
  background: url("../../assets/common/phoneBg.png") no-repeat;
  padding: 70px 0 0 14px;
  position: relative;

  .preview {
    width: 320px;
    height: 480px;
    background: red;
  }
}
</style>
