<template>
  <div class="menu">
    <Drawer
      width="270"
      class="my-drawer"
      @close="onClose"
      :closable="true"
      :visible="isShow"
    >
      <div class="logo mb-3.5 px-6">
        <img src="@/assets/images/header/logo.png" width="164" alt="yuanlian" />
      </div>
      <ul class="menulist">
        <li
          class="px-6 text-base text-title-color"
          :class="{ 'menu-active': $route.path === '/home' }"
          @click="goPage('/')"
        >
          {{ $t('lang.home') }}
        </li>
        <li class="px-6 text-base text-title-color">
          <a
            :href="
              iconType === 'zh-CN'
                ? 'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/zh.pdf'
                : 'https://yuanorg.oss-ap-southeast-1.aliyuncs.com/ycc/white-paper/en.pdf'
            "
            target="_blank"
          >
            {{ $t('lang.book') }}
          </a>
        </li>
        <li
          class="px-6 text-base text-title-color"
          :class="{
            'menu-active':
              $route.path === '/newsList' || $route.path === '/newsDetails',
          }"
          @click="goPage('/newsList')"
        >
          {{ $t('lang.news') }}
        </li>
        <li
          class="px-6 text-base text-title-color"
          :class="{
            'menu-active':
              $route.path === '/blockChainBrowser' ||
              $route.path === '/block' ||
              $route.path === '/blockDetail' ||
              $route.path === '/tradeHash' ||
              $route.path === '/tradeList' ||
              $route.path === '/address',
          }"
          @click="goPage('/blockChainBrowser')"
        >
          {{ $t('lang.blockChainBrowser') }}
        </li>
      </ul>
    </Drawer>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Drawer } from 'ant-design-vue'
export default Vue.extend({
  components: {
    Drawer,
  },
  props: {
    isShow: Boolean,
    iconType: {
      type: String,
      default: 'zh-CN',
    },
  },
  methods: {
    onClose() {
      this.$emit('close', true)
    },
    goPage(p: string) {
      this.$router.push({ path: p, query: { lang: this.$route.query.lang } })
      this.onClose()
    },
  },
})
</script>

<style>
.ant-drawer-close {
  top: 9px;
}
.ant-drawer-body {
  padding-left: 0;
  padding-right: 0;
}
.my-drawer {
  z-index: 3001;
}
</style>

<style scoped>
.menulist li {
  line-height: 48px;
}

.menu-active {
  background: #eff5ff;
}
</style>
