<template>
    <!-- 使用 flex 布局子元素自动撑满，即渲染列 -->
    <div class="matrix option">
        <template v-if="item.option">
            <!-- 题目 -->
            <div>
                <div class="item head"></div>
                <div class="item head" v-for="(n, i) in item.value" :key="i">{{ n.name }}</div>
            </div>
            <!-- 选项 -->
            <div v-for="(optionItem, optionIndex) in item.option.list" :key="optionIndex">
                <div class="item head">{{ optionItem.name }}</div>
                <div v-for="(valueItem, valueIndex) in item.value" :key="valueIndex">
                    <div class="item radio">
                        <el-radio :value="valueItem.value" :label="optionItem.value"></el-radio>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

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

<style lang="less" scoped>
.matrix {
    display: flex;
    text-align: center;
    border-top: 1px solid #DCDFE6;
    border-left: 1px solid #DCDFE6;
    white-space: nowrap;
    overflow-x: auto;
    & > div {
        flex-grow: 1;
    }
    .item {
        min-height: 32px;
        line-height: 31px;
        padding: 0 10px;
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
    }
    .head {
        background-color: #f2f2f2;
    }
    .radio {
        background-color: #fff;
        /deep/ .el-radio__label {
            display: none;
        }
    }
}
</style>
