<template>
<div class="app-container">
  <div class="box-container">
    <div class="contain-title">新内容发布</div>
  </div>
  <div class="content-container contentBox">
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm" style="width: 943px">
      <div style="width: 500px">
        <el-form-item label="标题" prop="contentTitle">
          <el-input placeholder="请填写内容标题" v-model="ruleForm2.contentTitle" class="input-with-select" maxlength=50>
            <el-select v-model="ruleForm2.select" slot="prepend" placeholder="栏目分类" @change="change">
              <el-option label="平台新闻" value="1"></el-option>
              <el-option label="采访专栏" value="2"></el-option>
              <el-option label="政策法规" value="3"></el-option>
              <el-option label="通知公告" value="4"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="作者/来源" prop="authorSource">
          <el-input v-model.number="ruleForm2.age" placeholder="请填写作者/来源" maxlength=20></el-input>
        </el-form-item>
        <searchTemplate :relevant=relevantExperts v-on:expert="expert"></searchTemplate>
        <searchTemplate :relevant=relevantInstitutions v-on:institution="institution"></searchTemplate>
        <searchTemplate :relevant=relevantCompanies v-on:company="company"></searchTemplate>
      </div>
      <el-form-item label="文章正文" prop="artDesc" class="editBox">
        <UE :id="artUe" :contentText="ruleForm2.artDesc" ref="ueBox"></UE>
      </el-form-item>
      <el-form-item class="publishButton">
        <el-button type="primary" @click="submitForm('ruleForm2')">发布</el-button>
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="fileBox" v-on:uploadfun="uploadfun">
      <uploadFile :uploadImg=uploadImg></uploadFile>
      <p class="teimg">上传封面图片</p>
      <p class="tetype">PNG/JPG/JPEG格式，2M以内</p>
    </div>

  </div>
</div>
</template>

<script>
  import searchTemplate from '@/components/searchBar'
  import uploadFile from '@/components/uploadFile'
  import UE from '@/components/editorUE'
  export default {
    data() {
      var checkTitle = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请填写标题'))
        } else {
          if (this.ruleForm2.select === '') {
            callback('请选择该内容所属栏目分类')
          }
          callback()
        }
      }
      var checkAuthorSource = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请填写作者/来源'))
        } else {
          callback()
        }
      }
      var checkContent = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请填写内容'))
        } else {
          callback()
        }
      }
      return {
        artUe: 'artUeditorId',
        uploadImg: {
          url: '',
          width: '400px',
          height: '200px',
          fun: 'uploadfun'
        },
        relevantExperts: {
          url: '',
          placeholder: '请选择关联专家',
          fun: 'expert',
          label: '相关专家',
          prop: 'professor',
          width: '400px'
        },
        relevantInstitutions: {
          url: '',
          placeholder: '请选择关联机构',
          fun: 'institution',
          label: '相关机构',
          prop: 'institution',
          width: '400px'
        },
        relevantCompanies: {
          url: '',
          placeholder: '请选择关联企业',
          fun: 'company',
          label: '相关企业',
          prop: 'company',
          width: '400px'
        },
        ruleForm2: {
          authorSource: '',
          select: '',
          contentTitle: '',
          professor: '',
          artDesc: ''
        },
        rules2: {
          contentTitle: [
            { validator: checkTitle, trigger: 'blur', required: true }
          ],
          authorSource: [
            { validator: checkAuthorSource, trigger: 'blur', required: true }
          ],
          artDesc: [
            { validator: checkContent, trigger: 'blur', required: true }
          ]
        }
      }
    },
    components: {
      searchTemplate,
      uploadFile,
      UE
    },
    methods: {
      uploadfun(value) {
        console.log(value)
      },
      institution(value) {
        console.log(value)
      },
      company(value) {
        console.log(value)
      },
      expert(value) {
        console.log(value)
      },
      change() {
        console.log(11)
        this.$refs.ruleForm2.validateField('contentTitle')
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .content-container {
    position: relative;
  }

  .fileBox {
    position: absolute; top: 20px; left: 550px;
    text-align: center
  }
  .teimg {
    color:#606266;
    font-size: 16px;
  }
  .tetype {
    color:#909399;
    font-size: 14px;
  }
  .editBox .el-form-item__content {
    line-height: 0px;
  }
  .publishButton {
    text-align: center;
  }
</style>