<template>
  <div style="height: 100%;">
    <div class="header">
      <p class="title"><img src="../../assets/loginImg/logo.png"/>安瑞集团信息化平台</p>
      <div class="head_info">
<!--        <p>{{Orgname}},</p>-->
        <!--<p>{{$store.getters.userInfo.Orgname}}</p>-->
        <p>欢迎您，{{pNameAndDepartmentNameAndPostName}} {{name}}</p>
        <!--<img src="@/assets/images/info.png" />-->
        <p @click="logout()" class="dy"><img src="@/assets/images/dy.png"/></p>
      </div>
    </div>
    <div class="container1">
      <el-row :gutter="20">
        <el-col :span="14">
          <ul class="grid-content bg-ltop">
            <li @click="todowork">
              <img src="@/assets/home/ltIcon1.png">
              <p>待办工作</p>
            </li>
            <li @click="donework">
              <img src="@/assets/home/ltIcon2.png">
              <p>已办工作</p>
            </li>
            <li>
              <img src="@/assets/home/ltIcon3.png">
              <p>待阅工作</p>
            </li>
            <li>
              <img src="@/assets/home/ltIcon4.png">
              <p>已阅工作</p>
            </li>
          </ul>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-rtop">
            <img class="anrui" src="@/assets/home/anrui.png"/>
            <p class="rt_title">通知公告</p>
            <ul>
              <li>
                <img class="rtImg" src="../../assets/home/notice.png"/>
                <span class="notice">关于召开2021年公司全体员工大会的通知工大会的通知工大会的通知...</span>
                <span class="anrui_time">2021-09-01</span>
              </li>
              <li>
                <img src="../../assets/home/notice.png"/>
                <span class="notice">关于召开2021年公司全体员工大会的通知工大会的通知工大会的通知</span>
                <span class="anrui_time">2021-09-01</span>
              </li>
              <li>
                <img src="../../assets/home/notice.png"/>
                <span class="notice">关于召开2021年公司全体员工大会的通知</span>
                <span class="anrui_time">2021-09-01</span>
              </li>
              <li>
                <img src="../../assets/home/notice.png"/>
                <span class="notice">关于召开2021年公司全体员工大会的通知</span>
                <span class="anrui_time">2021-09-01</span>
              </li>
              <li>
                <img src="../../assets/home/notice.png"/>
                <span class="notice">关于召开2021年公司全体员工大会的通知</span>
                <span class="anrui_time">2021-09-01</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <ul class="bg-bottom">
        <li @click="toNav(index)" v-for="(item,index) in menus" :key='index'>
          <img :src="item.imgUrl">
          <p>{{item.title}}</p>
        </li>
      </ul>
      <p class="copy">Copyright © {{ year }} 安瑞集团 All Rights Reserved</p>
    </div>
    <!--<ul class="nav-box">-->
    <!--<li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
      <img src="@/assets/images/jcxx.png">
      <p>基础信息</p>
    </li>-->

    <!--<template v-for="(item, i) in menus">
      <li v-if="item.sourceName == '系统管理'" :key="i" @click="toNav('index','系统管理')" :style="{backgroundColor: item.iconBgColor}">
        <img :src="item.iconUrl">
        <p>{{ item.sourceName }}</p>
      </li>
      <li v-else :key="i" @click="toNavbar(item.pageUrl)" :style="{backgroundColor: item.iconBgColor}">
        <img :src="item.iconUrl">
        <p>{{ item.sourceName }}</p>
      </li>
    </template>-->
    <!-- <li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
      <img src="@/assets/images/jcxx.png">
      <p>基础信息</p>
    </li>
    <li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
      <img src="@/assets/images/jcxx.png">
      <p>基础信息</p>
    </li> -->
    <!-- <li @click="xxzx">
       <img src="@/assets/images/xxzx.png">
       <p>消息中心</p>
     </li>
     <li @click="xxzx">
       <img src="@/assets/images/xxzx.png">
       <p>消息中心</p>
     </li>
     <li @click="xxzx">
       <img src="@/assets/images/xxzx.png">
       <p>消息中心</p>
     </li>
     <li @click="xxzx">
       <img src="@/assets/images/xxzx.png">
       <p>消息中心</p>
     </li>
     <li style="background-color: #ffb751;" @click="xxzx">
       <img src="@/assets/images/cxjl.png">
       <p>诚信计量</p>
     </li>
     <li style="background-color: #6fb3e0;" @click="xxzx">
       <img src="@/assets/images/zwsm.png">
       <p>C标志自我声明</p>
     </li>
     <li style="background-color: #87b880;" @click="xxzx">
       <img src="@/assets/images/sjcc.png">
       <p>双随机抽查</p>
     </li>
     <li style="background-color: #448fb9;" @click="xxzx">
       <img src="@/assets/images/jlsc.png">
       <p>能量计量审查</p>
     </li>
     <li style="background-color: #24ca95;" @click="xxzx">
       <img src="@/assets/images/qjsh.png">
       <p>强检计量器具审核</p>
     </li>
     <li style="background-color: #b4429d;" @click="xxzx">
       <img src="@/assets/images/jsxd.png">
       <p>技术规范制修订</p>
     </li>
     <li style="background-color: #b3b442;" @click="toNavbar('http://39.104.100.138:8083/')">
       <img src="@/assets/images/xtbg.png">
       <p>协同办公</p>
     </li>
     <li style="background-color: #eab054;" @click="xxzx">
       <img src="@/assets/images/tjfx.png">
       <p>统计分析</p>
     </li>
     <li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
       <img src="@/assets/images/jcxx.png">
       <p>基础信息</p>
     </li>
     <li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
       <img src="@/assets/images/jcxx.png">
       <p>基础信息</p>
     </li>
     <li style="background-color: #617be8;" @click="toNav('index','系统管理')">
       <img src="@/assets/images/xtgl.png">
       <p>系统管理</p>
     </li> -->
    <!--</ul>-->
  </div>
