<template>
  <div class="" id="content" style="height:100%" v-show="showFlag">
    <img id="wel" class="begin_img" src="../../assets/images/begin.png" alt="" v-if="noWgt">
    <!--  <el-tabs type="card" class="index"
               @tab-click="tabClick"
               closable
               @tab-remove="removeTab"
               v-model="tabActiveName">
        <el-tab-pane style="margin-left: 20px;" :closable="valueFalse" label="首页">
          <img class="begin_img" src="../../assets/images/begin.png" alt="">
        </el-tab-pane>
        <el-tab-pane v-for="(tab,index) in routeCards"
                     :name="tab.path"
                     :closable="valueTrue"
                     style="margin-left: 20px;"
                     :label="tab.label">
          <legacy></legacy>
        </el-tab-pane>
      </el-tabs> -->
    <div id="wdgPage" v-if="!noWgt">
      <div class="u-container-fluid u-widget-bg" id="firstPage">
        <div class="u-row bg-grey-50">
          <div class="u-col-12">
            <el-tabs v-model="activeName" v-show="pages.length >1"  @tab-click="activeNav">
              <el-tab-pane v-for="item in pages" @click="activeNav(item)" :label="item.displayName" :name="item.name"></el-tab-pane>
            </el-tabs>
          </div>
          <!--
          <div class="wb-tab" v-show="pages.length >1">
            <a v-for="item in pages" @click="activeNav(item)" :class="{wbactive: activeName=item.name}" class="u-tabs__tab wbactive" v-text="item.displayName"></a>
          </div>
          -->

          <div class="u-col-12">
            <div id="widgetBox"><div id="widgetMount"></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import newLabel from './new-label.vue';
  // import test from './test.vue';
  // import menu from './menuData.json';
  // import aaa from '../baseservice/index.vue';
  // import tableListPage from '../template/add_page1.vue';
  // import legacy from '../legacy.vue';
  var RBOX = 'widgetBox';
  export default {
    data() {
      return {
        pages: [],
        activeName: 'second',
        valueTrue: true,
        valueFalse: false,
        multipleSelection: [],
        routeCards: [],
        tabActiveName: '',
        map: [],
        list: this.menuList,
        noWgt: false,
        showFlag: false
      };
    },
    props: ['menuList'],
    // components: {
    //   newLabel
    // },
    methods: {
      activeNav: function(tab, event) {
        var item = this.pages[tab.index];
        this.activeName = item.name;
        this.renderwidgetBox(item);
      },
      renderwidgetBox: function(item){
        if (!item.urltype) return;
        if (item.urltype == "view") {
          var module = "/wbalone/data:layout/" + item.location;
          requirejs.undef(module);
          window.require([ module ], function (module) {
              if(module){
                $('#' + RBOX).html('<div id="widgetMount"></div>');
                module.init({'element': RBOX, 'mountElement': 'widgetMount'});
                ($(".u-row.msg-head").find('a')[0]) && ($(".u-row.msg-head").find('a')[0].href = 'javascript:;');
              }else {
                window.location.href = "/ap/login.html";
              }
          });
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      tabClick() {
        console.log(this);
        this.$parent.$router.push(this.tabActiveName);
      },
      getRouteMap(list) {
        var tmp = {};
        var getChild = function(array) {
          array.forEach((v) => {
            if (v.children) {
              getChild(v.children);
            } else {
              tmp[v.path] = v;
            }
          });
        };
        getChild(list);
        return tmp;
      },
      removeTab(targetName) {
        const tabs = this.routeCards;
        var activeName = this.tabActiveName;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.path === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.path;
              }
            }
          });
        }

        this.tabActiveName = activeName;
        this.routeCards = tabs.filter(tab => tab.path !== targetName);
        this.$parent.$router.push(this.tabActiveName);
      },
    },
    created() {
      this.getWidgets = this.$http({
        url: window.ctxs.ap + '/appmenumgr/indexQuery',
        method: 'get'
      });
      this.getWidgetsForUser = this.$http({
        url: window.ctxs.ap + '/appmenumgr/indexQueryV2',
        method: 'get'
      });
    },
    mounted() {
      var oThis = this;

      this.$http.all([this.getWidgets, this.getWidgetsForUser])
        .then(this.$http.spread((res, response) => {
          if (response.data && response.data.status === 1) {
            var userPages = response.data.data;
            if (userPages.length > 0) {
              userPages.forEach((v) => {
                var vm = v;
                vm.displayName = '我的工作台';
              });
              if (userPages[0].menustatus !== '未创建该用户的用户布局') {
                oThis.pages = oThis.pages.concat(userPages);
              }
              if (oThis.pages[0] && oThis.pages[0].urltype) {
                // $("#firstPage .wb-tab>a").eq(0).addClass(' wbactive');
                oThis.activeName = oThis.pages[0].name;
                oThis.renderwidgetBox(oThis.pages[0]);
              } else {
                this.noWgt = true;
                $('#wdgPage').css('display', 'none');
                $('#wel').css('display', 'block');
              }
            }
          }
          this.showFlag = true;
          if (res.data && res.data.status === 1) {
            var pages = res.data.data;
            window.localStorage.setItem('roleList', JSON.stringify(pages));
            if (pages.length > 0) {
              this.noWgt = false;
              $('#wdgPage').css('display', 'block');
              $('#wel').css('display', 'none');
              pages.forEach((v) => {
                var vm = v;
                if (vm.displayName === undefined) {
                  vm.displayName = '';
                }
              });
              oThis.pages = oThis.pages.concat(pages);
              if (oThis.pages[0] && oThis.pages[0].urltype) {
                // $("#firstPage .wb-tab>a").eq(0).addClass(' wbactive');
                oThis.activeName = oThis.pages[0].name;
                oThis.renderwidgetBox(oThis.pages[0]);
              }
            } else {
              this.noWgt = true;
              $('#wdgPage').css('display', 'none');
              $('#wel').css('display', 'block');
            }
          } else {
            this.showFlag = true;
          }
        })).catch((error) => {
        this.showFlag = true;
          this.$message.error(error.data.msg);
        });

//      // 获取角色布局
//      this.getWidgets.then((res) => {
//
//      }).catch((error) => {
//        this.showFlag = true;
//        this.$message.error(error.data.msg);
//      });
//
//      // 获取用户布局
//      this.getWidgetsForUser.then((response) => {
//
//      }).catch((error) => {
//        this.$message.error(error.data.msg);
//      });
      $('#main-right').attr('is-reload', '');
    }
  };
