<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible="dialogFormVisible"
    @close="cancelForm"
    :close-on-click-modal="false"
    class="el-dialog-double"
  >
      <!-- 内容区域 -->
      <section class="contentBox">
          <el-table :data="tableData" ref="districtTable"  max-height="500" default-expand-all  row-key="id">
              <el-table-column v-for="(item,index) in tableColumn" :key="index" :prop="item.prop" :label="item.label" :width="item.width" v-if="item.show">
                  <template slot-scope="scope">                            
                      <span>{{scope.row[item.prop]}}</span>
                  </template>
              </el-table-column>                    
          </el-table>
          <!-- 分页页签 -->
          <pages
          :total='params.total'
          :currentPage.sync='params.pageIndex'
          :pageSize='params.pageSize'
          @handleCurrentChangeSub="handleCurrentChange"
          @handleSizeChangeSub="handleSizeChange"
          ></pages>
      </section>
  </el-dialog>
</template>
<script>
import { employeeRecordsListApi } from "@/api/staffApi.js"
export default {
  props: ["showEmpRecorddialog"],
  watch: {
    showEmpRecorddialog() {
      this.dialogFormVisible = this.showEmpRecorddialog;
    },    
  }, 
  data() {
    return {     
      title: "就职记录",
      dialogFormVisible: this.showEmpRecorddialog,
      OperType: 0, //0 新增  1修改
      formList: {},
      rules: {},  
      params:{//搜索条件
          pageIndex:1,
          pageSize:10,
          ignorePermission: true,
          employeeId:'',             
          total:0
      },
      tableData:[],
      tableColumn:[
        {prop:"name",label:"姓名",width:"100",show:true},
        {prop:"credentialType",label:"证件类型",width:"180",show:true},
        {prop:"credentialNumber",label:"证件号",width:"180",show:true},
        {prop:"occupationType",label:"职业类型",width:"100",show:true},
        {prop:"status",label:"入/离职",width:"100",show:true},
        {prop:"actionTime",label:"入/离职时间",width:"120",show:true},
        {prop:"actionNode",label:"备注",width:"100",show:true},
        {prop:"operatorName",label:"操作人",width:"180",show:true},
        {prop:"operatorTime",label:"操作时间",width:"180",show:true},
    ],   
    };
  },
  mounted(){},
  methods: {  
    getTableRow(data, type) {       
      let newRowData = JSON.parse(JSON.stringify(data)); //拷贝一份存储对象
      this.formList = newRowData; //拷贝一份存储对象引用不同地址
      this.OperType = type; 
      this.params.employeeId=this.formList.id
      this.List()       
    }, 
    List(){
        employeeRecordsListApi(this.params).then(response=>{
            if(response.data){
                this.tableData=response.data.data
                this.params.total=response.data.total
            }
        })
     },
     handleCurrentChange(val){//分页切换页码
       console.log(val)
       this.params.pageIndex=val
       this.List()
     },
     handleSizeChange(val){//切换每页条数
       console.log(val)
       this.params.pageSize=val
       this.List()
    }, 
    cancelForm() {
      //取消关闭
      this.$emit("update:showEmpRecorddialog", false);
      // this.$nextTick(function () {
      //   this.$refs.ruleForm.resetFields(); //重置输入框提示
      // });
    },
  },
};
</script>
<style lang="scss">
// .el-dialog-single{
//   .el-form-item{
//     display: flex;
//     flex-direction: column;
//     .el-form-item__content{margin-left:20px!important;}
//   }
// }
.elradioLineheight{
    margin-top:5px; 
  .el-radio{display: block; line-height: 30px;}
}
</style>