<i18n>
{
  "zh-CN": {
    "search-placeholder": "请输入搜索内容",
    "help-center": "帮助中心",
    "bank-map": "网银地图",
    "old-ticket": "旧版票据",
    "logout": "退出"
  },
  "zh-TW": {
    "search-placeholder": "請輸入搜索內容",
    "help-center": "幫助中心",
    "bank-map": "網銀地圖",
    "old-ticket": "舊版票據",
    "logout": "退出"
  }
}
</i18n>
<template>
  <div class="navbar-help">
    <logo />
    <div class="navbar-help-opers">
      <el-input
        v-model="searchText"
        :placeholder="t('search-placeholder')"
        type="search"
        size="small"
        style="width: 220px;"
        @keyup.enter="search()"
      >
        <template #prefix>
          <i
            class="el-icon-search el-input__icon"
          />
        </template>
      </el-input>
      <span v-for="help in helps" :key="help.text" @click="operate(help.id)" style="display: flex; align-items: center;">
        <el-icon>
          <component :is="help.icon" />
        </el-icon>
        <span style="margin-left: 5px">{{ t(help.text) }}</span>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import Logo from './Logo.vue'
import { useLoginStore } from '@/portal/store/login'
import { defineComponent, ref } from 'vue-demi'
import { useI18n } from 'vue-i18n'

const helps: Array<{
  icon: string,
  text: string,
  id: 'help'|'map'|'ticket'|'logout'
}> = [
  { icon: 'Help', text: 'help-center', id: 'help' },
  { icon: 'Position', text: 'bank-map', id: 'map' },
  { icon: 'Postcard', text: 'old-ticket', id: 'ticket' },
  { icon: 'SwitchButton', text: 'logout', id: 'logout' }
]

export default defineComponent({
  name: 'HelperIndex',
  components: {
    Logo
  },
  setup () {
    const searchText = ref('')
    function search () {
      // ...
    }

    const loginStore = useLoginStore()
    function operate (id: 'help'|'map'|'ticket'|'logout') {
      if (id === 'logout') {
        loginStore.logout()
      }
    }

    const { t } = useI18n()

    return {
      t,
      helps,
      searchText,
      search,
      operate
    }
  }
})
</script>

<style lang="scss" scoped>
.navbar-help {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  .navbar-help-opers {
    white-space: nowrap;
    display: flex;
    align-items: center;
    & > span {
      margin: 15px;
    }
  }
}
</style>
