<template>
    <td class="ht-base-descriptions-item" :class="itemClass" :style="itemStyle" :colspan="span">
        <div class="label" :style="labelStyle">{{`${label}${$parent.$parent.bordered ? '' : ':'}`}}</div>
        <div :style="valueStyle"><slot></slot></div>
    </td>
</template>

<script>
    export default {
        name: 'HtBaseDescriptionsItem',
        props: {
            label: {
                type: String,
                default: '-'
            },
            labelWidth: {
                type: String,
                default: '100px'
            },
            span: {
                type: Number,
                default: 1
            },
        },
        data() {
            return {
                itemWidth: '400px'
            }
        },
        computed: {
            itemClass() {
                return {
                    [`ht-base-descriptions-item-border`]: this.$parent.$parent.bordered ? true : false
                }
            },
            itemStyle() {
                let parentNode = this.$parent.$parent
                return {
                    width: this.itemWidth,
                    height: parentNode.layout === 'horizontal' ? parentNode.itemHeight : 'auto'
                }
            },
            labelStyle() {
                let parentNode = this.$parent.$parent
                return {
                    width: parentNode.layout === 'horizontal' && !parentNode.bordered ? 'auto' : parentNode.layout === 'horizontal' ? this.labelWidth : '100%',
                    borderRight: parentNode.layout === 'horizontal' || 'none',
                    display: "inline-block"
                }
            },
            valueStyle() {
                let parentNode = this.$parent.$parent
                return {
                    width: parentNode.layout === 'horizontal' ? 'auto' : '100%',
                    // height: parentNode.itemHeight,
                    lineHeight: parentNode.itemHeight,
                    paddingLeft: parentNode.layout === 'vertical' && !parentNode.bordered || '5px',
                    borderTop: parentNode.layout === 'vertical' && parentNode.bordered ? '1px solid #ccc' : 'none',
                    color: "#666666",
                    fontSize: '14px',
                    display: "inline-block",
                    textIndent:'10px'

                }
            }
        },
        mounted() {
            this.itemWidth = getItemWidth.call(this)
        }
    }

    function getItemWidth() {
        let width, column = this.$parent.$parent.column
        if (!window.getComputedStyle) {
            width = parseInt(this.$parent.$parent.$el.currentStyle.width)
        } else {
            width = parseInt(window.getComputedStyle(this.$parent.$parent.$el).width)
        }
        return width / column + 'px'
    }
</script>
<style lang="less">
    .ht-base-descriptions-item {
        overflow: hidden;
        & > span {
            display: inline-block;
            text-indent: 10px;
        }
        .label {
            float: left;
            text-align: left;
            padding-right: 5px;
            font-size: 14px;
            color: #666666;
            text-indent: 10px;
        }
    }
    .ht-base-descriptions-item-border {
        border-right: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
        .label {
            text-align: left;
            border-right: 1px solid #cccccc;
            padding-left: 5px;
            background-color: rgb(250, 250, 250);
        }
    }
</style>

