<template>
  <div class="header">
    <slot name="left"></slot>
    <a href="/">
      <div class="header-logo">
        <img src="../../assets/images/logo_open.png">
      </div>
    </a>
    <div class="headerR">
      <slot name="right"></slot>
      <span class="header-nav">
        <Dropdown>
          <span @click="go(1)">财务中心</span>
          <DropdownMenu slot="list">
            <DropdownItem @click.native="financial(1)">交易流水</DropdownItem>
            <DropdownItem @click.native="financial(2)">订单管理</DropdownItem>
            <DropdownItem @click.native="financial(3)">续费管理</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </span>
      <span class="header-nav" @click="go(7)">营销中心</span>
      <span class="header-nav" @click="go(2)">帮助中心</span>
      <a href="/center">
        <span class="xx-btn-link mr-10">
          <Icon custom="iconfont icon1" size="20" />
        </span>
      </a>
      <span class="xx-btn-link mr-20" @click="go(6)" style="position:relative">
        <span v-if="statusMsg == 'YES'" class="xx-btn-text redColor icon-all">{{unread_count}}</span>
        <Icon custom="iconfont icon5" size="20" />
      </span>
      <Poptip class="poptip" placement="bottom-end">
        <span class="user">
          <Icon custom="iconfont icon4" size="28" />{{userinfo.user_name}}
        </span>
        <div slot="content">
          <span class="btn-out" @click="go(3)"><i class="iconfont icon2"></i>账户中心</span>
          <span class="btn-out" @click="go(4)"><i class="iconfont icon123"></i>信息核验</span>
          <span class="btn-out" @click="go(5)"><i class="iconfont icon119"></i>任务中心</span>
          <span class="btn-out" @click="utils.loginOut()"><i class="iconfont icon40"></i>退出登录</span>
        </div>
      </Poptip>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusMsg: null,
      unread_count: 0,
      menus: [],
      activeName: null,
      userinfo: {},
      walletinfo: {},
      arr: [],
    };
  },
  props: {
    isCollapsed: Boolean,
  },
  computed: {
    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    },
  },
  created() {
    utils.refreshLoginInfo((user) => {
      this.userinfo = user;
    });
    this.checkRead();
  },
  methods: {
    checkRead() {
      //是否有未读消息
      utils.api(10627).then((res) => {
        let data;
        if ((data = utils.isSuccess(res))) {
          this.statusMsg = data.all_status;
          this.unread_count = data.un_read_count;
          if (this.unread_count > 99) {
            this.unread_count = "99+";
          }
        }
      });
    },
    handleCollpasedChange() {
      this.$emit("on-coll-change");
    },
    handleSelect(val) {
      this.activeName = val;
      this.$emit("on-select-change", this.activeName);
    },
    loadWallet() {
      this.api(10502).then((res) => {
        let data;
        if ((data = this.utils.isSuccess(res))) {
          this.walletinfo = data.wallet_info;
        }
      });
    },
    goHome() {
      window.location.href = "/";
    },
    go(tag) {
      if (tag == 1) {
        window.open("/wallet", "_blank");
      } else if (tag == 2) {
        window.open("/website/help", "_blank");
      } else if (tag == 3) {
        window.open("/member", "_blank");
      } else if (tag == 4) {
        window.open("/verification", "_blank");
      } else if (tag == 5) {
        window.location.href = "/center#/task/index";
      } else if (tag == 6) {
        window.location.href = "/center#/message/index";
      } else if (tag == 7) {
        window.open("/market", "_blank");
      }
    },
    financial(tag) {
      if (tag == 1) {
        window.open("/wallet#/bussiness/audit-bussiness", "_blank");
      } else if (tag == 2) {
        window.open("/wallet#/orderRegime/orderList", "_blank");
      } else if (tag == 3) {
        window.open("/wallet#/renewalARegime/renewalList", "_blank");
      }
    },
  },
};
</script>
<style scoped lang="less">
@import "~@/assets/less/variable";
.user {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.header {
  display: flex;
  align-items: center;
  padding-right: 30px;
}
.header-logo {
  padding-left: 30px;
  padding-right: 30px;
  cursor: pointer;
  img {
    display: block;
  }
}
.header-nav {
  color: #333;
  cursor: pointer;
  margin-right: 30px;
  &:hover {
    color: @primary-color;
  }
}
.headerR {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 16px;
}
.rotate-icon {
  transform: rotate(-90deg);
}

.user {
  .iconfont {
    margin-right: 10px;
    color: @primary-color;
  }
  &:hover {
    color: @primary-color;
  }
}
.btn-out {
  display: flex;
  align-items: center;
  padding: 6px 0;
  font-size: 15px;
  cursor: pointer;
  .iconfont {
    margin-right: 8px;
    font-size: 20px;
    color: inherit;
  }
  &:hover {
    color: @primary-color;
  }
}

.xx-btn-link {
  cursor: pointer;
  color: #999;
}
.redColor {
  color: #ff6772;
}
.icon-all {
  display: inline-block;
  background: #ff6772;
  color: #fff;
  padding: 2px 4px;
  border-radius: 10px;
  position: absolute;
  top: -35%;
  left: 51%;
  font-size: 12px;
}
.icon-all1 {
  display: inline-block;
  background: #ff6772;
  color: #fff;
  padding: 2px 4px;
  border-radius: 10px;
  position: absolute;
  top: 3px;
  left: 3%;
}
</style>

