<template>
  <div>
    <template v-for="(item, index) in dashboardArray" :key="item.no">
      <component
        :is="item.componentName == undefined ? '' : item.componentName"
        :dashboard="item" @collapse="collapse($event)" @remove="remove(index)"
      />
    </template>
  </div>
</template>

<script>

import { defineComponent } from 'vue';
import { Notify, Uuid } from 'pc-component-v3';


import Common from '../common/Common.js';
//import AssetDashboardClient from '../../dashboard/eam/AssetDashboardClient.vue';
//import AssetDashboardOrg from '../../dashboard/eam/AssetDashboardOrg.vue';

export default defineComponent({
	
  name: 'DashboardPage',
	
  components: {
    //AssetDashboardClient,
    //AssetDashboardOrg,
  },
  data() {
    return {
      dashboardArray: [],
      moduleDtos: [],
    };
  },

  mounted: function() {
    this.loadData();
  },

  beforeUnmount: function(){
    //if(this.dashboardArray != null && this.dashboardArray.length > 0){
    //  this.dashboardArray.forEach(item => {
    //    CssUtil.dynamicUnloadCss(item.componentName);
    //  });
    //}
  },

  methods: {

    loadData() {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('dashboardResource/listDashBoard'),
        type: 'get',
        dataType: 'json',
        beforeSend: function(request) {
          Common.addTokenToRequest(request);
        },
        success: function(data) {
          _self.dynamicInit(data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    collapse: function(params) {
      var contentElement = params[0];
      contentElement.slideToggle();
    },

    remove: function(index) {
      var _self = this;
      _self.dashboardArray.splice(index, 1);
    },

    /**
		 * 动态初始化仪表盘
		 */
    dynamicInit: function(dashboards) {
      let _self = this;

      if(dashboards != null && dashboards.length > 0) {
        dashboards.forEach(function(item) {
          console.log(item);
          const componentName = item.componentName;

          let vueName = null;
          if(item.vueName != null && item.vueName != undefined) {
            vueName = item.vueName;
            let promise = null;
            
            promise = new Promise((resolve, reject) => {
              // import('../../../../Dictionary' + vueName).then(remoteComponent => {
              //   resolve(remoteComponent);
              // }).catch(error => {
              //   reject(error);
              // });
            });
           
            promise.then(remoteComponent => {
              console.log('remoteComponent：' + remoteComponent.default.name);
              if(componentName !== remoteComponent.default.name){
                let errorMessage = '数据字典-仪表盘中部件名称定义的是' + componentName + '，但是程序中name定义的是' + remoteComponent.default.name + '，两者必须相同。';
                console.error(errorMessage);
                Notify.error('仪表盘定义错误', errorMessage, false);
              }
              window.app.component(componentName, remoteComponent.default);
              var item1 = {
                no: componentName,
                componentName: componentName,
                sortNo: item.sortNo,
              };
              
              console.log(_self.dashboardArray);
              _self.dashboardArray.push(item1);

              function sortFunction(a, b){
                return a.sortNo - b.sortNo;
              }

              _self.dashboardArray.sort(sortFunction);
            }, errorData => {
              console.error(errorData);
            });
          }
        });
      }
    },

  },
});

</script>

<style scoped>
	
ul.dropdown-menu>li {
	padding-left: 1em;
}

ul.dropdown-menu>li:hover {
	background-color: gray;
	cursor: pointer;
	color: white;
}

div.dropdown {
	margin-bottom: 20px;
}
</style>