<template>
  <uv-form labelWidth="200rpx">
    <template v-for="(item, i) in columsList" :key="i">
      <template v-if="item.show">
        <uv-form-item
          v-if="item.type == 'album'"
          :label="item.title"
          :labelWidth="item.labelWidth"
          labelPosition="top"
        >
          <!-- {{ item.value }} -->
          <view class="mt-20rpx w-full">
            <uv-album
              multipleSize="190rpx"
              singleSize="190rpx"
              :urls="item.value"
              :rowCount="3"
              :maxCount="50"
              space="18rpx"
              :showMore="false"
            ></uv-album>
          </view>
        </uv-form-item>
        <uv-form-item
          v-else
          :label="item.title"
          :labelPosition="item.labelPosition"
          :labelWidth="item.labelWidth"
        >
          <view
            class="w-full text-hex-999"
            :style="[addStyle(item.customStyle)]"
            :class="[
              [
                item.labelPosition == 'top'
                  ? 'text-left mt-10rpx'
                  : 'text-right',
              ],
            ]"
            >{{ item.value }}</view
          >
        </uv-form-item>
        <uv-line
          v-if="i < columsList.length - 1 && (item?.bottomBorder || true)"
          color="#f5f5f5"
        ></uv-line>
      </template>
    </template>
  </uv-form>
</template>
<script setup>
import { computed } from 'vue'
import { addStyle } from '@climblee/uv-ui/libs/function/index'

const props = defineProps({
  colums: {
    type: Array,
    default: () => [],
  },
  data: {
    type: Object,
    default: () => {},
  },
})

const columsList = computed(() => {
  const arr = []
  props.colums.forEach((e) => {
    const { dataIndex, format, isShow } = e
    let str = getValue(props.data, dataIndex)
    let show = true
    if (isFunction(format)) {
      str = format(str)
    }
    if (isFunction(isShow)) {
      show = isShow(props.data)
    }
    arr.push({
      ...e,
      value: str,
      show: show,
    })
  })
  return arr
})

const getValue = (obj, path) => {
  return path.split('.').reduce((acc, key) => (acc ? acc[key] : undefined), obj)
}

const isFunction = (fn) => {
  return typeof fn === 'function'
}
</script>
