<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
		<el-form-item label="期次" prop="qi">
			<el-cascader v-model="queryParams.qi" placeholder="请选择期次" :props="prop" :options="options" @change="handleChange">
				<template slot-scope="{ node, data }">
					<span v-if="data.children != null">{{ data.year+'年' }}</span>
					<span v-else> {{ '第 '+data.year+' 期' }} </span>
				</template>
			</el-cascader>
		</el-form-item>
      <el-form-item label="单位名称" prop="qyName" >
      	<el-input v-model="queryParams.qyName" placeholder="请输入单位名称" clearable
      		@keyup.enter.native="handleQuery" />
      </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>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" @click="handleXuQi" plain icon="el-icon-time" size="mini">续期</el-button></el-col>
      <el-col :span="1.5"></el-col></el-row>
    <div v-show="xuqiNow == false">
      <el-table v-if="xuqiNow == false" empty-text="输入正确条形码进行查询" v-loading="loading" :data="RenCaiZSYxqLogList"
        @selection-change="handleSelectionChange" :row-key="getRowKeys">
        <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
        <el-table-column label="序号" width="60" align="center" prop="">
          <template slot-scope="scope">
            {{ getXvhao(scope.$index, queryParams) }}
          </template>
        </el-table-column>
        <el-table-column label="期次" width="120" align="center" prop="qiciYearValue" />
        <el-table-column label="姓名" align="center" prop="userName" />
        <el-table-column label="性别" width="50" align="center" prop="sex" />
        <el-table-column label="身份证号" width="170" align="center" prop="idCard" />
        <el-table-column label="单位名称" width="280" align="center" prop="qyName" />
        <!-- <el-table-column label="单位汇总表（条形码）" width="150" align="center" prop="undef3" /> -->
        <!-- <el-table-column label="个人证书（条形码）" width="170" align="center" prop="undef4" /> -->
        <el-table-column label="证书编号" width="110" align="center" prop="zsbh" />
        <el-table-column label="证书有效期至" width="100" align="center" prop="yxqz">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.yxqz, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报名时间" width="150" align="center" prop="addDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.addDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="及格分数" align="center" prop="jgfs" />
        <el-table-column label="考试分数" align="center" prop="ksfs" />
        <el-table-column label="考试次数" align="center" prop="kscs" /> 
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <div v-show="xuqiNow == true">
      <el-table v-loading="loading" border="" :data="RenCaiZSYxqLogListXuQi">
        <el-table-column label="序号" align="center" type="index">
        </el-table-column>
        <el-table-column label="姓名" width="140" align="center" prop="Name" />
        <el-table-column label="性别" width="50" align="center" prop="Sex" />
        <el-table-column label="身份证号" width="180" align="center" prop="ShenFenZheng" />
        <el-table-column label="单位名称" min-width="200" align="center" prop="Dept" />
        <el-table-column label="证书号" width="250" align="center" prop="JLZhengHao" />
        <el-table-column label="证书编号" width="200" align="center" prop="JLZhengHaoNum" />
        <el-table-column label="发证日期" width="120" align="center" prop="addDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.JLfzrq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="有效期至" width="120" align="center" prop="yxqz">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.JLYxqz, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="totalXuQi > 0" :total="totalXuQi" :page.sync="queryParamsXuQi.pageNum"
        :limit.sync="queryParamsXuQi.pageSize" @pagination="getListXuQi" />
    </div>
    <el-dialog title="监理工程师证书续期" :visible.sync="dialogVisible" width="500px">
      <div style="margin-left: 20px;">
        监理工程师有效期至：
        <el-date-picker v-model="value1" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 200px;" e="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="zsRiqi">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
	import { searchQici } from "@/api/xiehui/jxjy/Training"
import { RenCaiXQVO, zsyxqxq, zsyxqxqList } from "@/api/jlry/RenCaiZSYxqLog";
export default {
  components: {},
  props: {},
  data() {
    return {
      totalXuQi: 0,
      queryParamsXuQi: {
        pageNum: 1,
        pageSize: 10,
      },
      RenCaiZSYxqLogListXuQi: [],
      xuqiNow: false,
      RenCaiZSYxqLogList: [],
      dialogVisible: false,
      value1: '',
      loading: false,
      total: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: "adddate",
        isAsc: "desc",
		qi:null,
		qiciyear:null,
		qici:null,
		qyName:null,
		barCode:null
      },
      cardNos: '',
	  options:[],
	  prop:{
	  	label:"year",
	  	value:"year"
	  }
    };
  },
  watch: {},
  computed: {},
  methods: {
	  qiciSearch(){
	  	searchQici().then(res=>{
	  		this.options = res.data
	  	})
	  },
	  //选择期次
	  handleChange(e){ 
	  	this.queryParams.qiciyear = e[0]
	  	this.queryParams.qici = e[1]
	  },
    getRowKeys(row) {
      return row.personid;
    },
    getListXuQi() {
      zsyxqxqList({ ids: this.cardNos, pageSize: this.queryParamsXuQi.pageSize, pageNum: this.queryParamsXuQi.pageNum }).then((res) => {
        this.RenCaiZSYxqLogListXuQi = res.rows
        this.totalXuQi = res.total
      })
    },
    handleXuQi() {
      this.dialogVisible = true;
    },
    zsRiqi() {
      zsyxqxq({ JLYxqz: this.value1, idCardListStr: this.cardNos }).then((res) => {
        this.dialogVisible = false;
        this.$modal.msgSuccess({
          message: "续期成功",
          type: "success",
        });
        zsyxqxqList({ ids: this.cardNos, pageSize: this.queryParamsXuQi.pageSize, pageNum: this.queryParamsXuQi.pageNum }).then((res) => {
          this.RenCaiZSYxqLogListXuQi = res.rows
          this.xuqiNow = true
          this.totalXuQi = res.total
          this.value1 = null
        })
      });
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.personid)
      this.cardNos = selection.map(item => item.idCard).join(',')
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    getList() {
      RenCaiXQVO(this.queryParams).then((res) => {
        this.RenCaiZSYxqLogList = res.rows;
        this.total = res.total;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.xuqiNow = false
      this.getList();
    },
    resetQuery() {
		this.queryParams.qiciyear = null
		this.queryParams.qici = null
      this.resetForm("queryForm");
      this.handleQuery();
    }
  },
  created() { },
  mounted() {
	  this.qiciSearch()
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__empty-text {
  line-height: 60px;
  width: 50%;
  color: red;
}
</style>
