<template>
  <div class="header_layout">
    <div class="logo">
      <img src="../../../static/images/logo.png" />
    </div>
    <div class="title">
      <span>{{systemTitle}}</span>
    </div>
    <div class="header_btn">
      <div class="toolbar-items">
        <a-dropdown style="margin-right: 5px;" :trigger="['click','hover']">
          <a class="ant-dropdown-link">
            <a-avatar class="ava-img" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
            <span class="title_f" v-if="userInfo.unitName"> {{userInfo.unitName}}</span>
            <span class="title_f">({{userInfo.loginName }})</span>
          </a>
          <a-menu slot="overlay" style="margin-top: 20px!important;">
            <a-menu-item>
              <a href="javascript:;" @click="personInfo">
                <div style="padding: 2px 30px 2px 10px">
                  <span>
                    <a-icon type="user" style="margin-right: 10px" />
                  </span><span>个人设置</span>
                </div>
              </a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="toUpdatePwd">
                <div style="padding: 2px 30px 2px 10px">
                  <span>
                    <a-icon type="edit" style="margin-right: 10px" />
                  </span><span>密码修改</span>
                </div>
              </a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="logout">
                <div style="padding: 2px 30px 2px 10px">
                  <span>
                    <a-icon type="poweroff" style="margin-right: 10px" />
                  </span><span>退出</span>
                </div>
              </a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
      <div class="toolbar-items" v-if="false">
        <a-dropdown style="margin-right: 5px;" :trigger="['click','hover']">
          <a class="ant-dropdown-link">
            <a-icon type="message" class="toolbar-icon icon_f" />
          </a>
          <div slot="overlay" style="margin-top: 20px!important;">
            <!-- 禁止事件下传，这样点击自定义的下拉菜单就不会收起了，注意宽高完全覆盖好 -->
            <div @click.stop>
              <!-- 菜单内容 -->
              <div class="msg-layout">
                <div class="msg-item">
                  <div class="logo-ft">
                    <div class="logo">
                      <a-icon type="message" class="toolbar-icon icon_f" />
                    </div>
                  </div>
                  <div class="msg-nav">
                    <div class="nav-ct">2023-07-28系统更新通知</div>
                    <div class="nav-date">2023-07-28 22:34:11</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-dropdown>
      </div>
      <div class="toolbar-items" v-if="userInfo.type === '3'">
        <a-dropdown style="margin-right: 5px;" :trigger="['click','hover']">
          <a class="ant-dropdown-link">
            <a-icon type="unordered-list" class="toolbar-icon icon_f" />
          </a>
          <a-menu slot="overlay" style="margin-top: 20px!important;">
            <a-menu-item>
              <a href="javascript:;" @click="switchType(1)">
                <div style="padding: 2px 30px 2px 10px" :class="{'key-active':!isKeyPoint}">
                  <a-icon type="right-circle" style="margin-right: 4px" />
                  <span>卫生健康领域科技计划项目</span>
                  <a-icon type="check" style="margin-left: 8px" v-if="!isKeyPoint" />
                </div>
              </a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="switchType(2)" :class="{'key-active':isKeyPoint}">
                <div style="padding: 2px 30px 2px 10px">
                  <a-icon type="right-circle" style="margin-right: 4px" />
                  <span>首府地区公立医院高水平临床专科建设科技项目</span>
                  <a-icon type="check" style="margin-left: 8px" v-if="isKeyPoint" />
                </div>
              </a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
    <a-modal v-model="visibleEdit" title="密码修改" width="600px" :footer="null" destroyOnClose>
      <update-pwd v-model="id" @close="() => visibleEdit = false"> </update-pwd>
    </a-modal>
  </div>
</template>

<script>
import { removeToken } from '@/views/utils/auth'
import updatePwd from '@/views/system/updatePwd/Index.vue'

export default {
  name: "LayoutHeader",
  components: { updatePwd },
  data () {
    return {
      userInfo: {},
      visibleEdit: false,
      id: null,
      systemTitle: '',
      isKeyPoint: false,
    }
  },
  mounted () {

  },
  created () {
    this.userInfo = JSON.parse(window.sessionStorage.getItem('user'))
    if (this.userInfo.projType && this.userInfo.type === '3') {
      this.isKeyPoint = (this.userInfo.projType == '2' ? true : false)
      this.systemTitle = process.env.VUE_APP_SYSTEM_TITLE
      // this.systemTitle = process.env.VUE_APP_SYSTEM_TITLE + (this.userInfo.projType == '2' ? '--重点学科申报' : '--科研项目申报')
    } else
      this.systemTitle = process.env.VUE_APP_SYSTEM_TITLE
  },
  computed: {
    projType: {
      get () {
        return this.$store.state.app.projType
      },
      set () {
      }
    },
  },
  methods: {
    logout () {
      this.$confirm({
        title: '确定要退出登录吗?',
        onOk: () => {
          this.$api.base.logout().then(({ data }) => { }).catch(() => { })
          removeToken()
          window.sessionStorage.clear();
          this.$store.commit('app/clearStore')
          this.$router.push(`/login`)
        },
      });
    },
    personInfo () {
      this.$store.commit('app/addCard', { title: '个人设置', key: '1005', code: 'personInfo', keepAlive: 1, router: '/personInfo', closable: true })
    },
    //修改密码
    toUpdatePwd () {
      this.visibleEdit = true
    },
    switchType (projType) {
      if (this.$store.state.app.projType != projType) {
        this.$changeProjType(projType)
      }
    }
  },
  watch: {
    projType: {
      handler (value) {
        if (value) {
          this.isKeyPoint = (value == '2' ? true : false)
          // this.systemTitle = process.env.VUE_APP_SYSTEM_TITLE + (value == 2 ? '--重点学科申报' : '--科研项目申报')
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
.key-active {
  font-weight: 600;
  color: #1890ff;
}
.msg-layout {
  width: 350px;
  min-height: 180px;
  border: 1px solid #e6ebf5;
  background: #fff !important;
  z-index: 99;
  .msg-item {
    height: 60px;
    border-bottom: 1px dashed #e8e8e8;
    cursor: pointer;
    .logo-ft {
      display: inline-block;
      width: 60px;
      height: 60px;
      position: relative;
      .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        background: #1890ff;
        border-radius: 50%;
        padding: 5px 8px 8px 7px;
        .anticon {
          font-size: 16px;
          color: #fff !important;
        }
      }
    }
    .msg-nav {
      display: inline-block;
      width: calc(100% - 60px);
      .nav-ct {
        width: 100%;
        line-height: 35px;
        overflow-wrap: break-word;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .nav-date {
        width: 100%;
        font-size: 12px;
        height: 25px;
        overflow-wrap: break-word;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .msg-item:hover {
    background: #e6f7ff;
  }
}
</style>