<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/chain33.png" width="140" 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://zbzb.s3.ap-northeast-1.amazonaws.com/yuan.org/ycc/white-paper/zh.pdf'
                : 'https://zbzb.s3.ap-northeast-1.amazonaws.com/yuan.org/ycc/white-paper/en/YUANCHAIN-Whitepaper.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;
  color: #2545cb;
}
</style>
