<template>
  <div id="main" class="main">
    <header>
      <ul class="nav">
        <img class="logo" src="../assets/logo.png" alt=""></img>
        <li>
          <router-link to="/main/app-vue-hash/">dingding</router-link>
        </li>
        <li class="active">
          <router-link to="/main/canvas/">canvas</router-link>
        </li>
        <li>
          <router-link to="/main/iotPlatformRoom/#/wel/index">云帆</router-link>
        </li>
        <li>
          <router-link to="/main/about">主服务about</router-link>
        </li>
      </ul>
      
      <div class="fr">
        <el-input
          class="input-search"
          placeholder="请输入关键词"
          suffix-icon="el-icon-search"
          v-model="input1">
        </el-input>
        <el-dropdown class="dropdown-box">
          <span class="el-dropdown-link">
            中文<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>English</el-dropdown-item>
            <el-dropdown-item>中文</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-badge :value="12" class="badge">
          <i class="el-icon-message-solid"></i>
        </el-badge>
        <div class="user-img">
          <img  src="../assets/icon_people.png" alt=""></img>
        </div>
        <el-dropdown class="dropdown-box">
          <span class="el-dropdown-link">
            leehom<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
    <!-- <span @click="changeParentState">主项目的数据：{{ commonData.parent }}，点击变回1</span> -->
    <content>
      <!-- <left-mneu></left-mneu> -->
	  <div class="router-warp">
		<div id="appContainer"></div>
      	<router-view></router-view>
	  </div>
    </content>
    
  </div>
</template>

<script>
import leftMneu from '@/components/left-menu'
import { registerMicroApps, start } from 'qiankun'
import { getAll } from '@/libs/micros'
import router from '../router'
import store from '../store'
console.log(getAll())
const state = getAll()
state.router = router
registerMicroApps([
	{
		name: 'app-vue-hash',
		entry: 'http://localhost:8081',
		container: '#appContainer',
		activeRule: '/main/app-vue-hash',
		props:{
			data:getAll(),
			router:router,
			store:store,
		},
	},
	{
		name: 'fjhxCloudVue',
		entry: 'http://localhost:1777',
		container: '#appContainer',
		activeRule: '/main/fjhxCloudVue',
		props:{
			data:getAll(),
			router:router,
			store:store,
		},
	},
	{
		name: 'iotPlatformRoom',
		entry: 'http://localhost:1888',
		container: '#appContainer',
		activeRule: '/main/iotPlatformRoom',
		props:{
			data:state,
		},
	},
	{
		name: 'canvas',
		entry: 'http://localhost:8080',
		container: '#appContainer',
		activeRule: '/main/canvas',
		props:{
			data:getAll()
		},
	},
]);

start();
export default {
	components:{
		leftMneu
	},
	data() {
		return {
			input1: null,
		}
	},
	computed: {
		commonData() {
			return this.$store.state.commonData
		},
	},
	methods: {
		changeParentState() {
			this.$store.commit('setCommonData', { parent: 1 })
		},
	},
}
</script>

<style scoped lang="less">
.main {
	height: 100%;
	background: #f1f1f1;
	position: relative;
	content{
		display: flex;
		min-height: 100%;
		.left-menu{
			width: 244px;
		}
		.router-warp{
			width:100%;
			min-height:calc(~'100vh - 64px');
		}
	}
	.nav {
		display: flex;
		padding: 0;
		margin: 0;
		li {
			width: 128px;
			height: 64px;
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			line-height: 64px;
			list-style: none;
		}
		li.active {
			background: #0084ff;
			color: #fff;
			a {
				color: #fff;
			}
		}
	}
	header {
		z-index: 10;
		left: 0;
		right: 0;
		top: 0;
		height: 64px;
		background: #fff;
		display: flex;
		justify-content: space-between;
		.logo {
			margin: 16px 42px;
			display: block;
		}
		.fr {
			display: flex;

			.input-search {
				margin: 12px 40px 12px 0;
				width: 240px;
				input {
				}
			}
			.dropdown-box {
				margin: 0 24px 0 0px;
				line-height: 64px;
			}
			.badge {
				margin: 22px 24px 22px 0;
				height: 20px;
				width: 20px;
				i {
					color: #bbbbbb;
				}
			}
			.user-img {
				margin: 12px 12px 12px 0;
			}
		}
	}
}

header > a {
	margin: 0 20px;
}
.appContainer {
	background: #ccc;
	padding: 20px;
}
</style>
<style>
/* #appContainer div[id^='__qiankun_microapp_wrapper_']>div {
  height: calc(100vh - 64px);
} */

body,
html,
#appContainer,
#appContainer div[id^='__qiankun_microapp_wrapper_'] {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}
</style>
