<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="文章内容" name="1">
      <el-form class="add-article-content" ref="setArtContentform" label-width="100px" :model="setArtContent" :rules="artContentRules">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="setArtContent.title" type="text" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="time_date" style="max-width: 600px;">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="请选择日期" v-model="setArtContent.time_date"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-time-picker type="fixed-time" placeholder="请选择时间" v-model="setArtContent.time_time"></el-time-picker>
          </el-col>
        </el-form-item>
        <!--  v-model="setArtContent.content" -->
        <textarea id="editor"></textarea>
        <el-form-item>
          <el-button type="primary" @click="onSubmitSetArtContent">保存</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="高级设置" name="2">
      <el-row>
        <!-- <el-col class="hidden-sm-and-down" :md="2" :lg="5" :xl="6" style="height: 1px;"></el-col> -->
        <el-col :xs="24" :sm="24" :md="18" :lg="14" :xl="12">
          <el-form ref="setAdanceform" label-width="100px" :model="setAdance" :rules="adanceRules">
            <el-form-item label="来源" prop="source">
              <el-input v-model="setAdance.source" type="text" placeholder="输入文章来源"></el-input>
            </el-form-item>
            <el-form-item label="作者" prop="author">
              <el-input v-model="setAdance.author" type="text" placeholder="输入文章作者"></el-input>
            </el-form-item>
            <el-form-item label="摘要" prop="detail">
              <el-input type="textarea" :autosize="{ minRows: 6 }" v-model="setAdance.detail" placeholder="输入文章摘要"></el-input>
            </el-form-item>
            <el-form-item label="列表缩略图" prop="desc">
              <el-upload action="" ref="uploadwebmasterfile" :auto-upload="false">
                <el-button slot="trigger" size="medium">上传图片</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitSetAdance">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="百度优化" name="3">
      <el-row>
        <!-- <el-col class="hidden-sm-and-down" :md="2" :lg="5" :xl="6" style="height: 1px;"></el-col> -->
        <el-col :xs="24" :sm="24" :md="18" :lg="14" :xl="12">
          <el-form ref="setBaiduOptimizationform" label-width="120px" :model="setBaiduOptimization" :rules="baiduOptimizationRules">
            <el-form-item label="文章页面标题" prop="title">
              <el-input v-model="setBaiduOptimization.title" type="text" placeholder="请输入文章浏览器标题"></el-input>
            </el-form-item>
            <el-form-item label="文章页面关键词" prop="keyword">
              <el-input v-model="setBaiduOptimization.keyword" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入文章页面关键词，多个关键词使用英文“,”隔开"></el-input>
            </el-form-item>
            <el-form-item label="文章页面描述" prop="description">
              <el-input v-model="setBaiduOptimization.description" type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入文章页面描述"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitSetBaiduOptimization">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import CKEDITOR from 'CKEDITOR'

  export default {
    data () {
      return {
        ckeditor: null,
        activeName: '1',
        setArtContent: {},
        artContentRules: {
          'title': [
            { required: true, message: '请输入文章标题', trigger: 'blur' }
          ],
          'time_date': [
            { required: true, message: '请选择日期', trigger: 'blur' }
          ]
        },
        setAdance: {},
        adanceRules: { 'source': [ ], 'author': [ ], 'detail': [ ]
          /* 少一个缩略图 */
        },
        setBaiduOptimization: {},
        baiduOptimizationRules: { 'title': [ ], 'keyword': [ ], 'description': [ ] }
      }
    },
    mounted () {
      this.initckeditor()
    },
    methods: {
      handleClick (tab, event) { /* console.log(tab, event) */ },
      /* 初始化 ckeditor */
      initckeditor () {
        this.ckeditor = CKEDITOR.replace('editor', {
          height: 300,
          uiColor: '#eeeeee',
          filebrowserImageUploadUrl: '/api/editor/upload',
          // resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
          toolbar: [
            { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview' ] },
            { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
            { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
            { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
            { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
            { name: 'editing', items: [ 'Find', 'Replace' ] },
            // { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
            '/',
            { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
            { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
            { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
            { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule' ] }
          ]
        })
      },
      onSubmitSetArtContent () {
        this.$refs['setArtContentform'].validate((valid) => {
          if (valid) {
            console.log('submit!')
          } else {
            this.$message.error('请检查输入项，确认无误后，重新提交')
            return false
          }
        })
      },
      onSubmitSetAdance () {
        this.$refs['setAdanceform'].validate((valid) => {
          if (valid) {
            console.log('submit!')
          }
        })
      },
      onSubmitSetBaiduOptimization () {
        this.$refs['setBaiduOptimizationform'].validate((valid) => {
          if (valid) {
            console.log('submit!')
          }
        })
      }
    }
  }
</script>
