<template>
  <div class="bg-white p-3 mt-3 flex items-center justify-between rounded-xl">
    <div class="left flex gap-xs items-center">
      <el-avatar shape="square" :src="data?.image" :size="55" />
      <div class="shop-name flex flex-col">
        <div class="shop-name cursor-pointer">
          <div class="flex items-center">
            <text class="text-xl">{{ data?.merchantName }}</text>
            <el-tag type="success" size="small" class="ml-2">官网</el-tag>
          </div>
        </div>
        <el-rate
            v-model="rate"
            show-score
            text-color="#ff9900"
            score-template="{value}">
        </el-rate>
      </div>
    </div>
    <el-button>进入店铺</el-button>
  </div>
</template>
<script setup lang="ts">

import type {Navigation} from "~/api/cms/navigation/model";
import type {Merchant} from "~/api/shop/merchant/model";

withDefaults(
    defineProps<{
      data?: Merchant;
    }>(),
    {}
);

const rate = ref(5);
</script>

<style scoped lang="scss">

</style>
