import { computed, h, defineAsyncComponent } from 'vue'
import { formInputViewProps } from '../../form-input-props'
import { setOptionWritable } from './util'
import './index.less'
export default {
  components: {
    CipTable: () => import('@cip/components/cip-table')
  },
  props: formInputViewProps,
  emits: ['statusChange', 'update:modelValue'],
  setup (props, { emit }) {
    const options = computed(() => {
      const o = props.config.options || []
      return setOptionWritable(o, false)
    })

    return () => {
      // hideOnEmpty为true时判断 值是否存在
      if (props.config.hideOnEmpty && (!props.modelValue || props.modelValue?.length === 0)) {
        emit('statusChange', false)
        return null
      }
      emit('statusChange', true)
      return h('div', { class: ['basic-table', 'basic-table--view'] }, [
        h(defineAsyncComponent(() => import('@cip/components/cip-table')), {
          data: props.modelValue,
          columns: options.value,
          rowKey: props.config.rowKey,
          treeProps: props.config.treeProps || props.config.optionProps || {},
          offset: 0,
          hideIndex: props.config.hideIndex,
          dependOnValues: props.dependOnValues,
          border: true,
          stripe: true,
          showSummary: props.config.showSummary,
          tableHeaderLabel: props.config.tableHeaderLabel,
          size: 'default'
        })
      ])
    }
  }
}
