<!-- 图片（图片类型的图标）文字排列导航栏 -->
<template>
  <view
    v-if="type == 1"
    :style="{ marginLeft: margin + '%', width: 100 - margin * 2 + '%' }"
    :class="faceClass"
  >
    <view class="row--">
      <view
        :class="'col--' + 24 / datas.length"
        v-for="(data, index) of datas"
        :key="index"
      >
        <navigator :url="data[config.url]">
          <view class="row-- fpy--center">
            <view class="m--20 fp--center">
              <image :src="data[config.img]" class="w--50 h--50"></image>
            </view>
            <view class="ml---10">
              <text :class="data[config.textClass]">{{
                data[config.name]
              }}</text>
            </view>
            <view class="arrow--r9--2"></view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
  <view
    v-else-if="type == 2"
    :style="{ marginLeft: margin + '%', width: 100 - margin * 2 + '%' }"
    :class="faceClass"
  >
    <view class="row-- px--5">
      <view
        :class="'col--' + 24 / datas.length"
        v-for="(data, index) of datas"
        :key="index"
      >
        <navigator :url="data[config.url]">
          <view
            class="mx--5 br--8 relative"
            :style="'height: 115px; background: ' + data[config.bgcolor] + ';'"
          >
            <view
              class="pt--15 center"
              :style="'color: ' + data[config.color] + ';'"
            >
              <text :class="data[config.textClass]">{{
                data[config.name]
              }}</text>
            </view>
            <view>
              <image
                :src="data[config.img]"
                style="
                  position: absolute;
                  bottom: 0;
                  left: 10%;
                  width: 80%;
                  height: 70px;
                "
              ></image>
            </view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
interface Props {
  type?: number; //type=1图片左文字右排列, type=2文字上图片下排列
  margin?: number; // 组件左右外边距
  faceClass?: string; // 组件最外层class样式
  datas?: object[]; // 数据
  config?: any; //数据属性的配置关系
}
withDefaults(defineProps<Props>(), {
  margin: 3,
  faceClass: "bgc--white h--90 relative br--8 t---10",
  config: {
    url: "url",
    name: "name",
    img: "img",
    color: "color",
    bgcolor: "bgcolor",
    textClass: "textClass",
  },
  datas: () => [],
});
</script>
<style lang="scss"></style>

