<template>
  <div>
    <el-row>
      <el-col span="11">
        <el-tag>业务组</el-tag>
        <el-table size="mini" v-loading="loading" :data="c1ListData">
          <el-table-column label="编号" align="center" prop="id" />
          <el-table-column label="名称" align="center" prop="name" />
          <el-table-column label="小值" align="center" prop="min" />
          <el-table-column label="大值" align="center" prop="max" />
          <el-table-column label="系数" align="center" prop="coefficient" />
        </el-table>
      </el-col>
      <el-col span="2" style="border:1px solid transparent">
        <dev style="white-space: pre-wrap;text-align: left">
        </dev>
      </el-col>
      <el-col span="11">
        <el-tag>非业务组</el-tag>
        <el-table size="mini" v-loading="loading" :data="c2ListData">
          <el-table-column label="编号" align="center" prop="id" />
          <el-table-column label="名称" align="center" prop="name" />
          <el-table-column label="小值" align="center" prop="min" />
          <el-table-column label="大值" align="center" prop="max" />
          <el-table-column label="系数" align="center" prop="coefficient" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getGradeconfig} from "@/api/business/ehr/pm/gradeconfig";
export default {
  name: "gcList",
  props: ["stage"],
  data() {
    return {
      // 表格数据
      listData: [],
      //业务组表格数据
      c1ListData:[],
      //非业务组表格数据
      c2ListData:[],
      // 遮罩层
      loading: true,
    };
  },
  created() {
    this.fetchList();
  },
  methods: {
    //查询等级配置列表
    fetchList() {
      this.loading = true;
      getGradeconfig(this.stage.gradeconfigId).then(response => {
        console.log(response.data);
        this.listData = response.data.gradeconfigItem;
        this.c1ListData = this.listData.filter(ele => ele.divide == 'C1');
        this.c2ListData = this.listData.filter(ele => ele.divide == 'C2');
        this.loading = false;
      });
    },
  },
};
</script>