</script>

<style scoped>
  #firstPage {
    padding-bottom: 80px;
    margin: 0;
  }
  .content-margin {
    margin-top: 31.5px;
  }
  .content-margin2 {
    margin-top: 51.5px;
    color: #71787E;
  }
  .card-content p {
    font-size: 16px;
    line-height: 2em;
    text-align: left;
  }

  .card-content .datetime {
    color: #9FA9BA;
    font-size: 14px;
    line-height: 2em;
    text-align: left;
    font-weight: 100;
  }
  .el-tabs__nav {
    /* margin-left: 20px; */
  }
  .nav-business {
    color: #393C3E;
    font-size: 14px;
  }

  .nav-business .el-tabs__active-bar {
    background-color: #E60012;
    height: 2px;
  }

  .nav-business .el-tabs__item {
    padding: 0 24px;
    line-height: 31px;
    height: 31px;
  }

  .nav-business .is-active {
    color: #393C3E;
  }

  .nav-business .el-tabs__header {
    margin: 0;
  }

  .day-business {
    box-sizing: border-box;
    width: 1080px;
    height: 130px;
    margin-top: -12px;
    border: 1px solid rgba(230, 234, 238, 1);
    border-top: none;
    list-style: none;
    padding: 24px 30px 30px;
    color: #71787E;
    margin-bottom: 0;
  }



  .day-business i {
    font-style: normal;
    font-size: 30px;
    color: #393C3E;
  }


  .day-business li {
    text-align: center;
    display: inline-block;
    padding: 27px 50px;
    border-right: 1px solid rgba(230, 234, 238, 1);
  }



  .day-business li:last-child {
    border-right: none;
  }



  .day-business span {
    font-size: 30px;
    color: #E60012;
  }

  .el-tabs>div {
    margin-left: 20px !important;

  }
  .font14 {
    font-size: 14px!important;
    color: #71787E;
  }

  .font30 {
    font-size: 30px!important;
    color: #71787E;
  }

  .begin_img {
    display: block;
    margin: 50px auto;
  }
</style>


<style>
  .ui-grid div[data-ul*="file:"] {
    margin-top: 16px;
  }
  .u-row.bg-grey-50 {
    background-color: transparent!important;
  }
  .u-row{
    padding:0!important;
  }
  .u-row .widgetBox {
    margin-top: 16px;
    margin-right: 16px;
  }
  .u-row .ui-grid:last-child .widgetBox {
    margin-right: 0;
  }
  .u-row .el-tabs__header {
    margin: 0!important;
  }
</style>
