<template>
  <div id="app">
    <design
      v-if="type === 'design'"
      ref="design"
      :height="height"
      :formRenderJson="formRenderJson"
      :tableList="tableList"
      :dictTypeList="dictTypeList"
      :tableColumn="tableColumn"
      @setFormRenderJson="setFormRenderJson"
      @getTableCol="getTableCol"
    />
    <viewer v-if="type === 'viewer'" />
  </div>
</template>

<script>
import Vue from "vue";

import FcEditor from "@form-create/component-wangeditor";
import formCreate from "@form-create/element-ui"; // 动态表单 { maker }
formCreate.component("FcEditor", FcEditor);
Vue.use(formCreate);

import FcDesigner from "@form-create/designer"; // form-create
Vue.use(FcDesigner);

import axios from "axios";
Vue.prototype.$axios = axios;

import VueCodemirror from "vue-codemirror";
Vue.use(VueCodemirror);

// 加载基础ElementUI
import ElementUI from "element-ui";
Vue.use(ElementUI);
import "element-ui/lib/theme-chalk/index.css";

/* eslint-disable */
import Design from "./components/design";
import Viewer from "./components/viewer";

export default {
  name: "yx-form-create",
  components: {
    Design, Viewer
  },
  props: {
    height: {
      type: Number,
      default: 500
    },
    type: {
      type: String,
      default: 'viewer' // 类型 design、viewer
    },
    formRenderJson: {
      type: String,
      default: `{"rule":[{"type":"input","field":"iw21nbcgffyz1","title":"输入框","info":"","_fc_drag_tag":"input","hidden":false,"display":true},{"type":"switch","field":"v091nbcgfhdqw","title":"开关","info":"","_fc_drag_tag":"switch","hidden":false,"display":true},{"type":"upload","field":"iye1nbcgfiudf","title":"上传","info":"","props":{"action":"/api/tool/oss/upload"},"_fc_drag_tag":"upload","hidden":false,"display":true},{"type":"datePicker","field":"zky1nbcgfl7my","title":"日期选择器","info":"","_fc_drag_tag":"datePicker","hidden":false,"display":true},{"type":"colorPicker","field":"09o1nbcgfmhux","title":"颜色选择器","info":"","_fc_drag_tag":"colorPicker","hidden":false,"display":true},{"type":"fc-editor","field":"s4t1nbcgfo8to","title":"富文本框","info":"","_fc_drag_tag":"fc-editor","hidden":false,"display":true}],"config":{"form":{"formInDatabase":"","labelPosition":"right","size":"mini","labelWidth":"125px","hideRequiredAsterisk":false,"showMessage":true,"inlineMessage":false}}}`
    },
    tableList: {
      type: Array,
      default:() => []
    },
    dictTypeList: {
      type: Array,
      default:() => []
    },
    tableColumn: {
      type: Array,
      default:() => []
    },
  },
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
    setFormRenderJson(json) {
      this.$emit('setFormRenderJson', json)
    },
    // 获取表字段
    getTableCol(tableId){
      this.$emit('getTableCol', tableId)
    },
    setTableCol(column){
      this.$refs['design'].setTableCol(column);
    },
  }
};
</script>

<style lang="scss">
body {
  overflow: hidden;
  margin: 0;
  box-sizing: border-box;
}
#app {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: auto max-content;
}
body,
body * {
  /* 滚动条 */
  &::-webkit-scrollbar-track-piece {
    background-color: #fff; /*滚动条的背景颜色*/
    border-radius: 0; /*滚动条的圆角宽度*/
  }
  &::-webkit-scrollbar {
    width: 10px; /*滚动条的宽度*/
    height: 8px; /*滚动条的高度*/
  }
  &::-webkit-scrollbar-thumb:vertical {
    /*垂直滚动条的样式*/
    height: 50px;
    background-color: rgba(153, 153, 153, 0.5);
    border-radius: 4px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条的hover样式*/
    background-color: rgba(159, 159, 159, 0.3);
    border-radius: 4px;
  }
  &::-webkit-scrollbar-thumb:hover {
    /*滚动条的hover样式*/
    background-color: rgba(159, 159, 159, 0.5);
    border-radius: 4px;
  }
}
</style>
