<template>
    <div class="es-simple-table" ref="esSimpleTable">
        <table class="simple-table" cellspacing="0" rules="all" frame="border">
            <tr v-for="(item, index) in rowList" :key="index">
                <td class="bg-color">{{ dataList[index * 2].title }}</td>
                <!-- <td>{{ dataList[index * 2].content || '--' }}</td> -->
                <td>
                    <simple-td :info="dataList[index * 2]"></simple-td>
                </td>
                <td class="bg-color">
                    {{index * 2 &lt; dataList.length - 1 ? dataList[index * 2 + 1].title : ''}}
                </td>
                <td>
                    <!-- {{index * 2 &lt; dataList.length - 1 ? dataList[index * 2 + 1].content || '--' : ''}} -->
                    <template v-if="index * 2 &lt; dataList.length - 1">
                        <simple-td :info="dataList[index * 2 + 1]"></simple-td>
                    </template>
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
import simpleTd from './simpleTd';
export default {
    name: 'es-simple-table',
    components: {
        simpleTd
    },
    props: {
        // 表信息数据源，数组元素{title: '', content: ''}
        // 参照info.vue
        dataList: {
            type: Array,
            default() {
                return [];
            }
        },
        // 高度
        height: {
            type: String,
            default: '100%'
        }
    },
    computed: {
        rowList: {
            get: function() {
                let count = Math.ceil(this.dataList.length / 2);
                let array = [];
                for (let i = 0; i < count; i++) {
                    array.push({});
                }
                return array;
            }
        }
    },
    data() {
        return {
            showImg: false,
            currentIndex: 0
        };
    },
    mounted() {
        let self = this;
        self.$refs.esSimpleTable.style.height = self.height;
    }
};
</script>
<style lang="scss" scoped>
.es-simple-table {
    width: 100%;
    overflow: auto;
    .simple-table {
        min-width: 100%;
        min-height: 100%;
        border: 1px solid #dcdee2;
        tr {
            :nth-child(2n - 1) {
                // background-color: #f8f8f8;
            }
        }
        td {
            padding: 10px 18px;
            min-width: 100px;
            text-align: left;
        }
    }
}
.bg-color {
    background-color: #f8f8f8;
}
</style>
