<template>
  <a-card :bordered="false" title="新增荣誉展示栏">
    <template slot="extra">
      <a-button type="primary" @click="goback">返回</a-button>
      <a-button type="primary" @click="save">保存</a-button>
    </template>

    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item ref="title" label="标题" prop="title" :wrapper-col="{ span: 18 }">
            <a-input v-model="form.title" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col>
          <a-form-model-item
            ref="content"
            label="详细内容"
            prop="content"
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 21 }">
            <!-- <a-textarea :autoSize="{ minRows: 3, maxRows: 10 }" v-model="form.content"/> -->
            <DbUeditor v-model="form.content" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item label="封面图">
            <db-upload v-model="fileList" type="img" ></db-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

  </a-card>
</template>

<script>
import { honorDetail, honorAddOrUpdate } from '@/api/honor/honor'
import DbUpload from '@/components/DbUpload/DbUpload.vue'
import DbUeditor from '@/components/DbUeditor/index.vue'
export default {
  props: {
    id: {
      type: String,
      default: undefined
    }
  },
  components: {
    DbUeditor,
    DbUpload
  },
  data () {
    return {
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 18
      },
      form: {
        id: '',
        title: '',
        content: ''
      },
      fileList: [],
      timeShow: true,
      classHourShow: true,
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }]
        // content: [{ required: true, message: '请输入详细内容', trigger: 'change' }]
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.editDetail()
    },
    editDetail () {
      const id = this.$route.query.id
      if (!id) {
        return
      }
      honorDetail({
        id: id
      }).then(data => {
        console.log(data)
        const form = data.data
        this.form = form

        this.fileList = JSON.parse(form.files)
      })
    },
    save () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const { form } = this
          form.files = JSON.stringify(this.fileList)
          honorAddOrUpdate(form).then(res => {
            if (res.code === 200) {
              this.$message.success('保存成功')
              this.onCancel()
            } else {
              this.$message.error('操作失败：' + res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    onCancel () {
      this.$refs.ruleForm.resetFields()
      delete this.form.id
      this.goback()
    },
    // 返回 按钮
    goback () {
      this.$router.push({ path: '/honor/list',
        query: {
        }
      })
    }
  }
}
</script>

<style></style>
