<template>
  <a-modal
    title="内容管理"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    ok-text="保存"
    cancel-text="关闭"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <a-form :form="form">
      <a-form-item
        style="display: none;"
      >
        <a-input v-decorator="['id']" />
      </a-form-item>
      <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
        <a-input
          placeholder="请输入标题"
          v-decorator="['articleContentTitle', {rules: [{required: true, message: '请输入标题'}]}]"
        />
      </a-form-item>
      <a-form-item
        label="封面"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback
        :required="true"
      >
        <div>
          <upload-component
            ref="upLoadRef"
            :remarkTxt="remarkTxt"
            @uploadSuccess="uploadSuccess"
            v-decorator="[
              'articleContentCover',
              {
                trigger: 'change',
                rules: [{ validator: checkimageUrl }]
              },
            ]"
          ></upload-component>
        </div>
      </a-form-item>
      <a-form-item label="内容类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
        <a-select
          style="width: 100%"
          placeholder="请选择内容类型"
          v-decorator="['articleContentType', {rules: [{ required: true, message: '请选择内容类型' }]}]"
          @change="articleContentTypeChange"
        >
          <a-select-option
            v-for="(item,index) in typeList"
            :key="index"
            :value="item.code"
          >{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="分类" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
        <a-select
          style="width: 100%"
          placeholder="请选择分类"
          v-decorator="['articleContentClassify', {rules: [{ required: true, message: '请选择分类' }]}]"
          @change="articleContentClassifyChange"
        >
          <a-select-option
            v-for="(item,index) in classifyList"
            :key="index"
            :value="item.articleContentClassify"
          >{{ item.articleContentClassify }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="子分类" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
        <a-select
          style="width: 100%"
          placeholder="请选择子分类"
          v-decorator="['articleContentSubclassify', {rules: [{ required: true, message: '请选择子分类' }]}]"
        >
          <a-select-option
            v-for="(item,index) in subclassifyList"
            :key="index"
            :value="item.articleContentSubclassify"
          >{{ item.articleContentSubclassify }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="摘要"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback
      >
        <a-textarea :rows="4" :maxLength="100" placeholder="请输入摘要" @input="abstractInput" v-decorator="['articleContentAbstract', {rules: [{required: true, message: '请输入摘要！'}]}]">
        </a-textarea>
        <div class="inputCount">({{ articleContentAbstract.length }}/100)</div>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="内容"
        :hasFeedback="true"
        :required="true"
      >
        <quill-editor-component
          ref="editorRef"
          @contentGet="contentGet"
          v-decorator="[
            'articleContentContent',
            {
              trigger: 'change',
              rules: [{ required: true, message: '请输入文章内容' }]
            },
          ]"
        ></quill-editor-component>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="排序"
        :hasFeedback="true"
        :required="true"
      >
        <a-input
          placeholder="请输入排序号"
          v-decorator="['articleContentSort', {rules: [{validator: checkSortIndex}]}]"
        />
      </a-form-item>
      <a-form-item label="是否上线" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
        <a-radio-group name="articleContentIsLine" v-decorator="['articleContentIsLine',{ initialValue: 1 }]">
          <a-radio :value="1">上线</a-radio>
          <a-radio :value="0">下线</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>

import {
   addArticleContent,
   updateArticleAllInfo,
   getSystemDictClassify,
   getSystemDictSubClassify } from '@/api/modular/system/contentControlApi'
import quillEditorComponent from '@/components/quillEditorComponent'
import homeApi from '@/api/homeApi'
import uploadComponent from '@/components/upLoad'

export default {
  components: { uploadComponent, quillEditorComponent },
  data () {
    return {
      typeList: homeApi.systemTypeList,
      subclassifyList: [],
      classifyList: [],
      loading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      articleContentType: '',
      articleContentClassify: '',
      articleContentAbstract: '',
      remarkTxt: '请上传1920×712规格图像'
    }
  },
  methods: {
    // 初始化方法
    add (record) {
      this.visible = true
      this.form.resetFields()
      this.$nextTick(() => {
        this.$refs.upLoadRef.initData([])
        this.$refs.editorRef.initEditorContent('')
      })
    },
    edit (record) {
      this.visible = true
      setTimeout(() => {
        this.form.resetFields()
        this.form.setFieldsValue(record)
        this.form.setFieldsValue({ 'id': record.articleContentId })
        this.$nextTick(() => {
          this.abstractInput()
          this.$refs.upLoadRef.initData([record.articleContentCover])
          this.$refs.editorRef.initEditorContent(record.articleContentContent)
        })
      }, 100)
    },
    articleContentTypeChange () {
      this.$nextTick(() => {
        this.articleContentType = this.form.getFieldValue('articleContentType')
        this.form.setFieldsValue({ 'articleContentClassify': '' })
        this.form.setFieldsValue({ 'articleContentSubclassify': '' })
        this.getSystemDictClassify()
      })
    },
    articleContentClassifyChange () {
      this.$nextTick(() => {
        this.articleContentClassify = this.form.getFieldValue('articleContentClassify')
        this.form.setFieldsValue({ 'articleContentSubclassify': '' })
        this.getSystemDictSubClassify()
      })
    },
    /**
     * 获取选择器下拉框数据(分类)
     */
    getSystemDictClassify () {
      getSystemDictClassify({ 'articleContentType': this.articleContentType }).then((res) => {
        this.formLoading = false
        if (res.status === 200) {
          this.classifyList = res.data
        } else {
          this.$message.error('获取文章列表数据失败')
        }
      })
    },
    /**
     * 获取选择器下拉框数据(子分类)
     */
    getSystemDictSubClassify () {
      getSystemDictSubClassify({ 'articleContentType': this.articleContentType, 'articleContentClassify': this.articleContentClassify }).then((res) => {
        this.formLoading = false
        if (res.status === 200) {
          this.subclassifyList = res.data
        } else {
          this.$message.error('获取文章列表数据失败')
        }
      })
    },
    abstractInput () {
      this.$nextTick(() => {
        this.articleContentAbstract = this.form.getFieldValue('articleContentAbstract')
      })
    },
    contentGet (content) {
      this.form.setFieldsValue({ 'articleContentContent': content })
    },
    uploadSuccess (avg) {
      if (avg.fileList[0]) {
        this.form.resetFields('articleContentCover')
        this.form.setFieldsValue({ 'articleContentCover': avg.fileList[0].uri })
      }
    },
    checkimageUrl (rule, value, callback) {
      if (value && value.length > 0) {
        callback()
        return
      }
      var text = '请上传图片'
      callback(text)
    },
    handleSubmit () {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values.articleContentSort = parseInt(values.articleContentSort)
          values.articleContentContent = this.$refs.editorRef.imgUrlDel()
          if (values.id) {
            delete values.articleContentId
            this.editReq(values)
          } else {
            delete values.id
            this.addReq(values)
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    addReq (values) {
      addArticleContent(values)
      .then(res => {
        if (res.status === 200) {
          this.$message.success('新增成功')
          this.visible = false
          this.confirmLoading = false
          this.$emit('ok', values)
          this.form.resetFields()
        } else {
          this.$message.error('新增失败：' + res.msg)
        }
      })
      .finally(res => {
        this.confirmLoading = false
      })
    },
    editReq (values) {
      updateArticleAllInfo(values)
      .then(res => {
        if (res.status === 200) {
          this.$message.success('编辑成功')
          this.visible = false
          this.confirmLoading = false
          this.$emit('ok', values)
          this.form.resetFields()
        } else {
          this.$message.error('编辑失败：' + res.msg)
        }
      })
      .finally(res => {
        this.confirmLoading = false
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    checkSortIndex (rule, value, callback) {
      var text = '请输入排序号！'
      if (!value) {
        callback(text)
      } else if (/(^[1-9]\d*$)/.test(value)) {
        callback()
      } else {
        text = '请输入数字'
        callback(text)
      }
    }
  }
}
</script>
<style lang="less">
  .inputCount{
    position: absolute;
    right: 30px;
    bottom: -10px;
    color: #999;
  }
</style>
