<template>
    <div>
        <div class="item" v-for="(n, i) in item.value" :key="i">
            <div class="number">
                <span>{{ i + 1 }}</span>
            </div>
            <div class="name">{{ n.name }}</div>
            <i class="iconfont">&#xe652;</i>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: { type: Object, default: () => ({}) }
    }
}
</script>

<style lang="less" scoped>
.item {
    display: flex;
    align-items: center;
    min-height: 32px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    background-color: #fff;
    overflow: hidden;
    & + .item {
        margin-top: 5px;
    }
    .number {
        width: 50px;
        flex-shrink: 0;
        align-self: stretch;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f2f2f2;
        border-right: 1px solid #E4E7ED;
        span {
            width: 21px;
            height: 21px;
            line-height: 20px;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid #909399;
        }
    }
    .name {
        flex-grow: 1;
        padding: 6px 12px;
        line-height: 20px;
        word-break: break-all;
        text-align: left;
    }
    .iconfont {
        width: 30px;
        line-height: 30px;
        flex-shrink: 0;
        color: #606266;
    }
}
</style>
