<template>
    <view :class="{ 'u-list-item--disabled': disabled }"
          :hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'u-list-item--hover'"
          class="u-list-item" @click.stop="onClick">
        <view v-if="!isFirstChild" class="border--left" :class="{ 'u-list--border': border }"></view>
        <view class="u-list-item__container"
              :class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }">
            <slot name="header">
                <view class="u-list-item__header">
                    <view v-if="thumb" class="u-list-item__icon">
                        <image :src="thumb" class="u-list-item__icon-img" :class="['u-list--' + thumbSize]"/>
                    </view>
                    <view v-else-if="showExtraIcon" class="u-list-item__icon">
                        <ac-icon :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type"/>
                    </view>
                </view>
            </slot>
            <slot name="body">
                <view class="u-list-item__content"
                      :class="{ 'u-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
                    <text v-if="title" class="u-list-item__content-title"
                          :class="[ellipsis !== 0 && ellipsis <= 2 ? 'u-ellipsis-' + ellipsis : '']">{{ title }}
                    </text>
                    <text v-if="note" class="u-list-item__content-note">{{ note }}</text>
                </view>
            </slot>
            <slot name="footer">
                <view v-if="rightText || showBadge || showSwitch" class="u-list-item__extra"
                      :class="{ 'flex--justify': direction === 'column' }">
                    <text v-if="rightText" class="u-list-item__extra-text">{{ rightText }}</text>
                    <ac-badge v-if="showBadge" :type="badgeType" :text="badgeText"/>
                    <switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange"/>
                </view>
            </slot>
        </view>
        <ac-icon v-if="showArrow || link" :size="16" class="u-icon-wrapper" color="#bbb" name="arrowright"/>
    </view>
</template>

<script>
    export default {
        name: 'ac-list-item',
        props: {
            direction: {
                type: String,
                default: 'row'
            },
            title: {
                type: String,
                default: ''
            },
            note: {
                type: String,
                default: ''
            },
            ellipsis: {
                type: [Number],
                default: 0
            },
            disabled: {
                type: [Boolean, String],
                default: false
            },
            clickable: {
                type: Boolean,
                default: false
            },
            showArrow: {
                type: [Boolean, String],
                default: false
            },
            link: {
                type: [Boolean, String],
                default: false
            },
            to: {
                type: String,
                default: ''
            },
            showBadge: {
                type: [Boolean, String],
                default: false
            },
            showSwitch: {
                type: [Boolean, String],
                default: false
            },
            switchChecked: {
                type: [Boolean, String],
                default: false
            },
            badgeText: {
                type: String,
                default: ''
            },
            badgeType: {
                type: String,
                default: 'success'
            },
            rightText: {
                type: String,
                default: ''
            },
            thumb: {
                type: String,
                default: ''
            },
            thumbSize: {
                type: String,
                default: 'base'
            },
            showExtraIcon: {
                type: [Boolean, String],
                default: false
            },
            extraIcon: {
                type: Object,
                default() {
                    return {
                        type: 'contact',
                        color: '#000000',
                        size: 20
                    };
                }
            },
            border: {
                type: Boolean,
                default: true
            }
        },
        inject: ['list'],
        data() {
            return {
                isFirstChild: false
            };
        },
        mounted() {
            if (!this.list.firstChildAppend) {
                this.list.firstChildAppend = true;
                this.isFirstChild = true;
            }
        },
        methods: {
            onClick() {
                if (this.to !== '') {
                    this.openPage();
                    return;
                }
                if (this.clickable || this.link) {
                    this.$emit('click', {
                        data: {}
                    });
                }
            },
            onSwitchChange(e) {
                this.$emit('switchChange', e.detail);
            },
            openPage() {
                if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
                    this.pageApi(this.link);
                } else {
                    this.pageApi('navigateTo');
                }
            },
            pageApi(api) {
                uni[api]({
                    url: this.to,
                    success: res => {
                        this.$emit('click', {
                            data: res
                        });
                    },
                    fail: err => {
                        this.$emit('click', {
                            data: err
                        });
                        console.error(err.errMsg);
                    }
                });
            }
        }
    };
</script>

<style lang="scss">
    .u-list-item {
        display: flex;
        font-size: 16px;
        position: relative;
        justify-content: space-between;
        background-color: #fff;
        flex-direction: row;
    }

    .u-list-item--disabled {
        opacity: 0.3;
    }

    .u-list-item--hover {
        background-color: $u-bg-color;
    }

    .u-list-item__container {
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 12px 15px;
        padding-left: 15px;
        flex: 1;
        overflow: hidden;
    }

    .container--right {
        padding-right: 0;
    }

    .u-list--border {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
    }

    .u-list--border:after {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        background-color: $u-border-color;
    }

    .u-list-item__content {
        display: flex;
        padding-right: 8px;
        flex: 1;
        color: #3b4144;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }

    .u-list-item__content--center {
        justify-content: center;
    }

    .u-list-item__content-title {
        font-size: 14px;
        color: #3b4144;
        overflow: hidden;
    }

    .u-list-item__content-note {
        margin-top: 6 rpx;
        color: $u-main-color;
        font-size: 12px;
        overflow: hidden;
    }

    .u-list-item__extra {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .u-list-item__header {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .u-list-item__icon {
        margin-right: 18rpx;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .u-list-item__icon-img {
        display: block;
        height: 26px;
        width: 26px;
    }

    .u-icon-wrapper {
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

    .flex--direction {
        flex-direction: column;
        align-items: initial;
    }

    .flex--justify {
        justify-content: initial;
    }

    .u-list--lg {
        height: 40px;
        width: 40px;
    }

    .u-list--base {
        height: 26px;
        width: 26px;
    }

    .u-list--sm {
        height: 20px;
        width: 20px
    }

    .u-list-item__extra-text {
        color: $u-main-color;
        font-size: 12px;
    }

    .u-ellipsis-1 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .u-ellipsis-2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>
