<template>
  <div>
    <a-row type="flex" :gutter="24" >
      <a-col :xl="3" :lg="3" :md="3" :sm="24" :xs="24">
        <a @click="backFeama" class="logo">
          <img alt="logo" src="../assets/qirui.svg" />
        </a>
      </a-col>
      <a-col flex="auto" :xl="19" :lg="19" :md="19" :sm="24" :xs="24">
        <div class="fmea-info-bar mt10">
          <a-row :gutter="24">
            <a-form layout="inline">
              <a-col :xl="6" :lg="6" :md="6" :sm="6" :xs="24">
                <a-form-item layout="inline">
                  <template slot="label">
                    <!-- 项目编号 -->
                    <h3 class="fmea-info-title">{{ $t('header.project-number') }}:&nbsp;&nbsp;</h3>
                  </template>
                  <a-tooltip placement="bottom">
                    <template slot="title">{{ $t(projectNo) }}</template>
                    <h3 class="fmea-info-detail">{{ $t(projectNo).length > 10 ? $t(projectNo).slice(0,10) : $t(projectNo) }}</h3>
                  </a-tooltip>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="6" :md="6" :sm="6" :xs="24">
                <!-- 性能模块 -->
                <a-form-item layout="inline" v-if="headerFlag === 1">
                  <template slot="label">
                    <h3 class="fmea-info-title">{{ $t('header.performance-module') }}:&nbsp;&nbsp;</h3>
                  </template>
                  <a-tooltip placement="bottom">
                    <template slot="title">{{ $t(performanceModule) }}</template>
                    <h3 class="fmea-info-detail">{{ $t(performanceModule) }}</h3>
                  </a-tooltip>
                </a-form-item>
                <!-- 系统名称 -->
                <a-form-item layout="inline" v-if="headerFlag === 2">
                  <template slot="label">
                    <h3 class="fmea-info-title">{{ $t('header.system-name') }}:&nbsp;&nbsp;</h3>
                  </template>
                  <a-tooltip placement="bottom">
                    <template slot="title">{{ $t(systemName) }}</template>
                    <h3 class="fmea-info-detail">{{ $t(systemName) }}</h3>
                  </a-tooltip>
                </a-form-item>
              </a-col>
              <!-- DVP计划版本号 -->
              <a-col :xl="6" :lg="6" :md="6" :sm="6" :xs="24" v-if="headerFlag !== 3">
                <a-form-item layout="inline">
                  <template slot="label">
                    <h3 class="fmea-info-title">{{ $t('header.dvp-plan-version') }}:&nbsp;&nbsp;</h3>
                  </template>
                  <a-tooltip placement="bottom">
                    <template slot="title">{{ $t(versionNO) }}</template>
                    <h3 class="fmea-info-detail">{{ $t(versionNO) }}</h3>
                  </a-tooltip>
                </a-form-item>
              </a-col>
            </a-form>
          </a-row>
        </div>
      </a-col>
      <a-col class="headerIcon" flex="auto" :xl="2" :lg="2" :md="2" :sm="24" :xs="24">
        <a class="mr8" href="javascript:void(0);">
          <GlobalMenu></GlobalMenu>
        </a>
        <a class="mr12" @click="backFeama">
          <i class="iconfont iconhome03 backFeama"></i>
        </a>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import utils from '@/utils/urlParamUtil';
import GlobalMenu from './GlobalMenu';

export default {
  name: "",
  components:{
    GlobalMenu
  },
  props: {
    // 整车、系统、零部件
    headerFlag:{
      type: Number,
      default: undefined
    },
    // DVP计划版本号
    versionNO:{
      type: String,
      default: undefined
    },
    // 项目编号
    projectNo: {
      type: String,
      default: '',
    },
    // 性能模块
    performanceModule: {
      type: String,
      default: '',
    },
    // 系统名称
    systemName: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      userInfo:{}
    };
  },
  mounted() {
  },
  watch: {
  },
  created() {
    this.setApiUrl();
  },
  methods: {
    backFeama() {
      localStorage.removeItem("historyData")
      localStorage.removeItem("historyText")
      let back = utils.getUrlKey('back')
      let backUrl = this.$api.fmUrl + '/#' + back
      window.open(backUrl, '_top')
    },
    setApiUrl() {
      this.setCookie("dev", -1);
      var apiUrl = this.getCookie("apiUrl");
      if (!apiUrl) {
        this.setCookie("apiUrl", this.$api.baseUrl);
      }
    },
    setCookie(name, value) {
      if (value) {
        var days = 1; //定义一天
        var exp = new Date();
        exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
        // 写入Cookie, toGMTString将时间转换成字符串
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString;
      }
    },
    getCookie(cookie_name) {
      var allcookies = document.cookie;
      //索引长度，开始索引的位置
      var cookie_pos = allcookies.indexOf(cookie_name);

      // 如果找到了索引，就代表cookie存在,否则不存在
      if (cookie_pos != -1) {
        // 把cookie_pos放在值的开始，只要给值加1即可
        //计算取cookie值得开始索引，加的1为“=”
        cookie_pos = cookie_pos + cookie_name.length + 1;
        //计算取cookie值得结束索引
        var cookie_end = allcookies.indexOf(";", cookie_pos);

        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        }
        //得到想要的cookie的值
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    },
  }
};
</script>

<style lang="less" scoped>
.headerIcon{
  color: #1890FF;
  a{
    margin-left: 10px;
    float:right;
    i{
      font-size: 25px;
    }
  }
}
.logo {
  height: 200px;
  margin: 10px 0;
  //display: inline-block;
  vertical-align: top;

  img {
    margin-left: 30px;
    height: 60px;
    display: block;
  }
}

.ant-menu-horizontal {
  border-color: transparent;
  margin: 8px 0;
  margin-left: 20px;
  font-size: 16px;
}

.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  border-bottom-color: transparent;
}

.fmea-info-title {
  font-weight: bold;
}
.fmea-info-detail {
  min-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 38px;
}
.backFmea {
  font-size: 22px;
  color: #1890FF;
}
</style>
