<template>
  <uni-row
    :gutter="10"
    class="h--100 center overflow--auto"
    :style="styleConfig.face"
  >
    <uni-col
      v-for="(item, index) in dataList"
      :key="index"
      :span="colWidth"
      :style="{
        borderRight: index < dataList.length - 1 ? '1px solid #ebeef5' : 'none',
        height: '100%',
      }"
    >
      <view
        class="danger fs--18"
        style="height: 33.33%"
        :style="styleConfig.one"
        >{{ item.one }}</view
      >
      <view
        class="w--100p center c666 fs--13 textdot1"
        style="height: 33.33%"
        :style="styleConfig.two"
      >
        {{ item[propConfig["two"]] }}
      </view>
      <view
        class="w--100p fp--center fs--13 textdot2"
        :style="styleConfig.three"
        >{{ item[propConfig["three"]] }}</view
      >
    </uni-col>
  </uni-row>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch, watchEffect } from "vue";
interface Props {
  dataList: any; // 数据源
  propConfig?: any; // 属性映射
  styleConfig?: Object;
}
const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  propConfig: {
    one: "one",
    two: "two",
    three: "three",
  },
  styleConfig: {
    face: "",
    one: "",
    two: "",
    three: "",
  },
});

const colWidth = computed(() => {
  if (props.dataList.length) {
    return Math.floor(24 / props.dataList.length);
  }
  return 24;
});
</script>

