<template>
  <el-table :data="tableData" style="width: 455px; height: 220px">
    <el-table-column label="项目状态" prop="propertyName" width="120" show-overflow-tooltip>
      <template #default="{ row }">
        <span @click="emit('click-call-back', row)" class="pointer">{{ row.propertyName }}</span>
      </template>
    </el-table-column>
    <el-table-column align="center" label="项目统计">
      <el-table-column align="center" prop="count" label="数量">
      </el-table-column>
      <el-table-column align="center" prop="countProportion" label="占比">
      </el-table-column>
    </el-table-column>
    <el-table-column align="center" label="资金统计(万元)">
      <el-table-column align="center" prop="classifyInvest" label="金额">
      </el-table-column>
      <el-table-column align="center" prop="classifyInvestProportion" label="占比">
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script setup name="content_left">
import { ref, reactive, toRefs, onMounted } from "vue";
const { tableData } = defineProps(["tableData"]);
const emit = defineEmits(["click-call-back"]);

function headerStyle({ row, column, rowIndex, columnIndex }) {
  if (rowIndex == 0) {
    row[1].rowSpan = 2;
  }
  if (rowIndex == 1) {
    row[0].colSpan = 0;
    row[1].colSpan = 0;
    if (columnIndex == 0 || columnIndex == 1) {
      return {
        display: "none",
      };
    }
  }
}
onMounted(() => {});
</script>

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