<template>
  <header class="view-header rowACenter">
    <img src="@/assets/images/logo.png" alt="logo" class="logo" />
    <div class="flex-1"></div>
    <view-search
        class="view-header-search relative"
        @search="search"
        @search-success="searchSuccess"
        @search-empty="searchEmpty"
    >
      <search-modal v-model:value="searchDataValue" :data="searchData"></search-modal>
    </view-search>
    <aside
        v-for="(item,index) in controlData"
        class="control-button rowCenter cursor-pointer"
        :key="'control-'+index"
        @click="trigger(item,index)"
    >
      <img :src="item.icon" class="control-icon" />
      <span class="control-label">{{item.label}}</span>
    </aside>
    <!--  用户模块   -->
    <section class="view-header-user row">
      <!--  登录模式   -->
      <aside v-if="$store.getters.isLogin" class="user-login rowACenter">
        <v-image
          :src="user.head_pic"
          class="user-avatar cursor-pointer"
          radius="50%"
          @click="openUserInfo"
        ></v-image>
        <div class="flex-1 overflow">
          <div class="user-name line-1">{{user.nick_name}}</div>
          <section class="rowACenter user-number">
            <img src="@/assets/images/currency.png" class="user-currency" />
            <div class="overflow line-1 user-login-text">{{$store.getters.integral}}</div>
            <aside @click="openRecharge" class="user-number-button button-active center">充值</aside>
          </section>
        </div>
        <section @click="outLogin" class="row aCenter button-active user-exit-wrap">
          <img src="@/assets/images/exit.png" class="user-exit" />
          <div class="user-exit-label">退出</div>
        </section>
      </aside>
      <!--  未登录模式   -->
      <aside v-else @click="openLogin" class="user-no-login rowACenter cursor-pointer">
        <img src="../images/no-user.png" class="user-no-login-icon" />
        <span class="user-no-login-label">立即登录</span>
      </aside>

    </section>
  </header>
</template>

<script>
import viewSearch from '$views/view-search';

import controlData from '../data/control';

import mixins from '../mixins/index';

import searchModal from '../components/search-modal';

import {
  vImage
} from '$components';

export default {
  name: "view-header",

  data:function () {
    return {
      controlData
    }
  },

  mixins,

  components:{
    viewSearch,
    vImage,
    searchModal
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>