<template>
  <div>
    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="手机号码" prop="phone">
          <el-input
            placeholder="请输入手机号码"
            v-model="searchInfo.phone"
            type="text"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="phone">
          <el-input
            placeholder="请输入姓名"
            v-model="searchInfo.nickname"
            type="text"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="身份证" prop="cardId">
          <el-input
            placeholder="请输入身份证"
            v-model="searchInfo.cardId"
            type="text"
            class="user-form-item"
            clearable
          ></el-input>
        </el-form-item>
		
		
		<el-form-item  label="是否新培" prop="type">
		  <el-switch active-value="新培" inactive-value="继续教育"  v-model="searchInfo.type"></el-switch>
		</el-form-item>
		
		<el-form-item  label="是否测试" prop="isTest">
		  <el-switch :active-value="1" :inactive-value="0"  v-model="searchInfo.qa"></el-switch>
		</el-form-item>
		
		<el-form-item  label="学习完成" prop="isOk">
		  <el-switch :active-value="1" :inactive-value="0"  v-model="searchInfo.isFinish"></el-switch>
		</el-form-item>
		
        <el-form-item>
          <el-button type="primary" size="small" @click="download">
            导出excel
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" border stripe>
      <el-table-column label="ID" width="70" prop="id"> </el-table-column>

      <el-table-column label="手机号码" prop="phone" > </el-table-column>
      <el-table-column label="身份证" prop="cardId"> </el-table-column>
      <el-table-column label="姓名" prop="nickname"> </el-table-column>
	  
	  <el-table-column label="分类" prop="type"> </el-table-column>
	  <el-table-column label="课程" prop="name"> </el-table-column>
	  
	  <el-table-column label="获得学时" prop="getXs">
		  <template slot-scope="{ row }">
		    <span>{{ (row.totalXs>row.getXs)?(row.getXs/10):(row.totalXs/10)}}/{{row.totalXs/10}}</span>
		  </template>
	   </el-table-column>
	  
	  <el-table-column label="学习时间" prop="createAt">
	    <template slot-scope="{ row }">
	      <span>{{ row.startDate }}到 {{row.endDate||'至今'}}</span>
	    </template>
	  </el-table-column>
	  
    </el-table>
    <el-pagination
      :current-page="page"
      :page-size="pageSize"
      :page-sizes="[10, 30, 50, 100, 1000]"
      :style="{ float: 'right', padding: '20px' }"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import { getUserCourseList, postData } from "@/api/study.js";
import { toDatetime, toDate } from "@/utils/date";
import infoList from "@/mixins/infoList";
import { time2str, str2time } from "@/utils/index.js";
import DropSearch from "@/components/select/DropSearch.vue";
import ShowImg from "@/components/customPic/showImg.vue";

export default {
  name: "Api",
  data() {
    return {
      listApi: getUserCourseList,
      page: 1,
      total: 10,
      pageSize: 10,
      tableData: []
    };
  },
  watch: {
    "searchInfo.phone"(val) {
      this.page = 1;
	  if( val=='' || val.length== 11 ) {
		this.getTableData();
	  }
    },
    "searchInfo.cardId"(val) {
      this.page = 1;
	  if( val=='' || val.length== 18 ) {
	  	this.getTableData();
	  }
    },
	"searchInfo.isFinish"(val) {
	  this.page = 1;
	  this.getTableData();
	},
	"searchInfo.type"(val) {
	  this.page = 1;
	  this.getTableData();
	},
	"searchInfo.qa"(val) {
	  this.page = 1;
	  this.getTableData();
	},
    "searchInfo.nickname"(val) {
      this.page = 1;
      this.getTableData();
    },
  },
  components: { DropSearch, ShowImg },
  mixins: [infoList],
  methods: {
    validatePass(rule, value, callback) {
      if (value == this.form.password) {
        callback();
      } else {
        callback(new Error("两次密码不服"));
      }
    },
    download() {
		this.downloadLoading = true
		if( this.total< 1){
		  this.$message.errorMsg("未搜到数据", 1)
		  return;
		}
        import('@/vendor/Export2Excel').then(excel => {
		  const tHeader = ['序号','姓名', '性别', '身份证', '手机', '学历','工作单位',  '岗位名称', '学时数', '完成培训时间',  '证书编号', '企业注册地', '备注'];
		  const filterVal = ['id', 'nickname', 'gender','cardId', 'phone','education','company', 'name', 'totalXs', 'endDate', 'rzCode', 'companyAddress', 'marks']
		  const list = this.tableData
		  const data = this.formatJson(filterVal, list)
		  excel.export_json_to_excel({
			header: tHeader,
			data,
			filename: Date.now(),
			autoWidth: true,
			bookType: "xlsx"
		  })
		  this.downloadLoading = false
		})
	  },
	  formatJson(filterVal, jsonData) {
		return jsonData.map(v => filterVal.map(j => {
		  if (j === 'marks') {
			let res = ""
			if( v.getXs>=v.totalXs ){ 
				res+= "完成课程";
			}else{
				res+= `完成${v.getXs/10}学时`;
			}
			res+= `,成绩${v.score} ${v.score>=60?'合格':'不合格'}`
			return  res
		  }
		  if( j == 'totalXs') return (v.totalXs/10);
		  return v[j]
		  
		}))
	  }
  },
  filters: {
    toDatetime,
	toDate
  },
  created() {
    this.getTableData();
  },
};
</script>
<style scoped lang="scss">
.el-tag--mini {
  margin-left: 5px;
}
.warning {
  color: #dc143c;
}
</style>
