<template>
  <div class="self-header">
    <div style="display: inline-block;margin: 5px 15px 5px 0;height: 50px;">
      <img src="../../assets/logo.png" alt="" style="height: 100%;"/>
    </div>
    <div class="self_header_label">
      <h2>新一代银行国际结算系统</h2>
    </div>
    <div class="header-tool">
      <div class="header-subInstName">
        <!-- <marquee
          v-if="subInstName.length > 12"
          behavior="scroll"
          direction="left"
          scrollamount="3"
          >{{ this.subInstName }}</marquee
        > -->
        <span v-if="subInstName.length <= 12">{{ this.subInstName }}</span>
      </div>
      <el-popover
        class="header-tool-popover"
        placement="bottom"
        width="200"
        trigger="hover"
      >
        <div class="header-tool-userdetail">
          <div>{{ user.userName }}</div>
          <div class="long-text" :title="user.userId">
            <i class="el-icon-user" style="padding:0px 5px;"></i>
            <span style="letter-spacing:1px;">{{ user.userId }}</span>
          </div>
          <div class="long-text" :title="user.instName">
            <i class="el-icon-office-building" style="padding:0px 5px;"></i>
            {{ user.instName }}
          </div>
          <div class="long-text" :title="user.roleName">
            <i class="el-icon-collection-tag" style="padding:0px 5px;"></i>
            {{ user.roleName }}
          </div>
          <el-row class="header-tool-userdetail-action">
            <el-button @click="showChgPwdDialog" size="small" style="width:100%"
              >修改密码</el-button
            >
            <el-button
              @click="showLogoutDialog(false)"
              size="small"
              style="width:100%;margin-left:0px;margin-top:5px"
              >用户签退</el-button
            >
            <el-button
              @click="showLogoutDialog(true)"
              size="small"
              style="width:100%;margin-left:0px;margin-top:5px"
              >强制签退</el-button
            >
          </el-row>
        </div>
        <div class="header-tool-item" slot="reference">
          <div>
            <i class="el-icon-user"></i>
            <span class="header-tool-item-text">{{ user.userName }}</span>
            <i class="el-icon-arrow-down" style="font-size: 12px;"></i>
          </div>
        </div>
      </el-popover>
      <el-popover
        class="header-tool-popover"
        placement="bottom"
        width="80"
        trigger="hover"
      >
        <ul class="header-tool-item-list">
          <li @click="handleLangCn">中文</li>
          <li @click="handleLangEn">English</li>
        </ul>
        <div class="header-tool-item header-tool-item-text" slot="reference">
          <i class="el-icon-setting" style="font-size:14px;"></i>
          {{ lang == "cn" ? "中文" : "En" }}
          <i class="el-icon-arrow-down" style="font-size:12px;"></i>
        </div>
      </el-popover>
      <el-popover placement="bottom" width="450" trigger="hover">
        <div>
          <el-col :span="24">
            <el-col :span="24">
							<c-page title="公告">
								<c-table :data="noticeboardData">
									<el-table-column label="公告内容" prop="noticeContent"></el-table-column>
									<el-table-column label="发布人" prop="publisher"></el-table-column>
									<el-table-column label="发布日期" prop="publishDate"></el-table-column>
								</c-table>
							</c-page>
            </el-col>
          </el-col>
        </div>
        <div class="header-tool-item" slot="reference">
          <i class="el-icon-bell"></i>
          <span class="header-tool-item-text" style="padding-left:7px;">通知</span>
        </div>
      </el-popover>
      <span class="header-tool-item-text">会计日期: {{ accDate }}</span>
    </div>
  </div>
</template>

