<template>
  <a-modal
    :title="modalTitle"
    :width="1200"
    :visible="visible"
    class="ant-modal2"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel">
    <a-form :form="form">

      <a-form-item v-show="false" >
        <a-input v-decorator="['id']" type="hidden"/>
      </a-form-item>

      <a-form-item
        label="类型"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select v-decorator="['type', {rules: [{required: true, message: '类型不能为空'}], initialValue:'1'}]" placeholder="请选择" @change="changeType">
          <a-select-option
            v-for="(value,key) in typeMap"
            :key="key"
            :label="key"
            :value="key">{{ value }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="标识"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input
          v-decorator="['code', {rules: [{required: true, message: '标识不能为空'}]}]" />
      </a-form-item>
      <a-form-item
        label="名称"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input
          v-decorator="['name', {rules: [{required: true, message: '名称不能为空'}]}]" />
      </a-form-item>
      <a-form-item
        label="内容"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-textarea
          v-if="type === '1'"
          v-decorator="['content', {rules: [{required: true, message: '值不能为空'}]}]" />
        <file-upload
          v-if="type === '2'"
          ref="imageUpload"
          @catchImage="catchImage"
        ></file-upload>
        <UEditor v-show="type === '3'" :config="config" ref="ueditor"></UEditor>
      </a-form-item>
      <a-form-item
        label="是否对外"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-switch :checked="openFlag" @change="handleOpenFlagChange" />
      </a-form-item>
      <a-form-item
        label="描述"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-textarea
          v-decorator="['description']" />
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { addSysConfig, updateSysConfig } from '@/api/upms/config'
import FileUpload from '@/components/Upload/Upload'
import WangEditor from '@/components/Editor/WangEditor'
import UEditor from '@/components/Editor/Ueditor.vue'

export default {
  name: 'BaseSysConfig',
  components: {
    FileUpload,
    UEditor,
    WangEditor
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      confirmLoading: false,
      mdl: {},
      modalTitle: null,
      form: this.$form.createForm(this),
      visible: false,
      type: '1',
      config: {
        // 可以在此处定义工具栏的内容
        // toolbars: [
        //  ['fullscreen', 'undo', 'redo','|','bold', 'italic', 'underline',
        //  '|','superscript','subscript','|', 'insertorderedlist', 'insertunorderedlist',
        //  '|','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify']
        // ],
        autoHeightEnabled: false,
        zIndex: 2,
        // autoFloatEnabled: true,
        initialContent: '请输入内容', // 初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
        autoClearinitialContent: true, // 是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        initialFrameWidth: null,
        initialFrameHeight: 450,
        BaseUrl: '',
        UEDITOR_HOME_URL: '/ueditor/'
      },
      openFlag: true,
      content: '',
      resultContent: ''
    }
  },
  props: {
    typeMap: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    base (record) {
      this.visible = true
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record)) {
        this.modalTitle = '添加'
        this.content = ''
        this.type = '1'
        this.openFlag = true
        return
      }
      this.modalTitle = '编辑'
      const { form: { setFieldsValue } } = this
      this.type = record.type + ''
      this.openFlag = record.openFlag
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id',
          'code',
          'name',
          'content',
          'description'
        ]), { 'type': this.type }))
        this.content = record.content
        if (this.type === '2' && record.content) {
          const fileList = []
          fileList.push({
            uid: '-1',
            name: '',
            status: 'done',
            url: this.BaseTool.Constant.FILE_URL + record.content,
            originUrl: record.content
          })
          this.$refs.imageUpload.base(1, fileList)
        } else if (this.type === '3' && record.content) {
          this.$refs.ueditor.setContent(record.content)
        }
      })
    },
    changeType (value) {
      this.type = value + ''
      if (this.type === '2') {
        this.$refs.imageUpload.base(1, [])
      }
    },
    catchImage (fileList) {
      console.log('fileList', fileList)
      this.content = fileList.length > 0 ? fileList[0].originUrl : ''
    },
    catchData (content) {
      this.resultContent = content
    },
    handleOpenFlagChange (openFlag) {
      this.openFlag = openFlag
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        if (this.type === '1') {
          this.content = values.content
        } else if (this.type === '3') {
          this.content = this.$refs.ueditor.getUEContent()
        }
        values = {
          ...values,
          openFlag: this.openFlag,
          content: this.content
        }
        if (this.BaseTool.String.isBlank(values.id)) {
          addSysConfig(values)
            .then(() => {
              this.handleCancel(values)
            }).catch(() => {
              this.confirmLoading = false
            })
        } else {
          updateSysConfig(values)
            .then(() => {
              this.handleCancel(values)
            }).catch(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      if (this.BaseTool.Object.isNotBlank(values)) {
        this.$emit('ok', values)
      }
    }

  }
}
</script>
<style lang="less">
  .ant-modal2 {
    top: 20px !important;
  }
</style>
