<template>
  <el-drawer
    :visible.sync="drawer"
    direction="ltr"
    :with-header="false"
    size="50%"
  >
    <div class="p-4">
      <img class="mb-3" src="../assets/image/mob-logo.png" alt="logo" />
      <el-tree
        :data="menuList"
        node-key="id"
        highlight-current
        @node-click="handleNodeClick"
        :props="{
          children: 'children',
          label: 'name'
        }"
      />
    </div>
  </el-drawer>
</template>

<script>

export default {
  name: 'MenuDrawer',
  data() {
    return {
      drawer: false,
      menuList: [
        { name: this.$t('menu.Home'), href: '/' },
        { name: this.$t('menu.AboutUs'), href: '/abou-us' },
        { 
          name: this.$t('menu.Products'), 
          href: undefined,
          children: [
            { name: this.$t('menu.Products'), href: '/products' },
            { name: this.$t('menu.Products'), href: '/products' },
            { name: this.$t('menu.Products'), href: '/products' },
            { name: this.$t('menu.Products'), href: '/products' },
          ]
        },
        { name: this.$t('menu.News'), href: '/news' },
        { name: this.$t('menu.Exhibition'), href: '/exhibition' },
        { name: this.$t('menu.ContactUs'), href: '/contact-us' },
        { name: this.$t('menu.Feedback'), href: '/feedback' },
      ]
    }
  },
  methods: {
    handleNodeClick(data) {
      if (data.href) {
        this.$router.push(data.href)
        this.drawer = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .is-current {
  > .el-tree-node__content {
    color: #015fe8;
  }
}

</style>