<template>
    <div class="table-wrapper">
        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr v-for="(item, index) in props.data" :key="index">
                    <td :class="['data-cell', {
                        'one-bg': (index + 1) % 2 && index > 0,
                        'tow-bg': (index + 1) % 2 !== 0 && index > 0,
                        'head-column': index === 0
                    }]" v-for="(cell, cell_index) in item" :key="cell_index" :colspan="cell.mc.cs || 1"
                        :rowspan="cell.mc.rs || 1" :style="`
            color: ${cell.fc};
                                    font-weight: ${cell.bl ? 'bold' : 'normal'};
                                    font-style: ${cell.it ? 'italic' : 'normal'};
                                    background: ${cell.bg};
          `">
                        <!-- 单元格拆分 -->
                        <div class="split-word" v-if="cell.ct.s">
                            <span v-for="(word, word_index) in cell.ct.s" :key="`${index}_${cell_index}_${word_index}`"
                                :style="`color: ${word.fc};font-weight: ${word.bl ? 'bold' : 'normal'};font-style: ${word.it ? 'italic' : 'normal'};
                            `">{{ word.v }}</span>
                        </div>
                        <div v-else>{{ cell.m }}</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            };
        },
        methods: {

        },
    };
</script>

<style scoped lang="scss"></style>