<template>
  <div class="height100 userDefined_attr_container">
    <div class="flexYbox height100">
      <ts-form :data="selectData" :rules="rules" style="height:100%;" v-if="selectData&&selectData.type" ref="xForm">
        <div slot="formCon">
          <interBase ref="interBase" v-if="selectData.type&&selectData.type!=='col'"></interBase>
          <interCol ref="interBase" v-else-if="selectData.type&&selectData.type=='col'"></interCol>
        </div>
      </ts-form>
       <tsEmpty v-else description="-请选中编辑区控件-" :imageStyle="{width:'80%',height:'200px'}">
      </tsEmpty>
    </div>
  </div>
</template>

<script>
import interBase from './definedInterPannel/interBase'
import interCol from './definedInterPannel/interCol'
export default {
  name: 'defined-inter-editor',
  components: {
    interBase,
    interCol
  },
  data() {
    return {
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      rules: {}
    }
  },
  created() {},
  mounted() {},
  methods: {},
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
