<template>
  <a-config-provider :locale="locale">
    <a-form
      v-if="typeof value.list !== 'undefined' && typeof value.config !== 'undefined'"
      class="k-form-build k-form-build-bottom-space"
      :layout="value.config.layout"
      :hideRequiredMark="value.config.themeSetting.hideRequiredMark"
      :form="form"
      @submit="handleSubmit"
      :style="{
        backgroundColor: value.config.themeSetting.backgroundColor,
        paddingTop: `${value.config.themeSetting.marginTop}px`,
        backgroundImage: 'url(' + value.config.themeSetting.backgroundImage + ')'
      }"
    >
      <buildBlocks
        ref="buildBlocks"
        @handleReset="reset"
        v-for="(record, index) in value.list"
        :record="record"
        :dynamicData="dynamicData"
        :config="config"
        :disabled="disabled"
        :formConfig="value.config"
        :key="index"
        :form="form"
        @change="handleChange"
      />

      <!--隐私政策-->
      <div class="form_policy_text" v-if="value.config.seniorSetting.policyOptions.status">
        <a-checkbox v-model="policyStatus"> </a-checkbox>
        <span style="marginLeft:10px">
          {{ value.config.seniorSetting.policyOptions.guideText }}
        </span>
        <span class="policyText" @click="openPolicyModal($event)">
          《{{ value.config.seniorSetting.policyOptions.mainText }}》</span
        >
      </div>
      <!--隐私政策弹窗-->
      <PolicyModal
        :visible="isShowPolicyModal"
        @closeModal="closeModal"
        :policyOptions="value.config.seniorSetting.policyOptions"
      />
      <k-submit-button :text="value.config.themeSetting.submitButtonText" @handleSubmit="handleSubmit" />
    </a-form>
  </a-config-provider>
</template>
<script>
/*
 * author xiang.li
 * date 2019-11-20
 * description 将json数据构建成表单
 */
import buildBlocks from './buildBlocks'
import PolicyModal from './components/policyModal'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
// import moment from "moment";
export default {
  name: 'KFormBuild',
  data() {
    return {
      locale: zhCN,
      policyStatus: false,
      isShowPolicyModal: false,
      form: this.$form.createForm(this),
      scrollTop: 0
    }
  },
  // props: ["value", "dynamicData"],
  props: {
    value: {
      type: Object,
      required: true
    },
    dynamicData: {
      type: Object,
      default: () => ({})
    },
    config: {
      type: Object,
      default: () => ({})
    },
    disabled: {
      type: Boolean,
      default: false
    },
    outputString: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    buildBlocks,
    PolicyModal
  },
  methods: {
    // 提交按钮触发，并触发submit函数，返回getData函数
    handleSubmit(e) {
      e.preventDefault()
      this.$emit('submit', this.getData)
    },

    // 重置表单
    reset() {
      this.form.resetFields()
    },

    // 提交函数，提供父级组件调用
    async getData() {
      return new Promise((resolve, reject) => {
        try {
          this.form.validateFields((err, values) => {
            if (err) {
              reject(err)
              return
            }
            this.$refs.buildBlocks.forEach(item => {
              if (!item.validationSubform()) {
                reject(err)
                return
              }
            })
            if (this.outputString) {
              // 需要所有value转成字符串
              for (const key in values) {
                const type = typeof values[key]
                if (type === 'string' || type === 'undefined') {
                  continue
                } else if (type === 'object') {
                  values[key] = `k-form-design#${type}#${JSON.stringify(values[key])}`
                } else {
                  values[key] = `k-form-design#${type}#${String(values[key])}`
                }
              }
              resolve(values)
            } else {
              resolve(values)
            }
            // })
          })
        } catch (err) {
          reject(err)
        }
      })
    },
    setData(json) {
      return new Promise((resolve, reject) => {
        try {
          if (this.outputString) {
            // 将非string数据还原
            for (const key in json) {
              if (!json[key].startsWith('k-form-design#')) {
                continue
              }
              const array = json[key].split('#')
              if (array[1] === 'object') {
                json[key] = JSON.parse(array[2])
              } else if (array[1] === 'number') {
                json[key] = Number(array[2])
              } else if (array[1] === 'boolean') {
                json[key] = Boolean(array[2])
              }
            }
            this.form.setFieldsValue(json)
          } else {
            // 将json中数组形式的字符串还原，例如时间
            for (const key in json) {
              if (json[key].indexOf('[') > -1) {
                json[key] = JSON.parse(json[key])
              }
            }
            this.form.setFieldsValue(json)
          }
        } catch (err) {
          reject(err)
        }
      })
    },

    // 批量设置某个option的值
    setOptions(fields, optionName, value) {
      fields = new Set(fields)

      // 递归遍历控件树
      const traverse = array => {
        array.forEach(element => {
          if (fields.has(element.model)) {
            element.options[optionName] = value
          }
          if (element.type === 'grid') {
            // 栅格布局
            element.columns.forEach(item => {
              traverse(item.list)
            })
          } else if (element.type === 'card') {
            // 卡片布局
            traverse(element.list)
          } else if (element.type === 'batch') {
            // 动态表格
            traverse(element.list)
          }
          if (element.type === 'table') {
            // 表格布局
            element.trs.forEach(item => {
              item.tds.forEach(val => {
                traverse(val.list)
              })
            })
          }
        })
      }
      traverse(this.value.list)
    },
    // 隐藏表单字段
    hide(fields) {
      this.setOptions(fields, 'hidden', true)
    },
    // 显示表单字段
    show(fields) {
      this.setOptions(fields, 'hidden', false)
    },
    // 禁用表单字段
    disable(fields) {
      this.setOptions(fields, 'disabled', true)
    },
    // 启用表单字段
    enable(fields) {
      this.setOptions(fields, 'disabled', false)
    },
    handleChange(value, key) {
      // 触发change事件
      this.$emit('change', value, key)
    },

    //打开隐私政策弹窗
    openPolicyModal(e) {
      this.isShowPolicyModal = true
      this.scrollTop = document.querySelector('.preview_form_wrapper').scrollTop
      document.querySelector('.preview_form_content').style.overflow = 'hidden'
    },

    //关闭隐私政策弹窗
    closeModal(status) {
      document.querySelector('.preview_form_content').style.overflow = ''
      document.querySelector('.preview_form_wrapper').scrollTop = this.scrollTop
      if (status) {
        this.policyStatus = true
      }
      this.isShowPolicyModal = false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setData(this.defaultValue)
    })
  }
}
</script>
<style>


</style>
