<template>
  <div class="common-page">
    <el-table
      class="common-table"
      :data="tableData"
      style="width: 100%"
      stripe
      border
      @expand-change="expandChange"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.ruleItemData" border stripe style="width: 100%">
            <el-table-column prop="questioncount" label="试题数量"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="regionName" label="地区"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { rule } from "@/api/api";
export default {
  data() {
    return {
      queryForm: {},
      tableData: []
    };
  },
  created() {
    this.queryData();
  },
  methods: {
    // 获取表数据
    queryData() {
      rule.selectByPage(this.queryForm).then(res => {
        if (res) {
          //给每行数据强制追加一个数据项
          res.content.list.map(item => {
            item.ruleItemData = [];
          });
          this.tableData = res.content.list;
        }
      });
    },
    // 展开事件----动态获取内嵌表数据
    expandChange(row, expandedRows) {
      // 该处是用于判断是展开还是收起行，只有展开的时候做请求，避免多次请求！
      // 展开的时候expandedRows有值，收起的时候为空.
      if (expandedRows.length > 0) {
        rule
          .itemSelectByRuleID({
            examruleid: row.id
          })
          .then(res => {
            // 遍历当前页面表
            this.tableData.forEach((temp, index) => {
              // 找到当前点击的行，把动态获取到的数据赋值进去
              if (temp.id === row.id) {
                this.tableData[index].ruleItemData = res.content;
              }
            });
          });
      }
    }
  }
};
</script>

<style>
</style>