<template>
  <div class="app-container scroll-y">
    <tableTemp
      ref="domeTable"
      :tableHeader="state.list"
      :tableProperty="{ rowKey: 'ID' }"
      :tableData="tableData"
      :tableBtnGroup="tableBtnGroup"
      @btnClick="btnClick"
      @load="loadMore"
      @cellClass="test"
    ></tableTemp>
  </div>
</template>

<script setup lang="ts">
import tableTemp from "@/components/tableTemp/index.vue";
import { ref } from "vue";
const state = reactive({
  list: [
    { label: "序号", key: "ID", sortable: true },
    { label: "姓名", key: "NAME" },
    { label: "成绩", key: "score", sortable: true, lableClass: "scoreColumn" },
  ],
  listLoading: true,
});
const tableData = ref([
  {
    ID: 0,
    NAME: "张三",
    score: "100",
    children: [
      {
        ID: 2,
        NAME: "王麻子",
        score: "50",
        rowClass: "warning-row",
      },
    ],
  },
  {
    ID: 1,
    NAME: "李四三",
    score: "80",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
  {
    ID: 2,
    NAME: "王麻子",
    score: "50",
    rowClass: "warning-row",
  },
]);

const tableBtnGroup = ref([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
  },
]);
const emits = defineEmits(["editDialog", "eleDialog", "aloneDialog"]);
//编辑-删除
const btnClick = (row, index, param) => {
  if (param === 2) {
    emits("editDialog", index); //编辑
  } else if (param === 3) {
    emits("eleDialog"); //删除
  } else if (param === 4) {
    emits("aloneDialog"); //单独项
  }
  // console.log(row);
  // console.log(index);
};

const loadMore = (type) => {
  console.log(type);
};

const domeTable =ref(null)
const test = (row) => {
  if(row.column.property==="score"&& row.row.score>80){
    domeTable.value.cellClass ="warn"
  }
  else{
    domeTable.value.cellClass =""
  }
}
</script>

<style scoped lang="scss">
::v-deep.el-table .warn {
  background: #dfb21c !important;
}
::v-deep.el-table .scoreColumn {
  background: #eb2f3b !important;
}
::v-deep.el-table .warning-row {
  background-color: #eb2f3b !important;
}
::v-deep.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
