<template>
  <div v-if="permission != 'n'">
    <template v-if="loadOver">
      <component
        :is="componentName"
        :ref="vueObj.alias"
        :data="data"
        :permission="permission"
        :vue-obj="vueObj"
        :component="component"
        :index="index"
        :item="item"
      ></component>
    </template>
  </div>
</template>

<script>
  import Vue from 'vue'
  import permission from '@/mixins/permission.js'
  const { Base64 } = require('js-base64')

  export default {
    name: 'HtCustomComponent',
    componentName: 'HtCustomComponent',
    mixins: [permission],
    props: ['data', 'permission', 'ccAlias',"item","index"],
    data() {
      return {
        loadOver: false,
        vueObj: {},
        component: {},
        componentName: '',
      }
    },
    mounted() {
      // this.init();
      this.$requestConfig
        .request({
          url:
            '${form}/formCustomComponent/v1/getByAlias?alias=' + this.ccAlias,
          method: 'get',
        })
        .then((resp) => {
          this.vueObj = resp
          this.init()
        })
    },
    created() {
      //根据自定义组件id查询组件对象
      // this.$http
      //   .get('${form}/formCustomComponent/v1/getByAlias?alias=' + this.ccAlias)
      //   .then((resp) => {
      //     this.vueObj = resp.data
      //     this.init()
      //   })
      // this.$requestConfig
      //   .getFormCustomComponentByAlias(this.ccAlias)
      //   .then((resp) => {
      //     this.vueObj = resp
      //     this.init()
      //   })
    },
    methods: {
      init() {
        //解析jscode;
        this.component = {}
        if (this.vueObj.jsCode) {
          let jsCode = Base64.decode(this.vueObj.jsCode, 'utf-8')
          let parseJsCode = function () {
            return eval('(function(){return {' + jsCode + '} })()')
          }
          this.component = parseJsCode()
        }

        this.component.props = ['data', 'permission', 'vueObj', 'component']
        if (this.vueObj.template) {
          this.component.template = Base64.decode(this.vueObj.template, 'utf-8')
        } else {
          this.component.template = '<div></div>'
        }
        if (this.vueObj.dataCode) {
          let dataCodeStr = Base64.decode(this.vueObj.dataCode, 'utf-8')
          let data = eval('(' + dataCodeStr + ')')
          this.component.data = function () {
            return data
          }
        }

        this.componentName = this.ccAlias + '-component'
        //加载动态组件
        Vue.component(this.componentName, this.component)
        //加载完成后显示
        this.loadOver = true
      },
    },
  }
</script>
