<template>
  <div class="table">
    <el-table :data="list" max-height="390px" height="390px">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="变更人" prop="resiName" width="140" />
      <el-table-column label="变更类型" prop="typeName" width="" />
      <el-table-column label="变更前" prop="beforeChange" width="120" />
      <el-table-column label="变更后" prop="afterChange" width="120" />
      <el-table-column label="操作人" prop="operatorName" width="120" />
      <el-table-column label="调整时间" prop="changeTime" width="190" />
    </el-table>
  </div>
</template> 

<script>
export default {
  name: "community",
  props: {
    juminArr: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      houseId: "",
      list: [],
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  watch: {
    "$route.query"(newVal, oldVal) {
      this.getList();
    },
  },
  methods: {
    getList() {
    const query = this.$route.query;
    this.houseId = query.houseId;
      // 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访)
      const completeFlags = {
        "-2": "未知",
        "-1": "不接受回访",
        0: "接受回访/待回访",
        1: "已回访",
      };
      // 省满意度列表
      this.$http
        .get(
          "/actual/base/peopleRoomOverview/houseResidentChangeRecord?houseId=" +
            this.houseId
        )
        .then(({ data: res }) => {
          console.log('res::',res);
          this.list = res.data.map((item) => {
            return {
              ...item,
              completeFlag: completeFlags[item.completeFlag],
            };
          });
          this.total = res.data.length;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.business-records {
  margin-bottom: 25px;
}
.table {
  /deep/ .el-table td,
  /deep/ .el-table th,
  /deep/ .el-table tr {
    padding: 14px !important;
    border: none !important;
    min-height: 52px;
  }
  /deep/ .el-table td,
  /deep/ .el-table th {
    background: none !important;
  }
  /deep/ .el-table td {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
  }

  /deep/ .el-table tr {
    background: none;
    &:hover {
      background-color: rgba(26, 149, 255, 0.3) !important;
    }
  }
  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
    background: rgba(14, 56, 115, 0.4);
  }

  /deep/ .el-table {
    background: none !important;

    &:before {
      background: none;
    }
  }
  /deep/ .el-table__header-wrapper tr {
    color: #a3b9da !important;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.76;
    background: none;
    &:hover {
      background: none !important;
    }
  }
  /deep/ .el-table__header-wrapper {
    background: none !important;
  }
}
</style>
