<!-- 导航 元素 -->
<template>
  <!-- <div class="nav-item"> -->
  <van-cell is-link class="relative" @click="rout(config)">
    <template slot="title">
      <van-icon v-if="config.icon" class="t-cell-icon" size="6.4vw" :name="config.icon" />
      <img v-else class="t-cell-icon" :src="config.src" alt="config" />
      <span class="custom-title"> {{ config.title }}</span>
    </template>
  </van-cell>
  <!-- </div> -->
</template>

<script>
import { Cell } from 'vant'
import { weixinShare } from '@/assets/js/utils/wxShare.js'
export default {
  name: 'NavItem',
  components: {
    [Cell.name]: Cell
  },
  props: {
    config: {
      type: Object,
      required: true,
      default: function() {
        return {
          title: '默认title',
          path: '/404',
          src: 'http://localhost:8080/favicon.ico'
        }
      }
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    rout(config) {
      if (!config.share) {
        let path = config.path
        this.$jump({
          flag: 'h5',
          extra: {
            url: location.origin + `/#${path}`
          },
          routerInfo: { path: path }
        })
      } else {
        // eslint-disable-next-line no-undef
        // EWebBridge.webCallAppInJs('bridge', {
        //   flag: 'share',
        //   extra: {
        //     shareType: '1',
        //     img: this.imgUrl
        //   }
        // })
        weixinShare(config.shareConfig)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .nav-item {
.t-cell-icon {
  position: absolute;
  width: 6.4vw;
  height: 6.4vw;
}
.custom-title {
  margin-left: 8.4vw;
}
// }
</style>
