<template>
  <div class="trainimg-total-wrapper">
    <el-table :data="trainimgData" border v-loading="isLoadingData">
      <el-table-column
        prop="briefIntroduction"
        label="培训简介"
      ></el-table-column>
      <el-table-column prop="location" label="培训位置"></el-table-column>
      <el-table-column prop="peopleNum" label="培训人数"></el-table-column>
      <el-table-column prop="time" label="培训时间"></el-table-column>
      <el-table-column prop="beforeImgPath" label="培训前照片">
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            :src="scope.row.beforeImgPath"
            :preview-src-list="[scope.row.beforeImgPath]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="trainingImgPath" label="培训中照片">
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            :src="scope.row.trainingImgPath"
            :preview-src-list="[scope.row.trainingImgPath]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="afterImgPath" label="培训后照片">
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            :src="scope.row.afterImgPath"
            :preview-src-list="[scope.row.afterImgPath]"
          >
          </el-image>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="curPageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
    >
    </el-pagination>
  </div>
</template>

<script>
import { searchTrainImage } from "@/api/trainimage.js";
export default {
  data() {
    return {
      companyId: "",
      trainimgData: [
        {
          briefIntroduction: "",
          location: "",
          peopleNum: "",
          time: "",
          beforeImgPath: "",
          trainingImgPath: "",
          afterImgPath: ""
        }
      ],
      currentPage: 1,
      curPageSize: 10,
      totalSize: 100,
      isLoadingData: false
    };
  },
  mounted() {
    console.log(
      this.$route.params.name,
      "this.$route.params.name this.$route.params.name"
    );
    this.companyId = this.$route.params.name;
    this.initData();
  },
  methods: {
    handleSizeChange(val) {
      this.curPageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    initData() {
      this.isLoadingData = true;
      let params = {
        enterpriseId: this.companyId,
        page: this.currentPage - 1,
        size: this.curPageSize,
        sort: "time,desc"
      };
      searchTrainImage(params)
        .then(res => {
          console.log(res, "searchTrainImg searchTrainImg searchTrainImg");
          this.trainimgData = [
            ...res.content.map(item => {
              return {
                briefIntroduction: item.briefIntroduction,
                location: item.location,
                peopleNum: item.peopleNum,
                time: item.time,
                beforeImgPath:
                  "/train-image/" +
                  item.beforeImgPath.split("\\train-image\\")[1],
                trainingImgPath:
                  "/train-image/" +
                  item.trainingImgPath.split("\\train-image\\")[1],
                afterImgPath:
                  "/train-image/" +
                  item.afterImgPath.split("\\train-image\\")[1]
              };
            })
          ];
          this.totalSize = res.totalElements;
          this.isLoadingData = false;
        })
        .catch(() => {
          this.isLoadingData = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.trainimg-total-wrapper {
  padding: 10px;
  border-radius: 5px;
  margin: 10px 10px;
  background: #fff;
}
</style>
