<template>
  <div class="table_class">
    <el-table :data="tableData2" style="width: 98%;">
      <el-table-column
        prop="orgName"
        label="机构名称"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in tableHeaders"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        align="center"
      >
        <el-table-column label="人均" align="center">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.regList[index].need }}</span> -->
            <el-input
              v-model="scope.row.regList[index].province"
              @change="handleEdit(scope.$index, scope.row.regList[index])"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="人数" align="center">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.regList[index].reply }}</span> -->
            <el-input
              v-model="scope.row.regList[index].reply"
              @change="handleEdit(scope.$index, scope.row.regList[index])"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="总金额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.regList[index].total }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 响应数据
      data: {
        records: [
          {
            orgName: "机构A",
            regList: [
              { province: "100", reply: "2", total: "50", regName: "事件A" },
              { province: "60", reply: "20", total: "50", regName: "事件A" },
              {
                province: "5000",
                reply: "5000",
                total: "50",
                regName: "事件A"
              },
              {
                province: "3000",
                reply: "3000",
                total: "50",
                regName: "事件C"
              },
              {
                province: "6000",
                reply: "5000",
                total: "50",
                regName: "事件C/事件B"
              }
            ]
          },
          {
            orgName: "机构B",
            regList: [
              { province: "10", reply: "5", total: "50", regName: "事件A" },
              {
                province: "10000",
                reply: "9000",
                total: "50",
                regName: "事件C"
              },
              {
                province: "10000",
                reply: "8000",
                total: "50",
                regName: "事件A"
              },
              {
                province: "8000",
                reply: "7000",
                total: "50",
                regName: "事件A"
              },
              { province: "8000", reply: "7000", total: "50", regName: "事件B" }
            ]
          },
          {
            orgName: "机构C",
            regList: [
              {
                province: "10000",
                reply: "9000",
                total: "50",
                regName: "事件A"
              },
              {
                province: "10000",
                reply: "9000",
                total: "50",
                regName: "事件C"
              },
              {
                province: "10000",
                reply: "8000",
                total: "50",
                regName: "事件A"
              },
              {
                province: "8000",
                reply: "7000",
                total: "50",
                regName: "事件A"
              },
              { province: "8000", reply: "7000", total: "50", regName: "事件B" }
            ]
          }
        ]
      },
      tableHeaders: [],
      tableData2: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.tableHeaders = [];
      for (let i of this.data.records[0].regList) {
        let obj = {
          label: i.regName,
          prop: ""
        };
        this.tableHeaders.push(obj);
        // this.tableData2 = this.data.records;
      }
      this.tableData2 = this.data.records;
    },
    handleEdit(a, B) {
      console.log(a, B);
      B.total = Number(B.province) * Number(B.reply);
    },
    handleEdit2(a, B) {
      console.log(a, Number(B));
      B.total = Number(B.province) * Number(B.reply);
    }
  }
};
</script>

<style>
.table_class {
  margin: 20px;
}
</style>