<template>
  <a-drawer
    title="系统参数编辑"
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="visible"
    width="30%"
    wrapClassName="sys-param"
  >
    <a-form>
      <a-row>
        <a-col v-if="param.type == 4" :span="24">
          <ImageUpload
            :label="param.name"
            decoration="image"
            :formItemLayout="null"
            ref="image"
          />
        </a-col>
        <a-col v-if="param.type == 3" :span="24">
          <a-form-item :label="param.name" >
            <RichText ref="RichText" :height="600" />
          </a-form-item>
        </a-col>
        <a-col v-if="param.type == 1" :span="24">
          <a-form-item :label="param.name" >
            <a-input-number style="width: 180px" v-model="value" />
          </a-form-item>
        </a-col>
        <a-col v-if="param.type == 2" :span="24">
          <a-form-item :label="param.name" >
            <a-input v-model="value" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-form-bottom-toolbar">
      <a-button :style="{ marginRight: '8px' }" @click="onClose">
        返回
      </a-button>
      <a-button type="primary" @click="saveForm(record)"> 保存 </a-button>
    </div>
  </a-drawer>
</template>
<script>
import RichText from '@/components/richtext/richtext-editor'
import ImageUpload from '@/components/image-upload/ImageUpload'
import { save } from '@/api/base/sysParam'

export default {
  name: 'SysParamEdit',
  components: { RichText, ImageUpload },
  data() {
    return {
      type: 1,
      visible: false,
      param: { value: null },
      value: null
    }
  },
  methods: {
    show(row) {
      this.param = row
      this.visible = true
      this.$nextTick(() => {
        if (row.type == 3) {
          console.info('row value', row.value)
          this.$refs.RichText.setContent(row.value)
        }
        if (row.type == 4) {
          this.$refs.image.setValue([row.value])
        } else {
          this.value = row.value
        }
      })
    },
    onClose() {
      this.param = { value: null }
      this.visible = false
    },

    saveForm() {
      let value = null
      if (this.param.type == 3) {
        value = this.$refs.RichText.getContent()
      } else if (this.param.type == 4) {
        value = this.$refs.image.getValue()[0]
      } else {
        value = this.value
      }
      if (!value) {
        this.loading = false
        this.$notification.error({
          message: '提示',
          description: '参数值不能为空',
          duration: 4
        })
        return
      }
      save({ id: this.param.id, value }).then(({ code }) => {
        if (code == 200) {
          this.$notification.success({
            message: '系统提示',
            description: '保存成功',
            duration: 4
          })
          this.$emit('onSuccess')
          this.onClose()
        }
      })
    }
  }
}
</script>