<script>
    import { Col } from 'element-ui';
    const responsive = {
        1: { xs: 24 },
        2: { xs: 24, sm: 12 },
        3: { xs: 24, sm: 12, md: 8 },
        4: { xs: 24, sm: 12, md: 6 }
    };
    export default  {
        name: 'DetailListItem',
        props: {
            term: {
                type: String,
                required: false
            },
            termspan: {
                type: Number,
                required: false
            }
        },
        inject: {
            col: {
                type: Number
            }
        },
        methods: {
            renderTerm (h, term) {
                return term ? h(
                    'div',
                    {
                        attrs: {
                            class: 'term el-col-'+(this.termspan||6)
                        }
                    },
                    [term]
                ) : null
            },
            renderContent (h, content) {
                return h(
                    'div',
                    {
                        attrs: {
                            class: 'content el-col-'+(23-(this.termspan||6))
                        }
                    },
                    [content]
                )
            }
        },
        render (h) {
            const term = this.renderTerm(h, this.$props.term)
            const content = this.renderContent(h, this.$slots.default)
            return h(
                Col,
                {
                    props: responsive[this.col]
                },
                [term, content]
            )
        }
    }
</script>
