/* global cy */
import ListCard from './listCard.vue'
import moment from 'moment'

const today = moment().format('YYYY-MM-DD')

const createProps = (overrides = {}) => {
    const baseProps = {
        data: {
            index: 0,
            name: '测试',
            time: today,
            nested: {
                label: '嵌套值'
            }
        },
        config: {
            map: {
                index: '序号',
                name: '名称',
                time: '时间'
            },
            title: '测试ListCard'
        },
        attr: {
            column: 1,
            direction: 'horizontal',
            labelStyle: {
                color: '#303D67',
                fontSize: '14px',
                fontWeight: 400,
                width: 'auto'
            }
        },
        itemAttr: {
            operation: {
                name: {
                    type: 'primary',
                    text: '修改名称',
                    method: cy.spy().as('clickHandler')
                }
            }
        }
    }

    return {
        ...baseProps,
        ...overrides,
        data: {
            ...baseProps.data,
            ...overrides.data
        },
        config: {
            ...baseProps.config,
            ...overrides.config,
            map: {
                ...baseProps.config.map,
                ...overrides.config?.map
            }
        },
        attr: {
            ...baseProps.attr,
            ...overrides.attr,
            labelStyle: {
                ...baseProps.attr.labelStyle,
                ...overrides.attr?.labelStyle
            }
        },
        itemAttr: {
            ...baseProps.itemAttr,
            ...overrides.itemAttr,
            operation: overrides.itemAttr?.operation === undefined
                ? baseProps.itemAttr.operation
                : overrides.itemAttr.operation
        }
    }
}


const mountListCard = (props = {}, slots = {}) => {
    cy.mount(ListCard, {
        props: createProps(props),
        slots
    })
}

describe('<ListCard/> 组件', () => {
    it('挂载组件正确并显示标题', () => {
        mountListCard()
        cy.get('.list-card').should('exist')
        cy.get('.el-descriptions__title').should('contain.text', '测试ListCard')
    })

    it('根据 config.map 正确渲染基础字段内容', () => {
        mountListCard()
        cy.get('.el-descriptions-item__label').should('contain.text', '序号')
        cy.get('.el-descriptions-item__label').should('contain.text', '名称')
        cy.get('.el-descriptions-item__label').should('contain.text', '时间')
        cy.get('.el-descriptions-item__content').should('contain.text', '0')
        cy.get('.el-descriptions-item__content').should('contain.text', '测试')
        cy.get('.el-descriptions-item__content').should('contain.text', today)
    })

    it('显示 extra 插槽内容', () => {
        mountListCard({}, {
            extra: '<div class="extra-slot">操作区</div>'
        })

        cy.get('.extra-slot').should('contain.text', '操作区')
    })

    it('为配置的字段渲染具名插槽内容', () => {
        mountListCard({
            config: {
                map: {
                    index: '序号',
                    name: '名称',
                    time: '时间'
                },
                title: '测试ListCard',
                slots: ['name']
            }
        }, {
            name: '<div class="name-slot">自定义名称内容</div>'
        })

        cy.get('.name-slot').should('contain.text', '自定义名称内容')
        cy.get('.el-descriptions-item__content').should('not.contain.text', '测试')
    })

    it('包含 divider 配置时拆分分组并显示分组标题', () => {
        mountListCard({
            config: {
                map: {
                    index: '序号',
                    divider1: '基础信息',
                    name: '名称',
                    time: '时间'
                },
                title: '测试ListCard'
            }
        })

        cy.get('.el-descriptions').should('have.length', 2)
        cy.get('.el-divider__text').should('contain.text', '基础信息')
    })

    it('tips 命中的字段显示 tooltip 包裹内容', () => {
        mountListCard({
            config: {
                map: {
                    index: '序号',
                    name: '名称',
                    time: '时间'
                },
                title: '测试ListCard',
                tips: ['name']
            }
        })

        cy.get('.tip-text').should('contain.text', '测试')
    })

    it('修改事件正确触发', () => {
        mountListCard()
        cy.contains('.el-button', '修改名称').click()
        cy.get('@clickHandler').should('have.been.calledOnce')
    })

    it('operation.show 未定义时默认显示按钮', () => {
        mountListCard()
        cy.contains('.el-button', '修改名称').should('exist')
    })

    it('operation.show 返回 false 时不显示按钮', () => {
        mountListCard({
            itemAttr: {
                operation: {
                    name: {
                        type: 'primary',
                        text: '修改名称',
                        show: () => false,
                        method: cy.spy().as('hiddenClickHandler')
                    }
                }
            }
        })

        cy.contains('.el-button', '修改名称').should('not.exist')
    })

    it('operation.show 返回 true 时显示按钮', () => {
        mountListCard({
            itemAttr: {
                operation: {
                    name: {
                        type: 'primary',
                        text: '修改名称',
                        show: () => true,
                        method: cy.spy().as('visibleClickHandler')
                    }
                }
            }
        })

        cy.contains('.el-button', '修改名称').should('exist')
    })

    it('应用 className 和 labelClassName', () => {
        mountListCard({
            itemAttr: {
                className: 'custom-content-class',
                labelClassName: 'custom-label-class',
                operation: {
                    name: {
                        type: 'primary',
                        text: '修改名称',
                        method: cy.spy().as('classClickHandler')
                    }
                }
            }
        })

        cy.get('.custom-content-class').should('exist')
        cy.get('.custom-label-class').should('exist')
    })

    it('按 attr.split 读取嵌套字段值', () => {
        mountListCard({
            config: {
                map: {
                    'nested.label': '嵌套名称'
                },
                title: '测试ListCard'
            },
            attr: {
                column: 1,
                direction: 'horizontal',
                split: 1
            },
            itemAttr: {}
        })

        cy.get('.el-descriptions-item__label').should('contain.text', '嵌套名称')
        cy.get('.el-descriptions-item__content').should('contain.text', '嵌套值')
    })
})