<template>
  <div class="container" style="padding: 30px;">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" 
    style="margin-left:-28px;display: flex;justify-content: space-between;">
      <div style="display:flex">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入用户名" clearable size="small"/>
          </el-form-item>
          <!-- <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status">
              <el-option label="" value="">请选择</el-option>
              <el-option label="已报名" value="1">已报名</el-option>
              <el-option label="未报名" value="2">未报名</el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            
          </el-form-item>
      </div>
      <!-- <div style="margin-top:5px">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addsign">新增</el-button>
      </div> -->
    </el-form>
    <el-table v-loading="loading" :data="examlist">
      <el-table-column label="培训期号" align="center" key="issue" prop="issue" :show-overflow-tooltip="true">
        <!-- <template slot-scope="scope">
              <span v-if="scope.row.issueId" >{{issuechange(scope.row.issueId)}}</span>
          </template> -->
      </el-table-column>
      <el-table-column label="姓名" align="center" key="name" prop="name" :show-overflow-tooltip="true"/>
      <el-table-column label="用户账号" align="center" key="userName" prop="userName" width="150" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="性别" align="center" key="sex" prop="sex" width="100" >
          <template slot-scope="scope">
            <span>{{scope.row.sex==0?'男':'女' }}</span>
          </template>
      </el-table-column>
      <el-table-column label="电话" align="center" key="phonenumber" prop="phonenumber" ></el-table-column>
      <el-table-column label="Email" align="center" key="email" prop="email" width="200"></el-table-column>
      <el-table-column label="单位/学校" align="center" key="company" prop="company" ></el-table-column>
      <el-table-column label="报名日期" align="center" key="createTime" prop="createTime" >
        <template slot-scope="scope">
            <span v-if="scope.row.createTime">{{scope.row.createTime.slice(0,10) }}</span>
          </template>
      </el-table-column>
      <el-table-column label="QQ号" align="center" key="qq" prop="qq" ></el-table-column>
      <el-table-column label="微信号" align="center" key="wechat" prop="wechat"  ></el-table-column>
      <el-table-column label="是否缴费" align="center" key="status" prop="status" width="100" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{scope.row.status==0?'未上架':scope.row.status==1?'已缴费':'未缴费' }}</span>
        </template>
      </el-table-column>
    
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="modify(scope.row,'edit')" >修改 </el-button> -->
          <el-button size="mini" type="text" icon="el-icon-delete" @click="modify(scope.row,'del')" >删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>10"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>

  import {listExam,addkaostrain,deltrain,releaseissue} from "@/api/train/index";

  export default {
    name: "kaoshibaoming",
    data() {
      return {
        loading: false,
        examlist: [],
        // 总条数
        total: 0,
       
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          status: undefined
        }
      }
    },
    mounted(){
      releaseissue({}).then(response => {
        console.log('发布期号',response)
        this.issuelist = response;
      })
    },
    methods: {
      issuechange(value){
        if (!value) {
          return ''
        }else{
          if(this.issuelist.length>0){
            let issue=this.issuelist.find(item=>item.issue_id==value).issue
            return issue
          }
        }
      },
      getList() {
        this.loading = true;
        listExam(this.queryParams).then(response => {
          this.examlist = response.rows;
          this.total = response.total;
          this.loading = false;
        })
      },
      // 163
      addsign(){
        let data={
          userId:163,
          name:'云测试平台',
          qq:'111111',
          wechat:'微信号',
          company:'关键科技',
          email:'809740908@qq.com'
        }
        addkaostrain(data).then(res=>{
          // console.log('报名成功',res)
          this.$message.success('报名成功')
          this.getList();
        })
      },
      modify(row,type) {
          if(type=='edit'){

          }else if(type=='del'){
            this.$confirm('确定删除培训课程吗？', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
              deltrain(row.trainId).then(res=>{
                this.$message.success('删除成功')
                this.getList();
              })
             })
          }
        
      },
     
      refresh() {
        this.getList();

      },
      handleQuery() {
        this.getList();
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.getList();
      }
    },
    created() {
      this.getList();
      
    }
  }
</script>

<style scoped>

</style>
