<template>
  <section class="AiLog">
    <el-table :data="logList" border header-cell-class-name="table-head-cell" cell-class-name="table-cell">
      <el-table-column width="186px" align="center" label="修改时间" prop="createTime"/>
      <el-table-column width="90px" align="center" label="变更人" prop="userName"/>
      <el-table-column label="操作类型" header-align="center" width="132px">
        <template slot-scope="{row}">{{ row.typeLabel + row.fieldName }}</template>
      </el-table-column>
      <el-table-column label="变更内容">
        <div slot-scope="{row}">
          <p v-if="row.type!=3">
            {{ row.fieldName }}从
            <span style='color: #26f'>{{ row.beforeChangeValue || "空" }}</span>
            {{ row.typeLabel }}为
            <span style='color: #26f'>{{ row.afterChangeValue || "空" }}</span>
          </p>
          <p v-else>
            对
            <span style='color: #26f'>{{ row.afterChangeValue || "空" }}</span>
            进行了修改
          </p>
        </div>
      </el-table-column>
      <div slot="append" class="table-footer">
        <el-pagination :current-page.sync="page.current" layout="total,prev,pager,next,sizes,jumper" :total="page.total"
                       background @size-change="v=>{page.size=v;getLogs()}" @current-change="getLogs"/>
      </div>
    </el-table>
  </section>
</template>

<script>
export default {
  name: "AiLog",
  props: {
    bid: String,
    instance: Function,
  },
  data() {
    return {
      logList: [],
      logType: {
        0: "更新",
        1: "删除",
        2: "新增",
        3: "更新"
      },
      page: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    getLogs() {
      this.instance.post("/app/appchangelog/list", null, {
        params: {...this.page, objectId: this.bid}
      }).then(res => {
        if (res && res.data) {
          this.page.total = res.data.total
          res.data.records = res.data.records.map(e => {
            return {...e, typeLabel: this.logType[e.type]}
          })
          this.logList = res.data.records
        }
      })
    }
  },
  mounted() {
    this.getLogs()
  }
}
</script>
<style lang="scss" scoped>
.AiLog {
  ::v-deep.table-head-cell {
    background-color: rgba(243, 246, 249, 1);
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }

  .table-footer {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  ::v-deep.table-cell {
    .cell {
      padding-top: 13px;
      padding-bottom: 13px;

      div {
        white-space: normal;
      }
    }
  }

  ::v-deep.el-pagination {
    text-align: center;

    .btn-prev {
      background-color: #fff;
      border: solid 1px #d0d4dc;
      margin-left: 8px;
      border-radius: 4px;

      &:disabled {
        background-color: #F5F5F5;
      }
    }

    .btn-next {
      background: #fff;
      border: 1px solid #D0D4DC;
      border-radius: 4px;

      &:disabled {
        background-color: #F5F5F5;
      }
    }
  }

  ::v-deep.el-pagination__jump {
    margin-left: 0;
  }

  ::v-deep.el-pager li {
    background-color: #fff;
    border: solid 1px #d0d4dc;
    margin-left: 8px;
    border-radius: 4px !important;
    line-height: 26px !important;

    &.active {
      background-color: #fff !important;
      color: #5088FF !important;
      border-color: #5088FF;

      & + li {
        border-left: solid 1px #d0d4dc
      }
    }

    &:nth-last-of-type(1) {
      margin-right: 8px;
    }
  }
}

</style>
