<template>
  <div style="padding: 24px 0; background-color: #f7f7f7">
    <el-image style="width:100%" :src="require('@/assets/images/bg_zhiyuantianbao.png')"></el-image>
    <div style="margin-top: 20px;">
      <el-table :data="tableData" border v-loading="loading" style="min-height: 300px;">
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" align="center"></el-table-column>
        <el-table-column prop="createTime" label="填报时间" align="center"></el-table-column>
        <el-table-column prop="batchName" label="填报批次" align="center"></el-table-column>
        <el-table-column prop="" label="志愿概要" align="center">
          <template slot-scope="scope">
            <div style="line-height:30px;" v-for="(item,index) in scope.row.summary" :key="index">{{ item }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="goDetails(scope.row)">详情</el-link>
            <el-link :underline="false" type="danger" style="margin-left: 7px;" @click="delTableList(scope.row)"> 删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="examRecordTotal" :autoScroll="false" @pagination="onChangePage"
                  :page.sync="tableParams.pageNum"
                  :limit.sync="tableParams.pageSize"
      ></pagination>
    </div>
  </div>
</template>

<script>
import { delZytbRecord, selectZytbRecord } from '@/api/webApi/career-other'

export default {
  name: 'VolunteerList',
  data() {
    return {
      examRecordTotal: 0,
      tableParams: {
        pageSize: 20,
        pageNum: 1
      },
      tableData: [],
      loading: false
    }
  },
  created() {
    this.getZytbRecord()
  },
  methods: {
    goDetails(data) {
      this.$router.push({ name: 'RecordDetail', params: { data: data } })
    },
    delTableList(data) {
      console.log(data)
      this.$confirm(`是否确定删除-${data.name} ？`, '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', closeOnClickModal: false
      }).then(() => {
        const params = {
          id: data.id
        }
        delZytbRecord(params).then(res => {
          this.getZytbRecord()
          this.msgSuccess('删除成功')
        })
      }).catch(() => {
      })

    },
    getZytbRecord() {
      this.loading = true
      selectZytbRecord(this.tableParams).then(res => {
        this.examRecordTotal = res.total
        this.loading = false
        this.tableData = res.rows
      })
    },
    onChangePage(page) {
      this.tableParams.pageSize = page.limit
      this.tableParams.pageNum = page.page
      this.getZytbRecord()
    }
  }
}
</script>

<style scoped>

</style>
