<template>
  <div id="main" class="main">
    <header-bar></header-bar>
    <notice
      @more="more"
      @confirm="confirm"
      :data="[
        { title: '11', content: '11' },
        { title: '22', content: '22' },
        { title: '33', content: '33' },
        { title: '44', content: '44' },
      ]"
      v-model="open"
    ></notice>
    <!-- <el-table
		:data="tableData"
		style="width: 100%;margin;top:200px"
		:default-sort = "{prop: 'date', order: 'descending'}"
		>
		<el-table-column label="交易时间" prop="time" width="78" fixed />
		<el-table-column label="资产小计" prop="total" width="78" fixed>
			<template slot-scope="scope">
				<span style="color: #940819">{{ scope.row.total.toFixed(2) }}</span>
			</template>
		</el-table-column>
		<template v-if="bankList && bankList.length > 0">
			<tbody v-for="(item) in bankList" :key="item.id">
			<el-table-column :render-header="(h, obj) => renderHeader(h, obj, item)" align="center">
				<el-table-column label="收入" align="right" width="80" :prop="'rmbIncome-' + item.id">
				</el-table-column>
				<el-table-column label="支出" align="right" width="80"  :prop="'rmbExpenditure-' + item.id">
				</el-table-column>
				<el-table-column label="余额" align="right" width="80"  :prop="'rmbAmount-' + item.id">
				</el-table-column>
			</el-table-column>
			</tbody>
		</template>
		
	</el-table> -->
    <!-- <header>
      <ul class="nav">
        <img class="logo" src="../assets/logo.png" alt=""></img>
        <li>
          <router-link to="/main/fjhxCloudVue/#/wel/index">针筒</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 headerBar from "@/components/header-bar";
import notice from "@/components/notice";
import { getAll } from "@/libs/micros";
import router from "../router";
import store from "../store";
console.log(process.env.NODE_ENV);
const state = getAll();
state.router = router;
const isTest = window.location.host == "36.134.91.96:10003";
const isServe = process.env.NODE_ENV === "development";
registerMicroApps([
  // {
  // 	name: 'app-vue-hash',
  // 	entry: 'http://localhost:8081',
  // 	container: '#appContainer',
  // 	activeRule: '/main/app-vue-hash',
  // 	props:{

  // 	},
  // },
  {
    name: "fjhxCloudVue",
    entry: isServe
      ? "http://localhost:1777/"
      : "https://wdly.bytesail.cn:10002",
    //entry: (process.env.NODE_ENV === "development") ?  'https://wdly.bytesail.cn:10002' : 'https://wdly.bytesail.cn:10002 http://36.134.91.96:10002',
    container: "#appContainer",
    activeRule: "/main/fjhxCloudVue",
    props: {
      data: state,
    },
  },
  // {
  // 	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,
    headerBar,
    notice,
  },
  data() {
    return {
      input1: null,
      tableData: [],
      bankList: [],
      open: false,
    };
  },
  computed: {
    commonData() {
      return this.$store.state.commonData;
    },
  },
  methods: {
    more() {
      console.log("更多");
    },
    confirm(_obj) {
      console.log(_obj);
    },
    renderHeader(h, para, item) {
      return h("div", {
        attrs: {
          class: "cell",
        },
        domProps: {
          innerHTML: item.name + "</br>（" + item.accountNumber + "）",
        },
      });
    },
    changeParentState() {
      this.$store.commit("setCommonData", { parent: 1 });
    },
    getData() {
      this.$get("/file/2023-02/08/17fa5541-541e-4ac2-a3d5-ff0eb88652f7.jpg");
    },
  },
  created() {
    //this.getData()
  },
};
</script>
<style>
.loading-9 {
  --r1: 154%;
  --r2: 68.5%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(
        var(--r1) var(--r2) at top,
        #0000 79.5%,
        #269af2 80%
      )
      center left,
    radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%)
      center center,
    radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center
      right,
    #ccc;
  background-size: 50.5% 220%;
  background-position: -100% 0%, 0% 0%, 100% 0%;
  background-repeat: no-repeat;
  animation: p9 0.3s infinite linear;
}

@keyframes p9 {
  33% {
    background-position: 0% 33%, 100% 33%, 200% 33%;
  }

  66% {
    background-position: -100% 66%, 0% 66%, 100% 66%;
  }

  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%;
  }
}
</style>
<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>