<script>
import cPage from '../../components/c-page.vue';
export default {
  components: { cPage },
  data() {
    return {
      lang: this.$store.state.I18n.lang,
      txName: "",
      user: {
        userName: this.$store.state.UserContext.userName || "Admin",
        roleName: window.sessionStorage.roleName || "超级管理员",
        instName: window.sessionStorage.instName || "北京分行",
        userId: this.$store.state.UserContext.userId || "2124221421214",
      },
      rules: {
        username: [{ type: "string", required: true, message: "请填写用户名" }],
        password: [{ type: "string", required: true, message: "请填写密码" }],
      },
      dialogOpen: false,
      loading: false,
      count: "",
      accDate: window.sessionStorage.accDate || "",
			noticeboardData: []
    };
  },
  computed: {
    subInstName() {
      // let subStrList = window.sessionStorage.instName.split("股份有限公司");
      // let length = subStrList.length;
      // return subStrList[length - 1];
      return "北京分行";
    },
  },
  methods: {
    logout() {
      this.$store.commit("UserContext/setLogout");
      this.$router.push("/login");
    },
    handleLangCn() {
      this.$store.commit("I18n/setLang", "cn");
      this.lang = "cn";
    },
    handleLangEn() {
      this.$store.commit("I18n/setLang", "en");
      this.lang = "en";
    },
    showLogoutDialog(flg) {
      this.$refs.logoutform.show(flg);
    },
    showChgPwdDialog() {
      this.$refs["chgPwdForm"].dialogOpen = true;
    },
  },
};
</script>

<style>
.self-header {
  height: 100%;
  /* background-color: #eeeeee; */
  /* margin-bottom: 5px; */
  background-image: url("../../assets/head_bg.png");
}
.self-header h2 {
  margin: 0;
  padding: 0;
}
.header-subInstName {
  display: inline-block;
  margin-right: 12px;
  text-align: right;
  color: #fff;
  font-size: 12px;
  padding: 0px 15px 0px 0px;
  border-right: 1px solid antiquewhite;
}
.self-header {
  height: 100%;
  /* background-color: #eeeeee; */
  /* margin-bottom: 5px; */
  background-image: url("../../assets/head_bg.png");
  position: relative;
  padding: 0px 0px 0px 12px;
  background-size: cover;
}

.self-header h2 {
  margin: 0;
  padding: 0;
  font-size: 22px;
  display: inline;
}

.self_header_label {
  /* color: antiquewhite; */
  color: #fff;
  /* margin-top: 10px !important; */
  position: relative;
  top: 22px;
  /* left: 10px; */
  padding: 0px 15px;
  display: inline-table;
  vertical-align: top;
  font-family: "KaiTi";
  /* border-left: 1px solid antiquewhite; */
  border-left: 1px solid #fff;
}
.self_header_label p {
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  font-style: italic;
  margin: 0;
  padding: 0;
  font-size: 12px;
  display: inline;
}
.header-tool {
  position: absolute;
  text-align: right;
  right: 35px;
  top: 22px;
  color: #fff;
  font-size: 14px;
}
.header-tool-item {
  display: inline-block;
  margin-right: 12px;
  cursor: pointer;
}
.header-tool-userdetail {
  text-align: center;
}
.header-tool-item-text {
  font-size: 12px;
}
.header-tool-item-list {
  padding: 0;
  margin: 0;
}
.header-tool-userdetail-action {
  margin-top: 10px;
}
.header-tool-item-list li {
  list-style: none;
  padding: 5px;
  text-align: center;
  color: #606266;
  cursor: pointer;
}
.header-tool-item-list li:hover {
  background: rgba(144, 146, 152, 0.3);
}
.logoutdialog .el-dialog .el-dialog__header {
  padding: 10px 20px 0px;
}
.logoutdialog .el-dialog .el-dialog__body {
  padding: 20px 30px 0px 20px;
}
.logoutdialog .el-dialog .el-dialog__footer {
  padding: 0px 20px 15px;
}
/* .header-tool-item-badge {
		margin-top: 10px;
		margin-right: 40px;
	} */
.header-tool-item-badge .el-badge__content {
  background-color: #f56c6c;
  border-radius: 7px;
  /* color: #FFF; */
  display: inline-block;
  font-size: 12px;
  height: 14px;
  line-height: 14px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 0px;
}
.long-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  font-size: 12px;
}
.long-text:hover {
  background-color: #e8f0fe;
}
</style>
