<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
          ><el-icon><el-icon-caret-bottom /></el-icon>
        </div>
        <template v-slot:dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="logout">注销</el-dropdown-item>
            <el-dropdown-item command="forward"
              >返回云鹊医首页</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

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

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

<script>
import {
  CaretBottom as ElIconCaretBottom,
  Edit as ElIconEdit,
  Phone as ElIconPhone,
} from '@element-plus/icons'
import {
  getLoginUrl,
  getInnerLoginUrl,
  getYunQueYiUrl,
} from '../../utils/index.js'
import { mapGetters } from 'vuex'
import opinionDialog from '@/components/opinionDialog'
import { handleLogout } from '@/utils/account/accountApi'

let vm = null
export default {
  components: {
    opinionDialog,
    ElIconCaretBottom,
    ElIconEdit,
    ElIconPhone,
  },
  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') {
        // 新增 调用后端退出登录接口
        handleLogout()

        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%;
  font-size: 22px;
  line-height: 64px;
  color: #fff;
  .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>