</template>

<script>
  import {getToken, removeToken, getStorage, removeStorage} from '@/utils/auth'
  import {sourcesofrole} from '@/api/system/Role/role.js'
  import User from '@/api/User/login.js'

  export default {
    data() {
      return {
        menus: [{
          imgUrl: require('@/assets/home/bIcon1.png'),
          title: '业务管理'
        }, {
          imgUrl: require('@/assets/home/scm.png'),
          title: '供应链管理'
        }, {
          imgUrl: require('@/assets/home/bIcon2.png'),
          title: '风控管理'
        }, {
          imgUrl: require('@/assets/home/bIcon3.png'),
          title: '审计管理'
        }, {
          imgUrl: require('@/assets/home/bIcon4.png'),
          title: '财务管理'
        }, {
          imgUrl: require('@/assets/home/bIcon5.png'),
          title: '行政管理'
        }, {
          imgUrl: require('@/assets/home/bIcon6.png'),
          title: '报表中心'
        }, {
          imgUrl: require('@/assets/home/bIcon7.png'),
          title: '基础信息'
        }, {
          imgUrl: require('@/assets/home/notice.png'),
          title: '消息中心'
        }, {
          imgUrl: require('@/assets/home/bIcon8.png'),
          title: '系统管理'
        }],
        userInfo: {},
        Orgname: '',
        departmentName: '',
        name: '',
        pNameAndDepartmentNameAndPostName:'',
        year:''
      }
    },
    beforeCreate() {

    },
    mounted() {
      this.Orgname = window.sessionStorage.getItem('Orgname')
      this.departmentName = window.sessionStorage.getItem('departmentName')
      this.pNameAndDepartmentNameAndPostName = window.sessionStorage.getItem('pNameAndDepartmentNameAndPostName')
      this.name = window.sessionStorage.getItem('name')
      var nowDate = new Date()
      this.year = nowDate.getFullYear()
//    sourcesofrole({ psid: '0', roleSid: this.$store.getters.userInfo.roleSid }).then(res => {
//      this.menus = res.data
//    })
    },
    methods: {
      todowork() {
        window.open('/#/todo' + '?token=' + getStorage(), '_blank')
        // this.$router.push({ path: '/todo' + '?token=' + getStorage() })
        //  window.open('http://127.0.0.1/message'+'?token='+getStorage(),'_blank')
      },
      donework() {
        window.open('/#/done' + '?token=' + getStorage(), '_blank')
        // this.$router.push({ path: '/done' + '?token=' + getStorage() })
        //  window.open('http://127.0.0.1/message'+'?token='+getStorage(),'_blank')
      },
      logout() {
        this.$confirm('确定要退出吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          User.logout({ token: getStorage() }).then(res => {
            removeStorage()
            this.$store.commit('user/SET_UESRINFO', '')
            this.$router.push({ path: '/login' })
          })
        })
      },
      xxzx() {
        this.$alert('项目正在开发中', '提示', {
          dangerouslyUseHTMLString: true
        })
      },
      toNavbar(name) {
        let myPopup = window.open(name + '?token=' + getStorage(), '_blank')
      },
      toNav(index, name, titleName) {
        if (index == '9') {
          // this.$router.push({path: '/index'})
           let myPopup = window.open('/#/index', '_blank')
        } else if (index == '7') {
          let myPopup = window.open('http://120.46.131.15/base/#/' + '?token=' + getStorage(), '_blank')
        } else if (index == '8') {
          let myPopup = window.open('http://120.46.131.15/message/#/' + '?token=' + getStorage(), '_blank')
        } else if (index == '1') {
          //let myPopup = window.open('http://120.46.131.15/scm/#/' + '?token=' + getStorage(), '_blank')
            let myPopup = window.open('http://127.0.0.1:9531/scm/#/' + '?token=' + getStorage(), '_blank')
        } else if (index == '4') {
          let myPopup = window.open('http://120.46.131.15/fin/#/' + '?token=' + getStorage(), '_blank')
        } else if (index == '5') {
          let myPopup = window.open('http://120.46.131.15/manage/#/' + '?token=' + getStorage(), '_blank')
        } else if (index == '0') {
          let myPopup = window.open('http://120.46.131.15/buscenter/#/' + '?token=' + getStorage(), '_blank')
        }
//				const page = this.$router.resolve({name: name})
//				window.open(page.href,'_blank')
      }
    }
  }
