/**
 * 明细组件
 * @author xiufu.wang
 */
import { isEmptyString, isArray, isEmptyArray, objectProperty } from 'mars-pro/src/pro/util'
import numberFormat, { isEmptyNumber, formatThousands } from 'mars-pro/src/pro/number-format'
import resolveFormSelectdata from 'mars-pro/src/pro/resolve-form-selectdata'
import { formatDate } from 'mars-pro/src/utils/date-util'
import PropDataSource from 'mars-pro/src/pro/mixins/propDataSource';
import { ProConfigProvideMixin } from 'mars-pro/packages/pro-config-provide';
import ProEllipsisText from 'mars-pro/packages/pro-ellipsis-text';
import omit from 'mars-pro/src/pro/omit';

function formatInputNormalText(v) {
    if (isEmptyString(v) || isEmptyArray(v)) {
        return ''
    }
    v = isArray(v) ? v : [v]
    return v.filter(r => !!r).join(' - ')
}

//格式化日期
function formatDateString(v, formater) {
    if (isEmptyString(v) || isEmptyArray(v)) {
        return ''
    }
    v = isArray(v) ? v : [v]
    return v.map(r => {
        if (isEmptyString(r)) {
            return null
        }
        return formatDate(r, formater)
    }).filter(r => !!r).join(' - ')
}

export default {
    name: 'ProDetail',
    componentName: 'ProDetail',
    inheritAttrs: false,
    mixins: [PropDataSource, ProConfigProvideMixin],
    components: {
        ProEllipsisText
    },
    provide() {
        return {
            proDetail: this,
        };
    },
    inject: {
        elForm: {
            default: "",
        },
        elFormItem: {
            default: "",
        }
    },
    data() {
        return {
            detailContent: ''
        }
    },
    props: {
        value: {},
        detailType: {
            type: String,
            default: 'input'
        },
        //详情值类型: 当detailType='input'有效
        detailValueType: {
            type: String,
            default: 'text'
        },
        showEllipsis: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        forceChange() {
            this.resolveDetail()
        }
    },
    computed: {
        forceChange() {
            return [this.value, this.elForm && this.elForm.detailModel, this.dataSource]
        }
    },
    methods: {
        renderSlots() {
            const slots = omit(this.$slots || {}, ['default'])
            return Object.keys(slots).map(item => (
                <template slot={item}>{slots[item]}</template>
            ))
        },
        setDetailContent(v) {
            if (this.detailContent !== v) {
                this.detailContent = v
            }
        },
        resolveDetail() {
            let detail = ''
            if (isEmptyString(this.value) || (isArray(this.value) && this.value.length === 0)) {
                this.setDetailContent('')
                return
            }
            if (this.detailType === 'input') {
                // input
                if (this.detailValueType !== 'number' && this.detailValueType !== 'number-range') {
                    detail = this.value
                } else {
                    let _values = isArray(this.value) ? this.value : [this.value]
                    detail = _values.filter(r => !isEmptyNumber(r)).map(r => {
                        return numberFormat({
                            ...this.$attrs,
                            input: formatThousands(r, true),
                            reverseUnit: true,
                            ...(this.$attrs.rate > 0 ? { unit: this.$attrs.rate } : {}),
                            returnFormatDecimal: true
                        }).value
                    })
                    detail = detail.length < 2 ? detail[0] : detail
                }
                this.setDetailContent(detail)
            } else {
                const configProvide = this.getConfigProvide()
                // select
                const v = resolveFormSelectdata(this, this.value, configProvide)
                //multipleSelectLabelTxtSeparator
                const multipleSelectLabelTxtSeparator = objectProperty(configProvide || {}, 'config.multipleSelectLabelTxtSeparator', ',')
                if (v !== null) {
                    Promise.resolve(v).then((res) => {
                        this.setDetailContent((isArray(res) ? res : [res]).map(r => r.label).join(multipleSelectLabelTxtSeparator))
                    })
                }
            }
        }
    },
    render() {
        const _datas = {
            props: {
                ...this.$attrs,
                text: formatInputNormalText(this.detailContent)
            },
            attrs: {
                ...this.$attrs
            },
            on: this.$listeners,
            'class': {
                'pro-detail': true
            }
        }
        //如何包含默认作用域插槽
        if (this.$scopedSlots.default) {
            //统一格式为数组,便于用户在作用插槽中处理
            let _slotParams = []
            if (isArray(this.detailContent)) {
                _slotParams = this.detailContent
            } else {
                if (!isEmptyString(this.detailContent) && !isEmptyNumber(this.detailContent)) {
                    _slotParams = [this.detailContent]
                }
            }
            if (this.$attrs.format && (this.detailValueType === 'date' ||
                    this.detailValueType === 'datetime' ||
                this.detailValueType === 'date-range')) {
                // 转换
                _slotParams = [formatDateString(_slotParams[0], this.$attrs.format), formatDateString(_slotParams[1], this.$attrs.format)]
            }
            return <div {..._datas}>{this.$scopedSlots.default(_slotParams)}</div>
        }
        //非作用域插槽
        if (this.$slots.default && isArray(this.$slots.default)) {
            return <div {..._datas}>{this.$slots.default}</div>
        }

        if (!this.showEllipsis) {
            // pro-input 文本输入框内置格式化逻辑处理
            if (this.detailType === 'input') {
                //日期: 日期、日期事件、日期时间段
                if (this.$attrs.format && (this.detailValueType === 'date' ||
                    this.detailValueType === 'datetime' ||
                    this.detailValueType === 'date-range')) {
                    return <span>{formatDateString(this.detailContent, this.$attrs.format)}</span>
                }
            }
            return <span>{formatInputNormalText(this.detailContent)}</span>
        }
        return (
            <ProEllipsisText {..._datas}>
                {
                    this.renderSlots()
                }
            </ProEllipsisText>
        )
    },
    mounted() {
        //解析label
        this.resolveDetail()
    }
}