<template>
  <div class="layout_sys">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <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 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>
          </div>
          <div class="toolbar-items">
            <a class="ant-dropdown-link" @click="logout()" style="margin-right: 8px;">
              <a-icon type="poweroff" class="toolbar-icon icon_f" />
              <span class="title_f"> </span>
            </a>
          </div>
        </div>
      </div>
      <div class="content_layout_sys">
        <div class="type-tab">
          <div class="type-tab-list">
            <div class="type-tab-item type-tab-item-active"><span>系统入口</span></div>
          </div>
        </div>
        <div class="content">
          <div class="content_list">
            <div class="content_list_item " @click="onChangeType(1)">
              <div class="item_header item_b"></div>
              <div class="item_center">
                <a-icon type="file-text" class="item_center-icon" theme="twoTone" two-tone-color="#f5b65c" />
              </div>
              <div class="item_title">云南省卫生健康领域<br />科技计划项目</div>
              <div class="item_bottom">
                <a-icon type="right-circle" class="item_bottom-icon" />
              </div>
            </div>
            <div style="margin-left: 70px;" class="content_list_item" @click="onChangeType(2)">
              <div class="item_header item_r"></div>
              <div class="item_center">
                <a-icon type="book" class="item_center-icon" theme="twoTone" two-tone-color="#ff87a8" />
              </div>
              <div class="item_title">云南省<br />公立医院高水平临床专科建设<br />科技项目</div>
              <div class="item_bottom">
                <a-icon type="right-circle" class="item_bottom-icon" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script>
import { removeToken } from '@/views/utils/auth'
export default {
  name: "",
  components: {

  },
  data () {
    return {
      loading: false,
      userInfo: {},
      systemTitle: process.env.VUE_APP_SYSTEM_TITLE
    }
  },
  created () {
    this.userInfo = JSON.parse(window.sessionStorage.getItem('user'))
  },
  methods: {
    onChangeType (type) {
      this.loading = true
      this.$changeProjType(type)
      this.loading = false
    },
    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`)
        },
      });
    },
  }
}
</script>
<style lang="less" scoped>
.layout_sys {
  width: 100%;
  height: 100vh;
  background: #f7f8fa;
  .content_layout_sys {
    max-width: 1200px;
    min-width: 900px;
    height: calc(100vh - 60px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 20px;
    margin: 0 auto;
    .type-tab {
      border-bottom: 1px solid #1890ff;
    }
    .type-tab {
      height: 120px;
      padding-bottom: 4px;
      .type-tab-list {
        width: 100%;
        height: 100%;
        text-align: center;
        position: relative;
      }
      .type-tab-item {
        margin-top: 70px;
        left: 50%;
        display: inline-block;
        font-size: 14px;
        color: #1890ff;
        border: 1 solid transparent;
        border-radius: 15px;
        height: 36px;
        line-height: 36px;
        padding: 0 40px;
        background-clip: padding-box;
        cursor: pointer;
      }
      .type-tab-item-active {
        color: #fff;
        background: linear-gradient(90deg, #5fb2f9, #4794f7);
      }
      .type-tab-item-active:after {
        content: "";
        display: inline-block;
        position: absolute;
        bottom: -9px;
        left: 50%;
        transform: translateX(-50%) rotate(-45deg);
        border-top: 1px solid #5fb2f9;
        border-right: 1px solid #5fb2f9;
        width: 10px;
        height: 10px;
        background-color: #f7f8fa;
      }
    }
    .content {
      width: 100%;
      .content_list {
        border-radius: 12px;
        padding: 24px;
        text-align: center;
      }
      .content_list_item {
        width: 200px;
        height: 260px;
        margin: 20px 0 0 20px;
        display: inline-block;
        vertical-align: top;
        border-radius: 10px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        transition: all 0.1s linear 0s;
        border: 1px solid #f0f0f0;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
      }
      .content_list_item:hover {
        .item_bottom .item_bottom-icon {
          color: #1890ff;
        }
        cursor: pointer;
        transform: translate(0, -0.2px);
        border: 1px solid #cacacb;
        box-shadow: 5px 5px 5px #b9d0e9c2;
      }
      .content_list_item .item_header {
        height: 24px;
        border-radius: 10px 10px 0px 0px;
      }
      .item_b {
        background: #f5b65c;
      }
      .item_r {
        background: #ff87a8;
      }
      .item_center {
        padding: 28px 0 0 0;
        text-align: center;
        .item_center-icon {
          font-size: 40px;
          color: #595959;
        }
      }
      .item_title {
        padding: 14px 0 0 0;
        text-align: center;
        color: #666;
        font-size: 14px;
        line-height: 1.5;
      }
      .item_bottom {
        padding: 20px 0 0 0;
        .item_bottom-icon {
          font-size: 28px;
          color: #595959;
        }
      }
    }
    a:visited {
      color: #333;
      text-decoration: none;
    }
    a:link {
      color: #333;
      text-decoration: none;
    }
  }
}
</style>