<template>
          <div class="bg-white p-2 table_box" >
            <el-row :gutter="14" style="justify-content: flex-end;">
            
                <div class="w-36 ml-4 mr-2" >
                    <el-select v-model="costcheck" block clearable placeholder="项目回款明细" size="large">
                        <el-option v-for="item in costdetail" :label="item.name" :value="item.key"/>
                    </el-select>
                </div>
            </el-row>
              <el-table :data="tableData" border class="mt-4 "  v-if="costcheck==1"  stripe :header-cell-style="headerStyle" style="height: 87%;">
                  <el-table-column v-for="item in tableColData"  align="center" 
                  :prop="item.id"
                  :label="item.name"
                  :key="item.id"
                  :min-width="180"
                  >
                      <el-table-column v-for="item1 in item.children" align="center"
                          :prop="item1.id"
                          :label="item1.name"
                          :key="item1.id"
                          :min-width="180"
                          >
                              <el-table-column v-for="item2 in item1.children" align="center"
                              :prop="item2.id"
                              :label="item2.name"
                              :key="item2.id"
                              :min-width="180"
                              >
                          </el-table-column>
                      </el-table-column>
                  </el-table-column>
              </el-table>
       
       
            <el-table stripe :data="tableData" border class="mt-4 " v-if="costcheck==2" :header-cell-style="{ background:'rgb(214, 225, 255)', fontSize:'16px',color:'black'}"   style="height: 87%;">
                <el-table-column 
                v-for="item in tableprojectColData"  
                :prop="item.id"
                :label="item.name"
                :key="item.id"
                
                ></el-table-column>
            </el-table>
            <el-table stripe :data="tableData" border class="mt-4 " v-if="costcheck!=='2'&&costcheck!=='1'" :header-cell-style="{ background:'rgb(214, 225, 255)', fontSize:'16px',color:'black'}"   style="height: 87%;">
                <el-table-column 
                v-for="item in otherColData"  
                :prop="item.id"
                :label="item.name"
                :key="item.id"
                
                ></el-table-column>
            </el-table>
         
        
                       
         </div>
</template>

<script setup>
import {ref, watch,nextTick} 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:'20001'},
    

])
const tableColData=ref([
        {
          id: 'time',
          name: '时间',
          children:[
      
          ]
        },
        {
          id: 'beginremain',
          name: '期初上账余额',
          children:[
     
          ]
        },
        {
          id: 'beginremain',
          name: '回款',
          children:[
                {
                id: 'beginremain',
                name: '计划回款',
                children:[
                
                ]
                },
                {
                id: 'beginremain',
                name: '项目回款',
                children:[
                
                ]
                },
                {
                id: 'beginremain',
                name: '营业外收入',
                children:[
               
                ]
                },
                {
                id: 'beginremain',
                name: '过账资金',
                children:[
                  
                ]
                },
                {
                id: 'beginremain',
                name: '项目保证金、押金退回',
                children:[
               
                ]
                },
          ]
        },
        {
          id: 'beginremain8',
          name: '借还款',
          children:[
                {
                id: 'beginremain',
                name: '借入',
                children:[]
                },
                {
                id: 'beginremain',
                name: '偿还本金',
                children:[]
                },
                {
                id: 'beginremain',
                name: '偿还利息',
                children:[]
                },
          
              
          ]
        },
        {
          id: 'beginremain',
          name: '支出',
          
          children:[
                {
                id: 'beginremain',
                name: '员工借款',
                children:[ ]
                },
                {
                id: 'beginremain',
                name: '员工借支还款',
                children:[]
                
                
                },
                {
                id: 'beginremain',
                name: '费用',

                children:[
                    {
                    id: 'beginremain',
                    name: '差旅费、招待费'
                    },
                    {
                    id: 'beginremain',
                    name: '人员工资、五险一金'
                    },
                    {
                    id: 'beginremain',
                    name: '税金'
                    },
                    {
                    id: 'beginremain',
                    name: '外包费'
                    },
                    {
                    id: 'beginremain',
                    name: '商务费'
                    },   {
                    id: 'beginremain',
                    name: '办公房租、物业水电'
                    },
                    {
                    id: 'beginremain',
                    name: '综合报销'
                    }, {
                    id: 'beginremain',
                    name: '费用合计'
                    },
                ]
                },
               
          ]
        },
     
       
        {
          id: 'beginremain',
          name: '期末上账余额',
  
   
        },
        {
          id: 'beginremain',
          name: '本月未支付',
         
        },

])
const costdetail=ref([
    {name:'汇总表',key:'1'},
    {name:'项目回款明细',key:'2'},
    {name:'借入',key:'3'},
])
const tableprojectColData=ref([
        {
          id: 'time',
          name: '时间'
        },
        {
          id: 'name',
          name: '项目名称'
        },
        {
          id: 'type',
          name: '项目类型'
        },
        {
          id: 'project',
          name: '产品线'
        },
        {
          id: 'money',
          name: '回款金额'
        },
])
const otherColData=ref([
        {
          id: 'time',
          name: '日期'
        },
        {
          id: 'name',
          name: '对方科目'
        },
        {
          id: 'type',
          name: '二级科目'
        },
        {
          id: 'project',
          name: '报销人'
        },
        {
          id: 'import',
          name: '摘要'
        },
        {
          id: 'money',
          name: '回款金额'
        },
])
//合并

const headerStyle=({ row, column, rowIndex, columnIndex })=>{
    const comStyle = {fontSize:"16px" ,background: "rgb(214, 225, 255)",color:'black'}
    return comStyle;
}

const costcheck=ref('1')
</script>

<style scoped lang="scss">

.tableover{
    height: 550px;
     overflow-y: auto;
   }
.table_box_flo{
     height: calc(100vh - 450px);
     
 }

</style>
