<template>
    <view class="cascader-panel">
        <c-navigate
            v-for="(item, index) in data"
            :key="index"
            :url="item.url"
            :url-type="item.urlType"
            :extra="{
                mod: module + '(' + index + ')',
            }"
        >
            <view
                :class="[
                    index === actived ? 'cascader-panel__item--actived' : '',
                    index === actived ? 'cascader-panel__item--actived--' + module : '',
                ]"
                class="cascader-panel__item"
                @tap="handleItemTap(item, $event, index)"
            >
                <view v-if="item.label" class="cascader-panel__item__label">
                    <text>{{ item.label }}</text>
                    <c-icon
                        v-if="(isSelected && index === actived && item.value === '0')
                            || (selectedPannel === 2 && index === actived)"
                        name="right-new"
                        font-size="14px"
                    />
                </view>
                <view v-if="item.sublabels && item.sublabels.length" class="cascader-panel__item__sublabel">
                    <text
                        v-for="(label, labelIndex) in item.sublabels"
                        :key="labelIndex"
                        class="c-gap-right-small"
                    >{{ label }}</text>
                </view>
            </view>
        </c-navigate>
    </view>
</template>

<script>
/**
 * @file cascader 级联列表
 * @author yantingxi@baidu.com
 */
import CNavigate from '@baidu/med-ui/components/Navigate/Navigate';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import stopScrollThroughMixin from '@baidu/med-utils/lib/Mars/stopScrollThroughMixin';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    mixins: [stopScrollThroughMixin],
    props: {
        /**
         * @property data[].value 项值
         * @property data[].label 显示文案
         * @property data[].sublabel 附属信息
         * @property data[].children 子项集合
         */
        data: {
            type: Array,
            default: () => []
        },
        module: {
            type: String,
            default: 'cascader-panel'
        },
        /**
         * 选中项value
         */
        selectIndex: {
            type: Number,
            default: 0
        },
        isSelected: {
            type: Boolean,
            default: false
        },
        selectedPannel: {
            type: Number,
            default: 0
        }
    },
    components: {
        CNavigate,
        CIcon
    },
    data() {
        return {
            actived: 0
        };
    },
    watch: {
        selectIndex(val) {
            this.actived = val;
        }
    },
    created() {
        this.actived = this.selectIndex;
    },
    methods: {
        handleItemTap(data, event, index) {
            this.actived = index;
            this.$emit('handleItemTap', data, event, index);
        },
        setActived(index) {
            this.actived = index;
        }
    }
};
</script>
<style lang="less" scoped>
.cascader-panel {
    width: 100%;
    height: 100%;
    overflow-y: scroll;

    &__item {
        display: flex;
        flex-direction: column;
        color: #333;
        padding: 10px 10px;
        font-size: .14rem;
        &__label {
            display: flex;
            justify-content: space-between;
        }

        &--actived {
            background: #FFF;
            color: #00C8C8;
            font-weight: 700;
        }

        &__sublabel {
            font-size: 12px;
            color: #999;
        }
    }

    &::-webkit-scrollbar {
        display: none;
    }
}
</style>

<style lang="less">
.cascader-panel__item--actived {
    &--panel1 {
        background: #F8F8F8 !important;
    }
    &--panel2 {
        background: #FFF !important;
    }

    &--panel3 {
        background: #FFF !important;
    }
}
</style>

