<template>
  <el-table-column
    :key="item.code"
    :prop="item.key"
    :label="item.label||item.name"
    v-bind="item.props"
  >
    <template v-if="item.type!=='group'" #default="scope">
      <div :style="item.style" v-if="Array.isArray(item.key)">
        <span class="item-cell" :key="'s'+si" v-for="(val,si) in item.key">
           <slot
             v-if="item.type&&item.type==='slot'"
             :name="item.slotName||item.key"
             :row="scope.row"
             :config="item"
           ></slot>
          <template v-else-if="item.type&&edit">
           <s-dom
             v-model="scope.row[val]"
             :prefix="item.prefix"
             :type="item.type"
             :options="item.options"
             :props="item.props"
             @change="(e)=>changeValue(e,scope,val,'change')"
           />
          </template>
          <template v-else-if="item.component&&item.component!=='#'">
             <Component
               :is="item.component"
               v-model="scope.row[val]"
               :prefix="item.prefix"
               :type="item.type"
               :options="item.options"
               :props="item.props"
               @change="(e)=>changeValue(e,scope,item.key,'change')"
             ></Component>
          </template>
          <template v-else>{{ scope.row[val] }}</template>
          <template v-if="item.separator&&si!==item.key.length-1">{{ item.separator }}</template>
        </span>
      </div>
      <slot
        v-if="item.type&&item.type==='slot'"
        :name="item.slotName||item.key"
        :row="scope.row"
        :config="item"
      ></slot>
      <template v-else-if="item.type&&edit">
        <s-dom
          v-model="scope.row[item.key]"
          :prefix="item.prefix"
          :type="item.type"
          :options="item.options"
          :props="item.props"
          :row="scope.row"
          @change="(e)=>changeValue(e,scope,item.key,'change')"
        />
      </template>
      <template v-else-if="item.component&&item.component!=='#'">
        <Component
          :is="item.component"
          v-model="scope.row[item.key]"
          :prefix="item.prefix"
          :type="item.type"
          :options="item.options"
          :props="item.props"
          :row="scope.row"
          @change="(e)=>changeValue(e,scope,item.key,'change')"
        ></Component>
      </template>
      <template v-else>
        {{ item.props?.formatter ? item.props?.formatter(scope.row, item, scope.row[item.key]) : scope.row[item.key] }}
      </template>
    </template>
    <template v-if="item.type==='group'">
      <columns
        :key="ssi"
        v-for="(sitem,ssi) in item.children"
        :item="sitem"
        :edit="edit"
      >
        <template #[item.key]="{row,config}" v-for="(child) in item.children.filter(i=>i.type==='slot')">
          <slot
            v-if="child.type&&child.type==='slot'"
            :name="child.key"
            :row="row"
            :config="child"
          ></slot>
        </template>
      </columns>
    </template>
  </el-table-column>
</template>
<script lang="ts" setup>
import { inject } from 'vue'

interface Props {
  item: any
  edit: boolean
}

const {
  item = () => ({}),
  edit = false
} = defineProps<Props>()
const emits = defineEmits<{
  (e: 'changRow', row: any): void
}>()
const changeValue = inject('changeValue')
</script>
<style lang="scss" scoped>
.page {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>
