<!--
 * @Description: tab操作区域
 -->
<template>
  <div class="seniorSetting_wrapper">
    <a-tabs
      default-active-key="1"
      tab-position="left"
      size="large"
      type="line"
      v-model="activeKey"
    >
      <!--基础设置 start-->
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="setting" />
          基础设置
        </span>
        <Header title="基础设置" desc="设置表单内/外部名称" />
        <BasicSetting :config="config.baseOptions" />
      </a-tab-pane>
      <!--基础设置 end-->

      <!--基础设置 start-->
      <a-tab-pane key="2" :force-render="false">
        <span slot="tab">
          <a-icon type="setting" />
          答题限制
        </span>
        <Header title="答题限制" desc="设置表单开始/结束时间、表单提交限制" />
        <LimitSetting :config="config.limitOptions" :activeKey="activeKey" />
      </a-tab-pane>
      <!--基础设置 end-->

      <!--转发/分享 start-->
      <a-tab-pane key="3">
        <span slot="tab">
          <a-icon type="share-alt" />
          转发/分享
        </span>
        <Header title="转发/分享" desc="在微信好友、朋友圈的分享中自定义分享图片及文案，让分享更有效！" />
        <ShareSetting :config="config.shareOptions" />
      </a-tab-pane>
      <!--转发/分享 end-->

      <!--隐私条款 start-->
      <a-tab-pane key="4">
        <span slot="tab">
          <a-icon type="lock" />
          隐私条款
        </span>
        <Header title="隐私条款" desc="完整、清晰地描述用户信息的收集、保存、使用" />
        <PolicySetting
          :config="config.policyOptions"
          :activeKey="activeKey"
        />
      </a-tab-pane>
      <!--隐私条款 end-->

      <!--表单提交后 start-->
      <a-tab-pane key="5">
        <span slot="tab">
          <a-icon type="file-done" />
          提交表单后
        </span>
        <Header title="提交表单后" desc="用户提交表单后展示的页面 (关闭则跳转到默认提示页面)" />
        <SubmittedSetting
          :config="config.afterSubmitOptions"
          :activeKey="activeKey"
        />
      </a-tab-pane>
      <!--表单提交后 end-->
    </a-tabs>
  </div>
</template>
<script>
import Header from './module/header.vue'
import BasicSetting from './module/basicSettings.vue'
import ShareSetting from './module/shareSetting.vue'
import SubmittedSetting from './module/submitSetting.vue'
import LimitSetting from './module/limitSetting.vue'
import PolicySetting from './module/policySetting.vue'

export default {
  name: 'KFormSeniorSettings',
  data() {
    return {
      activeKey: '1',
    }
  },
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  components: {
    Header,
    BasicSetting,
    ShareSetting,
    SubmittedSetting,
    LimitSetting,
    PolicySetting
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.form_wrapper {
  width: 30%;
  padding: 0px 0 50px;
}
</style>