</script>
<style scoped="scoped">
  li:hover,
  p:hover {
    cursor: pointer
  }
</style>
<style lang="scss">
  p {
    margin: 0;
    padding: 0;
  }

  .header {
    background-color: #0294d7;
    color: #fff;
    overflow: hidden;
    height: 60px;
    line-height: 60px;

    .title {
      img {
        width: 70px;
        vertical-align: middle;
        font-family: Adobe Heiti Std;
      }

      float: left;
      font-size: 34px;
      margin-left: 35px;
      height: 60px;
      line-height: 60px;
    }

    .head_info {
      float: right;
      margin-top: 0;
      font-size: 17px;
    }

    p {
      float: left;
    }
  }

  .head_info img {
    width: 25px;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 10px;
    float: left;
  }

  .head_info .dy {
    margin-left: 10px;
    margin-right: 20px;
  }

  .container1 {
    background: #E9F1F7;
    padding: 20px;
    width: 100%;
    height: calc(100% - 60px);
    margin: 0;

    .bg-ltop {
      margin: 0;
      padding: 0 20px;
      background-image: url(../../assets/home/ltBg.png);
      border-radius: 10px;
      overflow: hidden;
      height: 190px;

      li {
        float: left;
        list-style: none;
        width: 25%;
        text-align: center;

        img {
          width: 70px;
          margin: 45px auto 10px auto;
        }
      }
    }

    .bg-rtop {
      background-image: url(../../assets/home/rtBg.png);
      border-radius: 10px;
      height: 190px;
      overflow: hidden;
      position: relative;

      .anrui {
        width: 100%;
        height: 40px;
      }

      .rt_title {
        position: absolute;
        top: 10px;
        left: 15px;
        font-size: 18px;
        font-family: SourceHanSerifCN;
        font-weight: 600;
        color: #191919;
      }

      ul {
        margin: 0px auto;
        padding: 0;
        height: 148px;
        width: 100%;

        li {
          font-size: 14px;
          height: 33px;
          line-height: 28px;
          list-style: none;
          text-decoration: underline;
          border-bottom: 1px solid #666;
          width: calc(100% - 70px);
          margin-left: 40px;
          position: relative;
          padding-top: 10px;
          font-family: SimSun;

          img {
            width: 16px;
            margin: 5px 10px;
            position: absolute;
            left: -30px;
          }

          .notice {
            display: inline-block;
            width: 65%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .anrui_time {
            float: right;
            display: inline-block;
            margin-right: 5px;
            line-height: 30px;
          }
        }
      }
    }

    .bg-bottom {
      background-image: url(../../assets/home/bottomBg.png);
      border-radius: 10px;
      overflow: hidden;
      margin: 20px 0 0 0;
      padding: 10px 20px;

      li {
        float: left;
        list-style: none;
        width: 11.6%;
        margin: 10px 2.5%;
        background: #fff;
        border-radius: 40px;
        text-align: center;
        padding: 10px 25px 15px;

        img {
          width: 80%;
          margin: 10px auto;
        }
      }
    }
  }

  .copy {
    position: fixed;
    bottom: 0;
    width: calc(100% - 40px);
    margin: auto;
    text-align: center;
    line-height: 40px;
    border-top: 2px solid #4E74A6;
    background: #E9F1F7;
    font-size: 14px;
    color: #666;
  }
</style>
