<template>
  <div class="form_limit_wrapper">
    <a-form layout="inline" labelAlign="right" :colon="false">
      <a-form-item label="设置表单开始 / 结束时间 ">
        <a-switch v-model="config.timeStatus" />
      </a-form-item>
    </a-form>

    <a-form labelAlign="right" v-if="config.timeStatus">
      <!--开始时间 start-->
      <a-form-item>
        <kCheckbox v-if="typeof config.setBeginTime !== 'undefined'" v-model="config.setBeginTime" label="开始时间" />
      </a-form-item>
      <a-form-item>
        <KDatePicker
          v-if="config.setBeginTime"
          :parentDisabled="false"
          :record="record"
          :value="config.begin_time"
          @change="beginTimeHandleChange"
        />
      </a-form-item>

      <div class="edit_box" v-if="config.setBeginTime">
        <div class="edit_header">
          <span>自定义提示页面(未达到开始时间的提示)</span>
          <span @click="resetRichText('beforeBegin')">恢复默认提示页</span>
        </div>
        <KEditor
          ref="KEditor"
          :style="`width:${editRecord.options.width}`"
          :record="editRecord"
          :parentDisabled="false"
          :value="config.beforeBeginText || config.defaultBeforeBeginText"
          activeKey="77"
          @change="editHandleChange($event, 'beforeBeginText')"
        />
        <PreviewBox title="表单未开始提示页" :content="config.beforeBeginText || config.defaultBeforeBeginText" />
      </div>
      <!--开始时间 end-->

      <!--结束时间 start-->
      <a-form-item>
        <kCheckbox v-if="typeof config.setEndTime !== 'undefined'" v-model="config.setEndTime" label="结束时间" />
      </a-form-item>
      <KDatePicker
        v-if="config.setEndTime"
        :parentDisabled="false"
        :record="record"
        :value="config.end_time"
        @change="endTimeHandleChange"
      />
      <div class="edit_box" v-if="config.setEndTime">
        <div class="edit_header">
          <span>自定义提示页面(表单已过结束时间的提示)</span>
          <span @click="resetRichText('afterEnd')">恢复默认提示页</span>
        </div>
        <KEditor
          ref="KEditor"
          :style="`width:${editRecord.options.width}`"
          :record="editRecord"
          :parentDisabled="false"
          :value="config.afterEndText || config.defaultAfterEndText"
          activeKey="77"
          @change="editHandleChange($event, 'afterEndText')"
        />
        <PreviewBox title="表单已结束提示页" :content="config.afterEndText || config.defaultAfterEndText" />
      </div>
      <!--结束时间 end-->
    </a-form>

    <a-form layout="inline" labelAlign="right" :colon="false">
      <a-form-item label="每个微信只能提交一次表单">
        <a-switch v-model="config.singleSubmit" />
      </a-form-item>
    </a-form>
    <a-form layout="inline" labelAlign="right" :colon="false">
      <a-form-item label="只能在微信环境下打开表单">
        <a-switch v-model="config.onlyWx" />
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import kCheckbox from '../../KCheckbox/index.vue'
import KDatePicker from '../../KDatePicker'
import KEditor from '../../KEditor'
import PreviewBox from './previewBox.vue'

export default {
  props: {
    config: {
      type: Object,
      required: true
    },
    activeKey: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      record: {
        type: 'date',
        label: '日期选择框',
        options: {
          width: '50%',
          defaultValue: '',
          range: false,
          showTime: true,
          disabled: false,
          hidden: false,
          clearable: true,
          placeholder: '选择日期时间',
          format: 'YYYY-MM-DD HH:mm'
        },
        model: 'date_1655275578666',
        key: 'date_1655275578666'
      },
      editRecord: {
        type: 'editor',
        label: '富文本',
        list: [],
        options: {
          height: 500,
          placeholder: '请输入',
          defaultValue: '',
          chinesization: true,
          hidden: false,
          disabled: false,
          showLabel: false,
          width: '100%'
        }
      }
    }
  },
  components: {
    kCheckbox,
    KDatePicker,
    KEditor,
    PreviewBox
  },
  watch: {
    config(val) {
      console.log(val)
    }
  },
  methods: {
    beginTimeHandleChange(e) {
      console.log(e)
      this.config.begin_time = e
    },
    endTimeHandleChange(e) {
      console.log(e)
      this.config.end_time = e
    },
    editHandleChange(event, value) {
      console.log(event)
      console.log(value)
      this.config[value] = event
    },
    resetRichText(type) {
      const that = this
      this.$confirm({
        title: '恢复默认提示页',
        content: '恢复为默认后，当前修改的内容无法恢复',
        okText:'恢复默认',
        onOk() {
          if (type === 'beforeBegin') {
            that.config.beforeBeginText = that.config.defaultBeforeBeginText
          } else if (type === 'afterEnd') {
            that.config.afterEndText = that.config.defaultAfterEndText
          }
        },
        onCancel() {}
      })
    }
  }
}
</script>
<style scope lang="less">
.form_limit_wrapper {
  width: 50%;
  padding: 0px 0 50px;
}
.edit_box {
  margin-top: 30px;
  width: 100%;
  .edit_header {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > span:nth-child(2) {
      display: inline-block;
      color: #4176ff;
      cursor: pointer;
    }
  }
}
</style>
