<template>
  <div class="preview_wrapper">
    <a-radio-group buttonStyle="solid" v-model="device">
      <a-radio-button value="computer">电脑</a-radio-button>
      <a-radio-button value="phone">手机</a-radio-button>
    </a-radio-group>
    <div :class="{preview_form_wrapper:true, preview_form_wrapper_computer:device==='computer'}">
      <div class="form_noFormText" v-if="!jsonData.list.length">未添加表单</div>
      <div class="preview_form_content" v-else>
        <k-form-build :value="jsonData" @submit="handleSubmit" ref="KFormBuild" />
      </div>
      <jsonModel ref="jsonModel" />
    </div>
  </div>
</template>
<script>
/*
 * author kcz
 * date 2019-11-20
 */
import jsonModel from '../KFormDesign/module/jsonModal'

export default {
  name: 'KFormPreview',
  data() {
    return {
      visible: false,
      previewWidth: 850,
      device:'computer',
      // jsonData: {},
      timer: null
    }
  },
  props: {
    jsonData: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    jsonModel
  },
  watch: {
    jsonData: 'handleMessage'
  },
  updated() {},

  methods: {
    handleSubmit(p) {
      console.log('点击l')
      this.$refs.KFormBuild.getData()
        .then(res => {
          console.log(res, '获取数据成功')
          this.$refs.jsonModel.jsonData = res
          this.$refs.jsonModel.visible = true
        })
        .catch(err => {
          console.log(err, '获取数据失败')
        })
    },
    handleGetData() {
      this.$refs.KFormBuild.getData()
        .then(res => {
          console.log(res, '获取数据成功')
          this.$refs.jsonModel.jsonData = res
          this.$refs.jsonModel.visible = true
        })
        .catch(err => {
          console.log(err, '获取数据失败')
        })
    },
    handleCancel() {
      this.visible = false
    },
    handleMessage() {
      console.log('数据改变了')
    }
  }
}
</script>
<style lang="less" scoped>


::-webkit-scrollbar {
  width: 0px;
  height: 2px;
  background-color: transparent;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  // background-image: linear-gradient(135deg, #09f, #3c9);
}
</style>
