<template>
  <div class="body">
    <!-- <div class="top">
      <div class="title">CocoClass后台管理</div>
      <div class="person">
        <div class="person_name">{{ userinfo ? userinfo.username : "" }}</div>
        <el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
      </div>
    </div> -->
    <div class="container">
      <div class="leftBar" style="height: 100%;">
        <sidebarL @getPer="getPer" @AddAppJson="AddAppJson" :urlAddress.sync="urlAddress"  ref="sidebarLRef"></sidebarL>
      </div>
      <div class="table-container">
        <!-- <router-view></router-view> -->
         <!-- 首页 -->
         <homepageL @AddAppJson="AddAppJson" :urlAddress.sync="urlAddress" v-show="!appSign" ref="homepageLRef"></homepageL>

         <!-- 应用  -->
          <div
              v-for="(item,index) in AppJSon" :key="index">
            <div style="height: 100vh;" v-show="item.stateL">
              <div style="height: 100%;"  v-html="item.json"></div>
            </div>
          </div>
        
         <div v-if="loading" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #fff;
              display: flex;justify-content: center;align-items: center;">
          <div style="display: flex;flex-direction: column;align-items: center;">
            <img style="height: 75px;transform: scale(2);" src="../assets/img/cocoloading.gif" alt="">
            <div style="color: #0354D7;">拼命加载中...</div>
          </div>  

         </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { loginOut } from '@/api/user';
import sidebarL from '../components/sidebarL.vue';
import { API_CONFIG } from "@/common/apiConfig";
import store from '../store'
import homepageL from './homepageL.vue';


export default {
  name: "HomeView",
  components:{
    sidebarL,
    homepageL
  },
  data() {
    return {
      perData:[],
      toolList:[],
      form:{},
      urlAddress:'',
      AppJSon:[],
      loading:false
    }
  },
  computed: {
    ...mapGetters(['userinfo','appSign']),
  },
  methods: {
    ...mapActions({
      logout: 'user/logout'
    }),
    AddAppJson(val){
      console.log('val',val);
      this.loading = true

      setTimeout(() => {
        this.loading = false
      }, 2000);
      
      let data = this.AppJSon.filter(e=>{
        return val.toolId == e.toolId
      })
      console.log('data',data);

      if (data.length == 0) {
        this.AppJSon.forEach(e=>{
          this.$set(e, 'stateL', false); // 使用 Vue.set 确保响应式
        })

        this.AppJSon.push(val)
        
        
      }else{
        this.AppJSon.forEach(e=>{
          if (val.toolId == e.toolId) {
            this.$set(e, 'stateL', true); // 使用 Vue.set 确保响应式
          }else{
            this.$set(e, 'stateL', false); // 确保响应式更新
          }
        })
      }
    },

    
    async handleLogout() {
      this.$confirm('确定退出吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        loginOut()
          .then(async () => {
            this.$message({
              message: '退出成功',
              type: 'success'
            });
            await this.logout();
            this.$router.push('/login');
          })
          .catch(err => {
            console.error(err);
          });
      }).catch(() => {
        // 取消操作
      });
    },
   
    // 获取学校权限与组织权限,优先使用学校权限,其次使用组织权限
    getPer() {
      this.$refs.homepageLRef.getData()
      this.$refs.sidebarLRef.getData()
      let params = [
        {
          functionName: API_CONFIG.ajax_schoolPermission.functionName, // 调用存储过程的名称
          org: this.userinfo.org, //组织id
          oid: this.userinfo.organizeid, //学校id
        },
      ];
      
      // 发起请求
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then((res) => {
          let data = res.data[0]
          // console.log('data', data)
          this.perData= JSON.parse(data[0].json)
          this.getToolData()

        })
        .catch((err) => {
          console.error("请求失败，错误信息：", err);
        });
    },
    getToolData() {
			let params = [
				{
					functionName: "select_desktopToolByPage",
					status: "",
					page: 1,
					lim: 9999999,
				},
			];
			this.$ajax
				.post(API_CONFIG.baseUrl, params)
				.then((res) => {
					let _data = res.data;
					let _list = _data[0];
					_list.forEach((i) => {
						i.url = JSON.parse(i.url);
						i.json = JSON.parse(i.json);
						i.argumentList = JSON.parse(i.argumentList);
					});
					this.toolList = _list;
          // console.log('_list',_list);
          
					this.setDataListToo(_list);
				})
				.catch((err) => {
					console.log(err);
					this.$message.error("获取工具数据失败");
				});
		},
    async setDataListToo(toolList = []) {
      // console.log('toolList',toolList);
      
			let _form = JSON.parse(JSON.stringify(this.perData));
			// _form.desktop.list.forEach((i, index) => {
			// 	let _index = toolList.findIndex((i2) => i == i2.id);
			// 	if (_index != -1) {
			// 		_form.desktop.list[index] = toolList[_index];
			// 	} else {
			// 		console.log("无工具", i);
			// 	}
			// });

			_form.admin.index.list.forEach((i, index) => {
				let _index = toolList.findIndex((i2) => i == i2.id);
				if (_index != -1) {
					_form.admin.index.list[index] = toolList[_index];
				} else {
					console.log("无工具", i);
				}
			});

			_form.admin.sidebar.list.forEach((i, index) => {
				if (i.children) {
					i.children.forEach((i2, index2) => {
						let _toolList = JSON.parse(JSON.stringify(toolList))
						let _index = _toolList.findIndex((i3) => i2 == i3.id);
						
						if (_index != -1) {
							_form.admin.sidebar.list[index].children[index2] = _toolList[_index];
							_form.admin.sidebar.list[index].children[index2].typeId = _form.admin.sidebar.list[index].typeId + "," +_toolList[_index].id;
						} else {
							console.log("无工具", i);
						}
					});
				} else {
					let _toolList = JSON.parse(JSON.stringify(toolList))
					let _index = _toolList.findIndex((i2) => i == i2.id);
					if (_index != -1) {
						_form.admin.sidebar.list[index] = _toolList[_index];
						_form.admin.sidebar.list[index].typeId =
							_form.admin.sidebar.list[index].id;
					} else {
						console.log("无工具", i);
					} 
				}
			});

      // console.log('_form',_form);
      await store.commit('user/SET_FROM', _form)
      
			this.$forceUpdate();
		},
  },
  mounted() {
      this.getPer()
  },
};
</script>

<style scoped>

.body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.container {
  display: flex;
  width: 100%;
  height: 100vh;
}
.container >>> .el-loading-mask{
  z-index: 0;
}
.table-container {
  /* display: flex;
  flex: 1;
  justify-content: center; */
  width: 100%;
  background-color: #F9FAFB;
  position: relative;
}
.leftBar{
  /* box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px 6px rgb(0 0 0 / 0.1); */
  /* overflow: visible;  */
  z-index: 999;
}
</style>