<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form
          ref="artForm"
          :model="artForm"
          :rules="artRule"
          label-width="80px"
        >
          <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:350px"
            />
          </el-form-item>
          <el-form-item label="文章类型:" prop="label">
            <el-select v-model="artForm.label" placeholder="请选择">
              <el-option label="常来微聊" value="1" />
              <el-option label="社区文章" value="2" />
            </el-select>
          </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>
</template>

<script>
// 修改
import {
  setAdd
} from '@/api/community/list'

export default {
  data() {
    return {
      artForm: {
        title: '',
        author: '',
        tag: '',
        label: '2',
        contents: ''
      },
      artRule: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入文章作者', trigger: 'blur' }
        ],
        label: [
          { required: true, message: '请选择文章类型', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    previewHtml() {
      return 1
    }
  },
  methods: {
    // 提交
    handleArtSubmit() {
      this.$refs.artForm.validate((valid) => {
        if (valid) {
          const contents = this.$refs.infoEditor.getContent()
          if (!contents) {
            this.$message.warning('还未添加文章详情哦!!!')
            return false
          }
          const { title, author, label } = this.artForm
          // 判断是否为视频
          const reg = /[\<video | \<\\video\>]/g
          const type = reg.test(contents) ? 1 : 0
          this.setAdd({
            title,
            author,
            label,
            type,
            contents
          })
        } else {
          return false
        }
      })
    },
    // 添加文章
    async setAdd(data) {
      const res = await setAdd(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.handleAddArtCancel()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 取消
    handleAddArtCancel() {
      this.$router.push({
        name: 'community_list'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .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>
