<template>
  <div class="mian-navbar">
    <div class="title-ctn">
      <h2 v-if="!!pondName">
        {{ pondName
        }}<!-- 安全监测系统 -->
      </h2>
    </div>

    <div class="navbar">
      <div class="right">
        <div class="right-menu">
          <div>
            <el-tooltip
              content="三维大屏"
              v-if="d3_screnn"
              effect="dark"
              placement="bottom"
            >
              <a
                class="el-icon-monitor"
                href="/3d/index.html"
                target="_blank"
              ></a>
            </el-tooltip>
            <el-tooltip
              content="风险大屏"
              v-if="risk_entrance"
              effect="dark"
              placement="bottom"
            >
              <a
                class="el-icon-data-line"
                href="/edge/ScreenFX"
                target="_blank"
              ></a>
            </el-tooltip>
            <el-tooltip content="可视化大屏" effect="dark" placement="bottom">
              <a
                class="el-icon-s-platform"
                href="/edge/Screen"
                target="_blank"
              ></a>
            </el-tooltip>
          </div>
          <!-- <template >
						<el-tooltip content="全屏缩放" effect="dark" placement="bottom">
						  <screenfull id="screenfull" class="right-menu-item hover-effect" />
						</el-tooltip>
					</template> -->
        </div>
        <div class="navbar-line">
          <el-dropdown
            class="avatar-container right-menu-item hover-effect"
            trigger="click"
          >
            <div class="avatar-wrapper el-icon-caret-bottom">
              <img
                :src="
                  user.avatarName
                    ? baseApi + '/avatar/' + user.avatarName
                    : Avatar
                "
                class="user-avatar"
              />
              <span>{{ user.nickName }}</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <!-- <span style="display:block;" @click="show = true">
							<el-dropdown-item>
							  布局设置
							</el-dropdown-item>
						  </span> -->
              <router-link to="/user/center">
                <el-dropdown-item>
                  个人中心
                </el-dropdown-item>
              </router-link>
              <span style="display:block;" @click="open">
                <el-dropdown-item divided>
                  退出登录
                </el-dropdown-item>
              </span>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
//import Screenfull from '@/components/Screenfull'
import { reqApi } from "@/assets/js/httpApi.js";
export default {
  //components: {Screenfull},
  data() {
    return {
      dialogVisible: false,
      pondName: "",
      risk_entrance: 0,
      d3_screnn: 1
    };
  },
  computed: {
    ...mapGetters(["user", "baseApi", "device"]),
    show: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val
        });
      }
    }
  },
  created() {
    var self = this;
    reqApi.common
      .requstEdge("get", "tab/tailpondinfor/dryinfo", {})
      .then(function(res) {
        var body = res.body || {};
        var tailingname = body.tailingname;
        //self.pondName = tailingname.indexOf('尾矿库') > -1 ? tailingname : (tailingname||'') + '尾矿库';
        self.pondName = tailingname;
        self.risk_entrance = body.risk_entrance;
        self.d3_screnn = !body.d3_screnn;

        //var $appMain = self.$parent.$el.querySelector(".app-main").__vue__;
        //var $cmPage = $appMain.$children[0];
      });
  },
  methods: {
    open() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.logout();
      });
    },
    logout() {
      this.$store.dispatch("LogOut").then(() => {
        location.reload();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.mian-navbar {
  position: relative;
  height: 0.65rem;
  width: 100%;
  line-height: 0.65rem;
  background-image: linear-gradient(to right, #071c6b, #0c5aaf, #138fe7);
  display: flex;

  .title-ctn {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 1.093vw;
    h2 {
      font-size: 0.29rem;
      background-image: -webkit-linear-gradient(top, white, white, #b5cbfa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .navbar {
    flex: 1;
    height: 100%;
    background: no-repeat left bottom url("~@/assets/images/layout/title_3.png");
    background-size: 100% auto;

    .right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      user-select: none;
      cursor: normal;
      position: absolute;
      top: 0;
      right: 1.2vw;
      height: 100%;
      & > div {
        display: flex;
        align-items: center;
        a {
          font-size: 24px;
          margin-right: 0.1rem;
        }
      }
    }

    .avatar-wrapper {
      &:before {
        position: absolute;
        right: 0;
        height: auto;
        width: 12px;
      }

      position: relative;
      display: flex;
      align-items: center;
      padding-right: 15px;
      color: #51dbff;
      font-size: 13px;
      img {
        height: 26px;
        width: 26px;
        border-radius: 4px;
        margin-right: 4px;
        border: 0;
      }
      span {
        display: block;
        max-width: 55px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
      }
    }

    &:focus {
      outline: none;
    }

    .right-menu {
      flex: 1;
      color: #adcbbc;
      margin-right: 0.2rem;
      & > div:last-child {
        display: flex;
        margin-left: 10px;
        &:not(rect) {
          font-size: 18px;
        }
      }
    }
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }
}
</style>
