<template>
    <el-form-item
        ref="formItem"
        :class="`form-item${pathname}-${item?.model || 'default'}`"
        :identifier="item.identifier"
        :label-width="config.labelWidth"
        :prop="item?.model"
        :rules="item.validate"
        :size="config.size"
        :style="[config.customFormItemStyle || styleConfig(item), {marginBottom: !!config.inline ? '0' : '18px;'}]"
        :test-cy="item?.model"
    >
        <template
            v-if="item.label"
            v-slot:label="scope"
        >
            <div
                :class="['label', config.labelPosition]"
            >
                <span>{{ typeof item.label === 'function' ? $t(item.label(scope.row)) : $t(item.label) }}</span>
                <el-tooltip
                    v-if="item?.tips"
                    placement="top"
                    popper-class="label-tip"
                    :content="$t(item.tips())"
                >
                    <el-icon
                        class="tooltips"
                        size="14px"
                    >
                        <Warning/>
                    </el-icon>
                </el-tooltip>
            </div>
        </template>
        <slot/>
    </el-form-item>
</template>
<script lang="ts">
import { inject, defineComponent, ref } from 'vue'
import { Warning } from '@element-plus/icons-vue'
import { ObjectInterface } from '../../script/index'

export default defineComponent({
    name: 'InfoFormItem',
    components: {
        Warning
    },
    props: {
        item: {
            type: Object,
            default: () => {
            }
        }
    },
    setup() {
        const pathname = window.location.pathname.replace(/\//g, '-')
        let config: ObjectInterface = inject('config') as ObjectInterface
        const styleConfig = (item: any): ObjectInterface => {
            let style: ObjectInterface = {}
            if (item.margin) {
                style[`margin${item.margin}`] = 'auto'
            }
            if (item.width) {
                style['width'] = item.width + '%'
            }
            if (item.inline) {
                style['display'] = 'inline-block'
            }
            if (item.gridColumn) { // 如[1，3]
                style['grid-column'] = `${item.gridColumn[0]} / span ${item.gridColumn[1]}`
            }
            if (item.gridRow) {
                style['grid-row'] = `${item.gridRow[0]} / span ${item.gridRow[1]}`
            }
            Object.assign(style, item.style)
            return style
        }
        // let { item } = props
        // function itemProp () :string{
        //     // 日期范围时 校验开始（或结束）日期即可
        //     if (item.type === 'infoDatePicker' && !['date', 'datetime'].includes(this.item.dateType)) {
        //         return item.model.split(',')[0]
        //     }
        //     return item.model
        // }
        // function handleLabel () {
        //     let { label, labelI18n } = item
        //     if (!label) return ''
        //     label = typeof label === 'function' ? label() : label
        //     return labelI18n ? label : $t(`${label}`)
        // }
        interface Rule {
            [key: string]: any
        }
        const formItem = ref()
        const clearValidate = () => {
            formItem.value.clearValidate()
        }
        return {
            label: '姓名',
            prop: 'name',
            config,
            pathname,
            formItem,
            styleConfig,
            clearValidate
        }
    },
    mounted() {
        // console.log(this.formItem)
    }
})
</script>
<style lang="scss" scoped>
.el-form-item {
    align-items: center;
}
.el-form--inline .el-form-item {
    margin-bottom: 0;
}
:deep(.el-form-item__label) {
    position: relative;
    .label {
        display: inline;
        padding-right: 12px;
    }
    .tooltips {
        position: absolute;
        right: 5px;
        top: 50%;
        margin-top: -8px;
    }
}
.el-form--label-top .el-form-item :deep(.el-form-item__label) {
    display: inline-block;
}
.contentTip {
    max-width: calc(50vw)
}
</style>
