<!-- 顶部导航栏 - 单元格 -->
<template>
  <view class="ss-flex ss-col-center">
    <!-- 类型一： 文字 -->
    <view
      v-if="data.type === 'text'"
      class="nav-title inline"
      :style="[{ color: data.textColor, width: width }]"
    >
      {{ data.text }}
    </view>
    <!-- 类型二： 图片 -->
    <view
      v-if="data.type === 'image'"
      :style="[{ width: width }]"
      class="menu-icon-wrap ss-flex ss-row-center ss-col-center"
      @tap="sheep.$router.go(data.url)"
    >
			<image class="nav-image radius-img" v-if="data.imgUrl == imgSrc" :src="userInfo.avatar?userInfo.avatar:defautAvatar" mode="aspectFit"></image>
      <image class="nav-image" v-else :src="sheep.$url.cdn(data.imgUrl)" mode="aspectFit"></image>
    </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed } from 'vue';

  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String,
      default: '1px',
    },
  });
	
	const imgSrc = 'http://api.jnmall.zq-hightech.com/admin-api/infra/file/29/get/e2f8b02bae129322f99ed06226543a55a8c13226fa688017f1454508a974d7bb.png'
	const defautAvatar = 'http://api.jnmall.zq-hightech.com/admin-api/infra/file/29/get/e2f8b02bae129322f99ed06226543a55a8c13226fa688017f1454508a974d7bb.png'
	const userInfo = computed(() => sheep.$store('user').userInfo);
	

  const height = computed(() => sheep.$platform.capsule.height);
</script>

<style lang="scss" scoped>
  .nav-title {
    font-size: 36rpx;
    color: #333;
    text-align: center;
  }

  .menu-icon-wrap {
    .nav-image {
      // height: 24px;
			height: 65rpx;
			width: 65rpx;
			border-radius: 50% !important;
    }
  }
	
	.radius-img {
		
	}
	
</style>
