<template>
  <div>
      <!-- <draggable v-model="list"@start="drag=true" @end="drag=false"> -->
        <div class="cardInfo">
         <div class="card-box" v-for="(item, index) in groupList" :key="index">
           <header class="card-name">
             {{item.label}}
           </header>
           <draggable v-model="item.children" @start="drag=true" @end="drag=false" class="dragCard">
              <!--<router-link tag="div" :to="{path:child.path,query:{url: child.url}}" v-for="(child, index) in item.children" :key="index" style="text-align:center">-->
               <el-tile v-for="(child, index) in item.children"
                        :title="child.label"
                        size="sm"
                        class="tile"
                        @click.native="jumpRoute(child.path, child)"
                        :cardStyle="{cursor: 'pointer',width: '11rem', height: '11rem', fontSize: '16px',color: 'black' }">
                        <div class="cardtitle-info" slot="media">
                          <appContent :app-url="child"></appContent>
                        </div>
               </el-tile>
             <!--</router-link>-->
           </draggable>
         </div>
         </div>
      <!-- </draggable> -->
    </div>
</template>

<script>
// import 'echarts/lib/chart/bar';
// import 'echarts/lib/component/tooltip';
// import allListJson from './allList.json';
import appContent from './content.vue';
import draggable from 'vuedraggable';

