<script setup>
import {onMounted,ref} from 'vue'
import apiSheet from '@/api/sheet.js'
import { getPPTConfig } from '../hooks/createPPTContent'

const { pptSheetSize } = getPPTConfig()

const props=defineProps({
    itemData:{
        type:Object,
        default:{}
    }
})

const sourceFrom=ref(null)

// 获取表格数据
let list=ref([])
async function getSheetInfo(){
    const res=await apiSheet.infoByCode({UniqueCode:props.itemData.sheetId})
    if(res.Ret===200){
        list.value=res.Data?.TableInfo?.TableDataList||[]
        sourceFrom.value= res.Data?.SourcesFrom ? JSON.parse(res.Data.SourcesFrom):
        res.Data.ExcelSource?setDefaultSource(res.Data.ExcelSource):''
    }
}

function setDefaultSource(sourceText){
    return {
        isShow: true,
        text: sourceText,
        color: "#606266",
        fontSize: 9
    }
}


onMounted(()=>{
    getSheetInfo()
})

</script>

<template>
    <div class="sheet-box">
        <div class="table-box">
            <table :style="`font-size: ${pptSheetSize}px`">
                <tbody>
                    <tr v-for="(row,rowIndex) in list" :key="rowIndex">
                        <td v-for="(col,colIndex) in row" 
                            :key="colIndex"
                            :rowspan="col.mc.rs===0?1:col.mc.rs"
                            :colspan="col.mc.cs===0?1:col.mc.cs"
                            :style="`
                                color: ${col.fc};
                                font-weight: ${col.bl ? 'bold' : 'normal'};
                                font-style: ${col.it ? 'italic' : 'normal'};
                                background: ${col.bg||'transparent'};
                            `"
                        >
                            <!-- 单元格拆分 -->
                            <div class="split-word" v-if="col.ct.s">
                                <span 
                                    v-for="(word,word_index) in col.ct.s" 
                                    :key="`${rowIndex}_${colIndex}_${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>{{col.m}}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="chart-source">
            <span
            v-if="sourceFrom && sourceFrom.isShow"
            :style="`color: ${sourceFrom.isShow ? sourceFrom.color : '#999'};font-size: ${ sourceFrom.fontSize }px;`"
            >来源:{{ sourceFrom.text}}</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.sheet-box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    &::-webkit-scrollbar{
        width: 4px;
    }
    .table-box{
        flex-grow: 1;
        overflow: auto;
        table{
            width:100%;
            border-collapse: collapse;
            border-spacing: 0;
            td{
                border: 1px solid #747474;
                height: 45px;
                text-align: center;
            }
        }
    }

    .chart-source{
        width: 100%;
        span{
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
}
</style>