<template>
    <div class="el-form-item-look">
        <slot>
            <div v-if="ele == 'upload'" class="upload-list el-upload-list--picture-card">
                <template v-for="(item, index) in currentValue">
                    <el-image
                            v-if="listType == 'picture-card'"
                            class="el-upload-list__item"
                            :src="getUrl(item)"
                            :preview-src-list="urlList"
                            :initial-index="index"
                    >
                    </el-image>
                    <div v-else class="upload-list-item">
                        <el-link type="primary" @click="handleDownload(item)">{{ item.name || item.fileName }}</el-link>
                    </div>
                </template>
            </div>
            <span v-else>{{ currentValue }}</span>
        </slot>
    </div>
</template>

<script>
    export default {
        name: 'Content',
        props: {
            ele: String,
            type: String,
            listType: String,
            value: [String, Number, Array],
            lookValue: [String, Number],
            options: {
                type: Array,
                default: () => []
            },
            labelKey: {
                type: String,
                default: 'dictLabel'
            },
            valueKey: {
                type: String,
                default: 'dictValue'
            },
            multiple: Boolean,
            valueFormat: {
                type: String,
                default: 'yyyy-MM-dd'
            },
            rangeSeparator: {
                type: String,
                default: '-'
            },
            startDate: String,
            endDate: String,
            download: {
                type: Function,
                default() {
                    return this.$ELEMENT.upload?.download?.call(this, ...arguments)
                }
            }
        },
        inject: ['elForm', 'elFormItem'],
        created() {

        },
        computed: {
            currentValue() {
                if (this.lookValue) {
                    return this.lookValue
                }
                if (this[this.ele]) {
                    return this[this.ele]()
                }
                return this.value
            },
            urlList() {
                return this.currentValue.map(item => {
                    return item.fileUrl || item.url
                })
            }
        },
        methods: {
            dictSelect() {
                let options = []
                if (this.type) {
                    options = this.$ELEMENT.dictSelect?.getOptions(this.type)
                } else {
                    options = this.options
                }
                if (this.multiple) {
                    let filterData = options.filter(item => this.value.includes(item[this.valueKey]))
                    return filterData.map(item => item[this.labelKey]).join(',')
                } else {
                    let row = options.find(item => item[this.valueKey] == this.value)
                    if (row) {
                        return row[this.labelKey]
                    }
                }

                return this.value
            },
            datePicker() {
                let value = this.lookValue || this.value
                let valueFormat = this.valueFormat || this.format
                if (!this.valueFormat) {
                    return value
                }
                let format = this.$ELEMENT.formContent?.format
                if (!format) {
                    return value
                } else {
                    if (this.type == 'daterange') {
                        if (this.startDate && this.endDate) {
                            return format(start, valueFormat) + this.rangeSeparator + format(end, valueFormat)
                        }
                        if (this.startDate) {
                            return format(start, valueFormat)
                        }
                        if (this.endDate) {
                            return format(end, valueFormat)
                        }
                    }
                    return format(value, valueFormat)
                }

                return ''
            },
            handleDownload(file) {
                this.download && this.download.call(this, file)
            },
            getUrl(file) {
                return file.fileUrl || file.url
            }
        },
    }
</script>

<style scoped>

</style>
