<template>
    <div class="header-container">
        <div class="logo">
            <img src="../../assets/image/index_logoicon.png"/>
            <p>云鹊医工作站</p>
        </div>

        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <div class="el-dropdown-link">
                    <img class="user-logo" :src="portrait">
                    <span id="headName">{{userName}}</span><i class="el-icon-caret-bottom"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">注销</el-dropdown-item>
                    <el-dropdown-item command="forward">返回云鹊医首页</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

      <div class="exp-msg">
        <el-row :gutter="20">
          <el-col :span="9" class="msg-opinion">
            <div class="grid-content bg-purple">
              <i class="el-icon-edit"></i>
              <h1 @click="opinionShow=true">意见反馈</h1>
            </div>
          </el-col>
          <el-col :span="15" class="msg-phone">
            <div class="grid-content bg-purple-light">
              <i class="el-icon-phone"></i>
              <h1>400-920-8877</h1>
            </div>
          </el-col>
        </el-row>
      </div>

      <opinionDialog v-if="opinionShow" @closeDialog="closeDialog"></opinionDialog>

    </div>
</template>
<script>
import { getLoginUrl,getInnerLoginUrl, getYunQueYiUrl } from '../../utils/index.js'
import { mapGetters } from 'vuex'
import opinionDialog from '@/components/opinionDialog'
let vm = null
export default {
  components: {
    opinionDialog
  },
    props: {
        portrait: {
            type: String
        },
        userName: {
            type: String
        },
        idType: {
            type: Number
        }
    },
    data() {
        return {
            name: '',
            systemInfoList: [],
            opinionShow: false
        }
    },
    computed: {
        ...mapGetters([
            '_token'
        ])
    },
    created() {
        vm = this
    },
    methods: {
        handleCommand(command) {
            if (command === 'logout') {
                localStorage.removeItem('storageToken')
                if(vm.idType == 1) {  // 内部
                    window.location.href = getInnerLoginUrl()
                } else {
                    if(window.location.host.indexOf("work.yunqueyi") != -1&&window.location.host.indexOf("test2-work.yunqueyi") == -1) {
                        window.location.href = getLoginUrl('?from=work&type=logout')
                    } else {
                        this.$router.push('/login')
                    }

                }
            }
            if(command === 'forward') {
                window.location.href = getYunQueYiUrl()
            }
        },
      closeDialog(val){
          this.opinionShow = val
      }
    }
}
</script>
<style lang="scss">
.header-container {
    position: relative;
    left: 0;
    top: 0;
    box-sizing: border-box;
    height: 64px;
    width: 100%;
    z-index: 1000;
    font-size: 22px;
    line-height: 64px;
    color: #fff;
    // background-color: #242f42;
    .logo {
        float: left;
        width: 255px;
        text-align: center;
        color: #fff;
        background: #0B2F3F;
        img{
            width: 24px;
            float: left;
            margin-left: 24px;
            margin-top: 21px;
        }
        p {
            text-align: left;
            margin-left: 60px;
        }
    }
    .exp-msg{
      float: right;
      line-height: 64px;
      .msg-opinion{
        width: 140px;
      }
      .msg-phone{
        width: 180px;
      }
      .grid-content{
        i,h1{
          display: inline-block;
          vertical-align: middle;
          font-size: 16px;
          line-height: 32px;
          color: #838683;
          cursor: pointer;
        }
        h1{
          padding-right: 20px;
          border-right: 1px solid #838683;
        }
      }

    }
    .user-info {
        float: right;
        padding-right: 50px;
        font-size: 16px;
        color: #838683;
        .el-dropdown-link {
            position: relative;
            display: inline-block;
            padding-left: 50px;
            color: #838683;
            cursor: pointer;
            vertical-align: middle;
            font-size: 14px;
        }
        .user-logo {
            position: absolute;
            left: 16px;
            top: 20px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }
        .el-icon--right, #headName,.line, #login-out{
            font-size: 14px;
        }
        .line {
            display: inline-block;
            padding: 0 10px;
        }
    }
}

.el-dropdown-menu__item {
    text-align: center;
}

.menu-item {
    font-size: 14px;
    font-weight: 300;
    color: #606266;
}
</style>


