<template>
    <component v-if="column.editConfig.el" :is="isComponent()" v-bind="column.editConfig.props"
        v-model="rows[column.editConfig.key ? column.editConfig.key : column.prop]"
        :value="rows[column.editConfig.key ? column.editConfig.key : column.prop]" @change="onChange"
        :placeholder="placeholder(column)" size="small" range-separator="至" start-placeholder="开始时间"
        end-placeholder="结束时间" class="full-width-input" @submit.native.prevent>
    </component>
</template>

<script>
import ProSelect from '@/components/ProForm/fields/ProSelect/index.vue'
import ProSelectTree from '@/components/ProForm/fields/ProSelectTree/index.vue'
import ProSwitch from '@/components/ProForm/fields/ProSwitch/index.vue';
import ProCascader from '@/components/ProForm/fields/ProCascader/index.vue';
export default {
    props: {
        column: Object, // 具体每一项的配置
        rows: Object, // 行数据
    },
    components: {
        ProSelect,
        ProSelectTree,
        ProSwitch
    },
    methods: {
        //设置渲染的组件
        isComponent () {
            let result = ''
            let { column } = this
            if (column.editConfig.el && typeof column.editConfig.el === "string") {
                switch (column.editConfig.el) {
                    case 'select': result = ProSelect; break;
                    case 'select-tree': result = ProSelectTree; break;
                    case 'switch': result = ProSwitch; break;
                    case 'cascader': result = ProCascader; break;
                    default: result = `a-${column.editConfig.el}`; break;
                }
            } else {
                result = column.editConfig.el
            }
            return result
        },
        // 判断 fieldNames 设置 label && value 的 key 值
        placeholder (column) {
            return column.editConfig?.props?.placeholder ?? (column.editConfig?.el === "input" ? "请输入" : "请选择");
        },
        onChange (e) {
            let value = e.currentTarget.value;
            let { column } = this
            this.rows[column.editConfig.key ? column.editConfig.key : column.prop] = value
        }
    }
}
</script>