export default {
  data() {
    return {
      list: [],                       //  领域分组选择框
      groupList: [],                  //  二次菜单
      selectList: [],                 //  磁贴分组
      allList: [],                    //  全部应用
      arr: [],                        //  磁贴选择框
      value: '全部领域',
      groupValue: '选择分组',
      routeName: null,
      listChildren: null,
      options:'',
      numberData:'',
      percentage:0
    };
  },
  props:['menuList'],
  components: {
    draggable,
    appContent
  },
  methods: {
    requestCharts(item){
      // var vm = self || this;
      this.$http({
        url: item.chartUrl,
        type: 'GET',
        dataType: 'json',
      }).then((res) => {
        if(res.data.status === true){
          this.options = res.data.option;
          this.$nextTick(() => {
            var myChart = echarts.init(document.getElementById('appecharts_' + item.id));
            myChart.setOption(this.options);
          });
        }
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    requestNumber(item){
      // var vm = self || this;
      this.$http({
        url: item.numberUrl,
        type: 'GET',
        dataType: 'json',
      }).then((res) => {
        if(res.data.status === true){
          this.numberData = res.data.data.numberData;
          this.$nextTick(() => {
            // debugger;
            var myApi = document.getElementById('appApi_' + item.id);
            myApi.innerHTML = this.numberData;
            // var myApiValue = document.getElementById('appApi_' + item.id).innerHTML;
            // myApi.innerHTML = this.numberData +myApiValue;
            // console.log(myApi);
          });
        }
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    requestProgress(item){
      // var vm = self || this;
      this.$http({
        url: item.chartUrl,
        type: 'GET',
        dataType: 'json',
      }).then((res) => {
        if(res.data.status === true){
          // debugger;
          this.percentage = res.data.data.proData;
          this.$nextTick(() => {
            var myProgress = document.getElementById('appPro_' + item.id);
            var myAttr=myProgress.getAttribute('percentage');
            console.log("aaaa" +myProgress);
            // var myApiValue = document.getElementById('appApi_' + item.id).innerHTML;
            // myApi.innerHTML = this.numberData +myApiValue;
          });
        }
      }).catch(() => {
        this.$message({
          message: '信息获取失败',
          type: 'error'
        });
      });
    },
    request(){
//      const vm = this;
//      const path = this.$route.path;
//      const name = path.substring(1);
//      this.routeName = name;
//      this.list = this.menuList;
//       vm.list = [];
//       if(false&&localStorage.getItem(name)){
//         vm.list = JSON.parse(localStorage.getItem(name));
//       }else{
//         $.ajax({
//           type: 'get',
//           dataType: 'json',
//           url: 'static/data.json',
//           success(re){
//             vm.list = re[name];
//             this.list = vm.list;
//             localStorage.setItem(name, JSON.stringify(this.list));
//           }
//         });
//       }

    },
    requestMenu(){
      this.value = '全部领域';
      this.groupList = [];
      this.selectList = [];
      this.arr = [];
      this.allList = [];
      const path = this.$route.path;
      const name = path.substring(1);
      var  url;
      var type;
      // if (this.$route.path.indexOf('appArea') > 0) {
        url = '/baseapp/appMGT/appCenter/allList?showway=apparea&areaId=&groupId=';
        type = 'apparea';
      // } else if (this.$route.path === '/sysmgr') {
      //   url = window.ctxs.ap + '/appMGT/appCenter/allList?showway=sysarea&areaId=&groupId=';
      //   type = 'sysarea';
      // }
    //        const url = '/wbalone/appMGT/appCenter/list?showway=sysarea&areaId=&groupId=';
        // url = './static/apparea.json';
      window[type] = window[type] || {};
      if (window[type].list && window[type].groupList){
          this.list = window[type].list;
          this.groupList = window[type].groupList;
          return;
       }
//       debugger;
/*

        var userCodeID = null;
        var ncSessionJson = localStorage.getItem('ncSession');
        if(ncSessionJson){
          var ncSession = JSON.parse(ncSessionJson);
          var userID = ncSession.userID;
          var userCode = ncSession.userCode;
          if(userID && userCode){
            userCodeID = userCode + userID;
          }
          if(userCodeID){
            var res = localStorage.getItem('appList_' + userCodeID);
            if(res){
              this.responseMethod(JSON.parse(res));
              return;
            }
          }
        }
*/



        const self = this;
        this.$http({
          url: url,
          method: 'get'
        }).then((response) => {
//            debugger;
          if(response.data.msg === 'success'){
            var resData = response.data;
//            if(userCodeID){
//              localStorage.setItem('appList_' + userCodeID, JSON.stringify(resData));
//            }

            var data = response.data.data;
            if(data === null){
              data = [];
            }
            self.list = data;
            for (let i = 0; i < self.list.length; i++) {
              for (let j = 0; j < self.list[i].children.length; j++) {
                var item = self.list[i].children[j];
                self.allList.push(item);
                if (item.children && item.children.length > 0){
                  for (let k = 0; k < item.children.length; k++){
                    var path = item.children[k].path;
                    var urltype = item.children[k].urltype || '';
                    if (urltype == 'view'){
//                      item.children[k].path = '/lgc/$wbalone$data:layout$' + path;
                      item.children[k].path = '/ovp?path=' + path;
                    }else if (urltype == 'url' && path.indexOf('/ifr') != 0 &&　path.indexOf('/lgc') != 0){
                      path = path.replace(/\//g, '$');
                      path = path.replace(/#/g, '+');
                      item.children[k].path = '/ifr/' + path;
                    }
                  }
                }
              }
            }
            self.groupList = self.allList;
            window[type].list = self.list;
            window[type].allList = self.allList;
            /* if(self.$route.path.indexOf('appArea') > 0) {
              // 从路由的path中截取最后的数字作为数组下标(从0开始)
              const index = parseInt(self.$route.path.split('_')[1], 10);
              const area = self.list[index].label;  // 根据下标找到对应菜单的label
              self.change(area);  // 切换到相应领域
            } */
            //  ;

            // self.requestCharts(self);

            if(self.$route.path === 'appArea') {
              self.change("全部领域");
            }
            localStorage.setItem(name, JSON.stringify(this.groupList));
          }
        });

      // });   get login
    },
    responseMethod(resData){
      const self = this;
//      if(resData.msg === 'success'){
        var data = resData.data;
        if(data === null){
          data = [];
        }
        self.list = data;
        for (let i = 0; i < self.list.length; i++) {
          for (let j = 0; j < self.list[i].children.length; j++) {
            var item = self.list[i].children[j];
            self.allList.push(item);
            if (item.children && item.children.length > 0){
              for (let k = 0; k < item.children.length; k++){
                var path = item.children[k].path;
                var urltype = item.children[k].urltype || '';
                if (urltype == 'view'){
//                  item.children[k].path = '/lgc/$wbalone$data:layout$' + path;
		  item.children[k].path = '/ovp?path=' + path;
                }else if (urltype == 'url' && path.indexOf('/ifr') != 0 &&　path.indexOf('/lgc') != 0){
                  path = path.replace(/\//g, '$');
                  path = path.replace(/#/g, '+');
                  item.children[k].path = '/ifr/' + path;
                }
              }
            }
          }
        }
        self.groupList = self.allList;
//        window[type].list = self.list;
//        window[type].allList = self.allList;
        /* if(self.$route.path.indexOf('appArea') > 0) {
         // 从路由的path中截取最后的数字作为数组下标(从0开始)
         const index = parseInt(self.$route.path.split('_')[1], 10);
         const area = self.list[index].label;  // 根据下标找到对应菜单的label
         self.change(area);  // 切换到相应领域
         } */
        //  ;

        // self.requestCharts(self);

        if(self.$route.path === 'appArea') {
          self.change("全部领域");
        }
//        localStorage.setItem(name, JSON.stringify(this.groupList));
//      }
    },
    change(value){
      for (let i = 0; i < this.list.length; i++) {
        if (value === this.list[i].label){
          this.groupList = this.list[i].children;
          this.selectList = this.list[i].children;
        }
      }
      if (value === '全部领域') {
        this.groupList = this.allList;
      }
      const groupValue = $('body').data('finLease_groupValue'); // 读取存储的groupValue，实现返回首页分组回显
      if(groupValue) {
        this.groupValue = groupValue;
      } else {
        this.groupValue = '全部分组';
      }
    },
    changeGroup(groupValue){
      this.arr = [];
      for (let i = 0; i < this.selectList.length; i++) {
        if (groupValue !== '') {
          if(groupValue === '全部分组'){
            this.arr.push(this.selectList[i]);
          } else if (groupValue === this.selectList[i].label) {
            this.arr.push(this.selectList[i]);
          }
          this.groupList = this.arr;
          $('body').data('finLease_groupValue', groupValue); // 存储groupValue
        }
      }
    },
    opentab(child){
      const path = child.path;
      this.$router.push({ path, query: { url: child.url } });
    },
    jumpRoute(path,item){
    	//对 应用中心处理  下次进来时默认滚动到上次退出的位置
    	//获取当前滚动条的位置
    	var scrollTop = document.getElementsByClassName("view")[0].scrollTop;
      window.vueInstance.scrollTop = scrollTop;
      //TODO 临时处理，后面要考虑磁贴点击时以新浏览器页签打开
      if (path == '/ifr/pd'){
        window.open(window.location.protocol + '//' + window.location.host + '/pd');
        return;
      }
      var tmp;
      if(path.indexOf("http://") !== -1){
        tmp= '/third?url='+path;
      }else{
        tmp=path;
      }
     window.vueInstance.$children[0].addEditableTabs(tmp, item);
      // this.$router.push(tmp);
    }
  },
   watch: {
   },
  created(){
    $('#main-right').attr('is-reload','');
    //隐藏组织结构
    // $('#main-right').find('div#organization_page').css('display','none');
    this.requestMenu();
  },
  mounted(){
		let scrollTop = window.vueInstance && window.vueInstance.scrollTop ? window.vueInstance && window.vueInstance.scrollTop :0;
		document.getElementsByClassName("view")[0].scrollTop = this.scrollTop;
		if(scrollTop){
				var show  = false;
				var interval = setInterval(function(){
				if(document.getElementsByClassName("view")[0].scrollTop == scrollTop){
					 show = true;
				}
				document.getElementsByClassName("view")[0].scrollTop = scrollTop;
				if(show){
					clearInterval(interval);
				}
			}, 50);

		}
  }
};
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .image {
    width: 50%;
    display: block;
    margin: 0 auto;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
  .dragCard {
    position: relative;
    overflow: hidden;
  }
  .cardInfo {
    margin: 0 66px 66px 66px;
  }
  .card-name {
    font-size: 18px;
    color: #2D2D2D;
    position: relative;
    display: block;
    line-height: 18px;
    margin: 2rem 0 0.5rem 1.5rem;
    box-shadow: none;
  }
  .card-box {
    position: relative;
    z-index: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: #F0F0F5;
  }
  .card-box .card-title {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1rem;
    color: #333;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .card-box .subtitle {
    font-size: 0.875rem;
    text-align: left;
    font-weight: normal;
    line-height: 1.25rem;
    height:2.5rem;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
     /* autoprefixer: off */
    -webkit-box-orient: vertical;
     /* autoprefixer: on */
    color: #666;
  }
  .card-box .icon-card {
    text-align: right;
    height:3.75rem;
    line-height: 3.75rem;
    margin-top: 0.25rem;
  }
  .icon-card img {
    width: 2rem;
    height: 2rem;
  }
   .icon-card1 {
    text-align: center;
    height:3.75rem;
    line-height: 3.75rem;
  }
  .charts-card{
    height:3.75rem;
    text-align: left;
    line-height: 3.75rem;
  }
  .pro-card{
    height:3.75rem;
    text-align: left;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .pro-card span {
    font-size: 12px !important;
  }
  .pro-card-info {
    height: 20px !important;
  }
  .pro-card .el-progress{
    line-height: 0 !important;
    height: 4px;
    margin: -0.4rem 0 -0.3rem 0;
  }
  .api-card{
    height:3.75rem;
    line-height: 3.75rem;
    width: 9rem;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .api-card span{
    font-size: 2.5rem;
  }
  .api span {
    font-weight: 300;
  }
  .api .apiFont {
  font-size: 20px;
  }
  .card-box .card-footer {
    font-size: 0.875rem;
    font-weight: normal;
    margin-top: 0.25rem;
    line-height: 1rem;
    height: 1rem;
    color: #666;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .card {
    padding: 1rem !important;
    box-shadow: none;
    margin: 0.5rem 0 0 0.5rem !important;
  }
  .tile:hover {
    border: 1px solid #6bcaea;
    cursor: pointer;
    background-color: #e9f7fc;
  }
  .card-title {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cardtitle-info{
    height:7.75rem;
    margin-top: 0.25rem;
  }
  .appIcon.iconfont_form {
    /*color: #9adfef;*/
    font-size: 2rem;
  }
  /*p.appTitle{
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    margin: 20px 30px 0;
  }*/
</style>
