<template>
  <div class="form_submit_wrapper">
    <a-form layout="inline" labelAlign="right">
      <a-form-item :label="config.status ? '开启' : '关闭'" :colon="false">
        <a-switch v-model="config.status" />
      </a-form-item>
    </a-form>
    <a-form v-if="config.status" style="marginTop:20px">
      <a-form-item>
        <a-radio-group buttonStyle="solid" v-model="config.type">
          <a-radio-button value="url">第三方链接</a-radio-button>
          <a-radio-button value="richText">自定义页面</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="跳转链接" :colon="false" v-if="config.linkUrl !== 'undefined' && config.type === 'url'">
        <a-input placeholder="请输入以http(s)://开头的第三方链接" v-model="config.linkUrl" />
      </a-form-item>
      <div class="edit_box" v-if="config.type === 'richText'">
        <div class="edit_header">
          <span>自定义提示页面(表单提交后的提示)</span>
          <span @click="resetRichText('afterSubmit')">恢复默认提示页</span>
        </div>
        <KEditor
          :style="`width:${editRecord.options.width}`"
          :record="editRecord"
          :parentDisabled="false"
          :activeKey="activeKey"
          :value="config.afterSubmitText || config.defaultAfterSubmitText"
          @change="editHandleChange($event, 'afterSubmitText')"
        />
        <PreviewBox title="表单已提交提示页" :content="config.afterSubmitText || config.defaultAfterSubmitText" />
      </div>
    </a-form>
  </div>
</template>
<script>
import KEditor from '../../KEditor'
import PreviewBox from './previewBox.vue'

export default {
  props: {
    config: {
      type: Object,
      required: true
    },
    activeKey: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      editRecord: {
        type: 'editor',
        label: '富文本',
        list: [],
        options: {
          height: 500,
          placeholder: '请输入',
          defaultValue: '',
          chinesization: true,
          hidden: false,
          disabled: false,
          showLabel: false,
          width: '100%'
        }
      }
    }
  },
  components: {
    KEditor,
    PreviewBox
  },
  methods: {
    editHandleChange(event, value) {
      console.log(event)
      this.config[value] = event
    },
    resetRichText(type) {
      const that = this
      this.$confirm({
        title: '恢复默认提示页',
        content: '恢复为默认后，当前修改的内容无法恢复',
        okText: '恢复默认',
        onOk() {
          that.config.afterSubmitText = that.config.defaultAfterSubmitText
        },
        onCancel() {}
      })
    }
  }
}
</script>
<style lang="less">
.form_submit_wrapper {
  width: 50%;
  min-width: 200px;
  padding: 0px 0 50px;
}
.edit_box {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
  position: relative;
  & > span {
    display: inline-block;
    padding: 10px 0;
  }
}
</style>
