<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="dataList" >
      <el-table-column label="序号" type="index" width="50"align="center"/>
      <!-- <el-table-column label="员工ID" align="center" prop="id" /> -->
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="部门" align="center" prop="deptName" />
      <el-table-column label="职位" align="center" prop="position" />
      <!-- <el-table-column label="员工编号" align="center" prop="employeeNumber" /> -->
      <el-table-column label="入职时间" align="center" prop="entryDate" />
      <el-table-column label="员工状态" align="center" prop="employeeStatus">
        <template v-slot="scope">
          <dict-tag :type="DICT_TYPE.EMPLOYEE_STATUS" :value="scope.row.employeeStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="当前可用年假" align="center" prop="remainingAnnualLeave"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template v-slot="scope">
          <el-button size="mini" type="text" icon="el-icon-detail" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
     <!-- 详情对话框 -->
     <el-dialog :title="title" :visible.sync="openDetail" width="800px" append-to-body>
      <div class="widget-wrapper">
        <div class="widget-list" v-loading="loading">
          <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">员工姓名</div>
        </div>
        <div class="field-component">
          <span :title="form.name">{{ form.name }}</span>
        </div>
      </div>
      <!-- <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">员工ID</div>
        </div>
        <div class="field-component">
          <span :title="form.id">{{ form.id }}</span>
        </div>
      </div> -->
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">员工部门</div>
        </div>
        <div class="field-component">
          <span>{{ form.deptName }}</span>
        </div>
      </div>
    
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">员工职位</div>
        </div>
        <div class="field-component">
          <span>{{ form.position }}</span>
        </div>
      </div>
      <!-- <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">员工编号</div>
        </div>
        <div class="field-component">
          <span>{{ form.employeeNumber }}</span>
        </div>
      </div> -->

      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">入职时间</div>
        </div>
        <div class="field-component">
          <span>{{ form.entryDate }}</span>
        </div>
      </div>

      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">试用期期</div>
        </div>
        <div class="field-component">
          <span>{{ form.probationEndDate }}</span>
        </div>
      </div>

      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">员工状态</div>
        </div>
        <div class="field-component">
          <dict-tag :type="DICT_TYPE.EMPLOYEE_STATUS" :value="form.employeeStatus"/>
          <!-- <span>{{ form.employeeStatus }}</span> -->
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">电子邮箱</div>
        </div>
        <div class="field-component">
          <span>{{ form.email }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">身份证号</div>
        </div>
        <div class="field-component">
          <span>{{ form.idCardNumber }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">性别</div>
        </div>
        <div class="field-component">
          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="form.gender"/>
          <!-- <span>{{ form.gender }}</span> -->
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">最高学历</div>
        </div>
        <div class="field-component">
          <span>{{ form.educationLevel }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">手机号</div>
        </div>
        <div class="field-component">
          <span>{{ form.phone }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">毕业院校</div>
        </div>
        <div class="field-component">
          <span>{{ form.graduationSchool }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">毕业时间</div>
        </div>
        <div class="field-component">
          <span >{{ form.graduationDate }}</span>
        </div>
      </div>

      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">银行卡号</div>
        </div>
        <div class="field-component">
          <span>{{ form.bankCardNumber }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">银行卡</div>
        </div>
        <div class="field-component">
          <span>{{ form.bankCardName }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">年假基数</div>
        </div>
        <div class="field-component">
          <span>{{ form.baseAnnualLeave }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">剩余年假</div>
        </div>
        <div class="field-component">
          <span>{{ form.remainingAnnualLeave }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">离职时间</div>
        </div>
        <div class="field-component">
          <span>{{ form.departureDate }}</span>
        </div>
      </div>
      <div class="fx-field x-grid-col-12">
        <div class="field-label">
          <div class="field-name">离职原因</div>
        </div>
        <div class="field-component">
          <span>{{ form.resignationReason }}</span>
        </div>
      </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listHistoryData, getHistoryData, } from "@/api/personnel/employee/data";

export default {
  name: "SystemDictData",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 总条数
      total: 0,
      // 字典表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      openDetail: false,
      // 表单参数
      form: {},
      queryParams : {
        pageNo: 1,
        pageSize: 10,
        employeeId: ''
      },
    };
  },
  created() {
    const dataId = this.$route.params && this.$route.params.Id;
    this.getList(dataId);
  },
  methods: {
    /** 查询字典数据列表 */
    getList(dataId) {
      this.queryParams.employeeId = dataId;
      this.loading = true;
      listHistoryData(this.queryParams).then(response => {
        this.dataList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
     /** 详情按钮操作 */
     handleDetail(row) {
      const id = row.id;
      getHistoryData(id).then(response => {
        this.form = response.data;
        this.openDetail = true;
        this.title = "详情";
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.widget-wrapper>.widget-list {
  display: flex;
  flex-wrap: wrap;
}

.x-grid-col-6 {
  width: 50%;
}

.x-grid-col-12 {
  width: 100%;
}

.fx-field {
  line-height: 20px;
  padding: 7px 12px 12px;
  postId: relative;
}

.fx-field .field-label {
  word-wrap: break-word;
  color: #141e31;
  display: flex;
  font-weight: 600;
  line-height: 20px;
  padding: 5px 0;
  position: relative;
  word-break: break-word;
}

.fx-field .field-label .field-required {
  color: #eb5050;
  margin-left: -6px;
  position: relative;
}

.fx-field .field-label .field-name {
  overflow: hidden;
}

.field-component {
  word-wrap: break-word;
  background: #f5f6f8;
  border-radius: 2px;
  color: #141e31;
  font-size: 14px;
  line-height: 20px;
  min-height: 32px;
  padding: 6px 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

ul {
  padding-left: 0px !important;
}

.el-tag+.el-tag {
  margin-left: 10px;
}
</style>