<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 label="引导文案" :colon="false" v-if="config.guideText !== 'undefined'">
        <a-input placeholder="请输入" v-model="config.guideText" />
      </a-form-item>
      <a-form-item label="隐私条款文案" :colon="false" v-if="config.mainText !== 'undefined'">
        <a-input placeholder="请输入" v-model="config.mainText" />
      </a-form-item>
      <div class="edit_box">
        <span>自定义隐私条款内容</span>
        <KEditor
          ref="KEditor"
          :style="`width:${editRecord.options.width}`"
          :record="editRecord"
          :parentDisabled="false"
          :value="config.policyRichText"
          :activeKey="activeKey"
          @change="editHandleChange($event, 'policyRichText')"
        />
      </div>
    </a-form>
  </div>
</template>
<script>
import KEditor from '../../KEditor'

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
  },
  methods: {
    editHandleChange(event, value) {
      this.config[value] = event
    }
  }
}
</script>
<style lang="less">
.form_submit_wrapper {
  width: 50%;
  padding: 0px 0 50px;
}
.edit_box {
  margin-top: 30px;
  width: 100%;

  & > span {
    display: inline-block;
    padding: 10px 0;
  }
}
</style>
