<template>
    <div class="bg-white p-2 table_box">
        <el-table :data="tableData" border class="mt-4" stripe :header-cell-style="headerStyle" :row-class-name="tableRowClassName" style="height: 90%;">
            <el-table-column
                v-for="item in tableColData" :key="item.name"
                align="center"
                :prop="item.id"
                :label="item.name"
            >
                <el-table-column
                    v-for="item1 in item.children" :key="item1.name"
                    align="center"
                    :prop="item1.id"
                    :label="item1.name"
                />
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'

const props = defineProps({
cur: {
  type: [String, Number],
  default: '',
},
})

const tabsKey = ref(props.cur)

//监听
watch(() => [
props.cur,
], ([key]) => {
tabsKey.value = key
console.log(key)
})


const tableData = ref([
{ time:'一月', beginremain:'2000' },
{ time:'二月', beginremain:'2000' },
{ time:'三月', beginremain:'2000' },
{ time:'四月', beginremain:'2000' },
{ time:'五月', beginremain:'2000' },
{ time:'六月', beginremain:'2000' },  
{ time:'七月', beginremain:'2000' },
{ time:'八月', beginremain:'2000' },
{ time:'九月', beginremain:'2000' },
{ time:'十月', beginremain:'2000' },
{ time:'十一月', beginremain:'2000' },
{ time:'十二月', beginremain:'2000' },
{ time:'总计', beginremain:'2000' },



])
const tableColData = ref([
  {
    id:'time',
    name: '时间',
    children:[
        {
            id:'time',
            name: '时间',
        },
    ],
  },
  
 {
        id: 'beginremain',
        name: '年初每月收支预算',
        children:[
            {
            id: 'beginremain',
            name: '收入',
            },
            {
            id: 'beginremain',
            name: '支出',
            },
    
        ],
    },
    {
        id: 'beginremain',
        name: '每月计划收支预算',
        children:[
            {
            id: 'beginremain',
            name: '收入',
            },
            {
            id: 'beginremain',
            name: '支出',
            },
    
        ],
    },
    {
        id: 'beginremain',
        name: '实际每月收支',
        children:[
            {
            id: 'beginremain',
            name: '收入',
            },
            {
            id: 'beginremain',
            name: '支出',
            },
    
        ],
    },
    
])
//合并

const headerStyle = ({ column, rowIndex, columnIndex })=>{
  const comStyle = { fontSize:'16px', background: 'rgb(214, 225, 255)', color:'black' }
      // 1.1 让第0行的第0列跨2行
      if (rowIndex === 0 && columnIndex === 0) {
        nextTick(() => {
          document
            .getElementsByClassName(column.id)[0]
            .setAttribute('rowSpan', 2)
          return comStyle
        })
      }
      // 1.2 被覆盖的进行隐藏
      if (rowIndex === 1 && (columnIndex === 0 )) {
        return {
          display: 'none',
          ...comStyle,
        }
      }
      if (rowIndex === 15) {
        return {
          color: 'red',
          ...comStyle,
        }
      }

      return comStyle
}

   //指定行颜色
 const tableRowClassName = ({ rowIndex }) =>{
      if (rowIndex === 12) {
        return 'warm-row'
      }
  }
</script>

<style  lang="scss">
.warm-row {
  background-color: rgb(154, 154, 154) !important;
}
</style>
