<template>
  <div class="app-warp">
    <div class="detail-structure">
      <el-page-header content="培训影像资料" @back="goBack"/>
      <div class="detail-container">
        <div class="app-search mt-10">
          <el-form ref="searchForm" :model="searchForm" label-width="100px" >
            <el-row>
              <el-col :span="6">
                <el-form-item label="姓名" prop="NAME">
                  <el-input v-model="searchForm.NAME" placeholder="请输入姓名"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="身份证号" prop="USER_ID_CARD">
                  <el-input v-model="searchForm.USER_ID_CARD" placeholder="请输入身份证号"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="text-align: right">
                  <el-button v-waves type="primary" icon="el-icon-search" class="ml-10" @click="getStudentFaces">
                    搜索
                  </el-button>
                  <el-button icon="el-icon-refresh" @click="goKeyReset">
                    重置
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="app-container">
          <el-table
            v-loading="listLoading"
            ref="dc"
            :data="varList"
            :header-cell-style="{
              background:'#f5f7fa',
              'font-weight': 'bold',
              'color': '#000'
            }"
            tooltip-effect="dark"
            border
            fit
            highlight-current-row>
            <el-table-column :reserve-selection="true" type="selection" width="55" align="center" fixed="left"/>
            <el-table-column type="index" label="序号" width="50" align="center" fixed="left"/>
            <el-table-column fixed width="100" prop="NAME" label="姓名" align="center"/>
            <el-table-column width="150" prop="USER_ID_CARD" label="身份证号" align="center"/>
            <el-table-column width="150" prop="PHONE" label="手机" align="center"/>
            <el-table-column width="150" label="头像" align="center">
              <template slot-scope="{row}">
                <viewer v-if="row.PORTRAIT">
                  <img v-if="row.PORTRAIT" :src="config.fileUrl + row.PORTRAIT" style="width: 50px;height: 50px;">
                </viewer>
              </template>
            </el-table-column>
            <el-table-column label="认证照片" align="center">
              <template slot-scope="scope">
                <div style=" display: flex; flex-wrap: wrap">
                  <div v-for="(val,index) in scope.row.FACES" :key="index">
                    <viewer >
                      <img v-if="val" :src="config.fileUrl + val" style="width: 50px;height: 50px; margin: 5px">
                    </viewer>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="page-btn-group">
            <div/>
            <pagination
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getStudentFaces"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'

export default {
  components: {
    Pagination
  },
  directives: {
    waves
  },
  data() {
    return {
      config: config,
      add: false,
      del: false,
      edit: false,
      searchForm: {
        NAME: '',
        USER_ID_CARD: ''
      },
      listLoading: false,
      varList: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  inject: ['setActiveName', 'parentObj'],
  created() {
    this.getStudentFaces()
    this.hasButton()
  },
  methods: {
    getStudentFaces() {
      this.listLoading = true
      requestFN('/class/getStudentFaces?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page, {
        CLASS_ID: this.parentObj.CLASS_ID,
        ...this.searchForm
      }).then(res => {
        this.listLoading = false
        var list = res.studentList
        list.map(item => {
          if (item.FACES) {
            item.FACES = item.FACES.split(',')
          } else {
            item.FACES = []
          }
        })
        this.varList = list
        this.total = res.page.totalResult
      })
    },
    goKeyReset() {
      this.searchForm = {
        NAME: '',
        USER_ID_CARD: ''
      }
      this.listQuery = {
        page: 1,
        limit: 10
      }
      this.getStudentFaces()
    },
    getRowKey(row) {
      return row.STUDENT_ID
    },

    goBack() {
      this.setActiveName('List')
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton: function() {
      var keys = 'class:add,class:del,class:edit'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.classfhadminadd		// 新增权限
        this.del = data.classfhadmindel		// 删除权限
        this.edit = data.classfhadminedit	// 修改权限
      }).catch((e) => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
