<template>
  <!-- <uv-list v-if="colums.length && data && Object.keys(data).length">
    <template v-for="(item, i) in columsList" :key="i">
      <slot :slotName="item.dataIndex" :data="item">
        <uv-list-item :title="item.title" :right-text="item?.value">
        </uv-list-item>
      </slot>
    </template>
  </uv-list> -->
  <uv-form labelWidth="160rpx">
    <template v-for="(item, i) in columsList" :key="i">
      <slot :slotName="item.dataIndex" :data="item">
        <uv-form-item :label="item.title" :labelPosition="item.labelPosition">
          <uv-input inputAlign="right" :border="`none`" v-model="item.value"></uv-input>
        </uv-form-item>
      </slot>
    </template>
  </uv-form>
</template>
<script setup>
import { computed } from 'vue'

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

const columsList = computed(() => {
  const arr = []
  props.colums.forEach((e) => {
    const { dataIndex, format } = e
    // console.log(props.data)
    // props.data[dataIndex]
    let str =getValue(props.data,dataIndex) 
    if (isFunction(format)) {
      str = format(str)
    }
    arr.push({
      ...e,
      value: str,
    })
  })
  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>
