<template>
  <a-drawer
    :width="1000"
    :visible="visible"
    :title="id ? '编辑服务项' : '新增服务项'"
    @close="close"
  >
    <a-form :form="form" layout="vertical">
      <a-row>
        <a-form-item :label="`服务大类：  ${categoryName}`"> </a-form-item>
        <a-col :span="11">
          <a-form-item label="名称">
            <a-input v-decorator="['serviceName', {rules: [{required: true, message: '请填写名称'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :span="11" :offset="1">
          <a-form-item label="次级标题">
            <a-input v-decorator="['description', {rules: [{required: true, message: '请填写标题'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <ImageUpload
            label="图片"
            decoration="img"
            :formItemLayout="null"
            :required="true"
            ref="image"
            :form="form"
          />
        </a-col>
        <a-col :span="5" :offset="1">
          <ImageUpload
            label="详情图片"
            decoration="detailImg"
            :formItemLayout="null"
            :required="true"
            ref="detailImg"
            :form="form"
          />
        </a-col>
        <a-col :span="11" :offset="1">
          <a-form-item label="排序">
            <a-input-number v-decorator="['sequence']" />
          </a-form-item>
        </a-col>
        <a-col :span="23">
          <a-form-item label="服务详情">
            <RichText ref="RichText" :height="900" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-form-bottom-toolbar">
      <a-button :style="{ marginRight: '8px' }" @click="close"> 取消 </a-button>
      <a-button type="primary" v-if="hasPerm('SYS0210101.EDIT')" @click="submit"> 保存 </a-button>
    </div>
  </a-drawer>
</template>
<script>
import ImageUpload from '@/components/image-upload/ImageUpload'
import { saveOrUpdateSubClass, getSubDetails } from '@/api/serv'
import RichText from '@/components/richtext/richtext-editor'

export default {
  name: 'SubClassEdit',
  components: { ImageUpload, RichText },
  props: { success: Function },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      id: null,
      categoryId: null,
      categoryName: ''
    }
  },
  methods: {
    show({ id, categoryId, categoryName }) {
      this.id = id
      this.categoryId = categoryId
      this.categoryName = categoryName
      this.visible = true
      if (id) {
        getSubDetails(this.id).then(({ data }) => {
          this.form.setFieldsValue(data)
          this.$refs.image.setValue([data.img])
          this.$refs.detailImg.setValue([data.detailImg])
          this.$refs.RichText.setContent(data.textDescription)
        })
      }
    },
    close() {
      this.id = null
      this.categoryId = null
      this.categoryName = ''
      this.$refs.image.reset()
      this.$refs.detailImg.reset()
      this.form.resetFields()
      this.$refs.RichText.clear()
      this.visible = false
    },
    submit() {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        const reqData = {
          ...values,
          img: this.$refs.image.getValue()[0],
          detailImg: this.$refs.detailImg.getValue()[0],
          id: this.id,
          categoryId: this.categoryId,
          textDescription: this.$refs.RichText.getContent()
        }
        saveOrUpdateSubClass(reqData).then(({ code }) => {
          if (code == 200) {
            this.$message.success('保存成功')
            this.close()
            this.success()
          }
        })
      })
    }
  }
}
</script>