<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 Common from '../common/Common.js';
import { CssUtil,Notify } from 'pc-component-v3';
import JsUtil from '../common/JsUtil';

export default defineComponent({
  name: 'DashboardPage',

  components: {},
  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 jsUrl = '' + '/DictionaryBase/Dashboard/BASE/2020080401.js';
          //const jsUrl = '/DictionaryAsset/Dashboard/EAM/20220309_095250.js';
          const componentName = item.componentName;

          if (item.cssUrl != null && item.cssUrl != undefined) {
            CssUtil.dynamicLoadCss(Common.getHostPageBaseURL() + item.cssUrl, componentName);
          }

          let jsUrl = null;
          if (item.jsUrl != null && item.jsUrl != undefined) {
            jsUrl = item.jsUrl;
            let promise = JsUtil.dynamicLoadJsModule(Common.getHostPageBaseURL() + jsUrl);
            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,
                };

                console.log(_self.dashboardArray);
                _self.dashboardArray.push(item1);
              },
              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>