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

<script>
import common from '@/common/formRender/mixin/common.js'
export default {
    mixins: [common],
    components: {
        ElRadio: () => import('./components/ElRadio')
    },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    created () {
        this.init()
        this.verifyInit()
    },
    methods: {
        // 初始化
        init () {
            if (this.formItem.value[0].value) {
                this.formItem.value.forEach(item => {
                    item.label = this.listItem.option.list.find(n => n.value === item.value).name
                })
            }
        },
        // 选择
        select (valueItem, optionItem) {
            valueItem.value = optionItem.value
            valueItem.label = optionItem.name
            this.clearValidate()
        },
        // 校验初始化
        verifyInit () {
            const rules = []
            const { required } = this.listItem.verify
            if (required) rules.push(this.required(this.listItem.title))
            if (rules.length) this.validator = new this.Schema({ value: rules })
        },
        // 必填校验
        required (title) {
            return {
                required: true,
                validator: (rule, value, callback) => {
                    !value.every(item => item.value)
                        ? callback(new Error(title + '必填'))
                        : callback()
                }
            }
        },
        // 校验
        verify () {
            return this.validate({ value: this.formItem.value })
        }
    }
}
</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;
    margin-top: 5px;
    & > 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;
        .el-radio {
            padding: 0;
            /deep/ .icon {
                margin-right: 0;
                vertical-align: middle;
            }
        }
    }
}
</style>
