<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="dataList" >
      <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.COMMON_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)"
                     v-hasPermi="['system:dict:detail']">详情</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['system:dict:delete']">删除</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">
          <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">
          <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, delHistoryData, exportHistoryData } from "@/api/presonnel/data";
import { DICT_TYPE } from '@/utils/dict'

export default {
  name: "SystemDictData",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 总条数
      total: 0,
      // 字典表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      openDetail: false,
      // 表单参数
      form: {},
    };
  },
  created() {
    const dictId = this.$route.params && this.$route.params.Id;
    this.getType(dictId);
    this.getTypeList();
  },
  methods: {
    /** 查询字典数据列表 */
    getList() {
      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 = "详情";
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id;
      this.$modal.confirm('是否确认删除字典编码为"' + ids + '"的数据项?').then(function() {
          return delHistoryData(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
          this.exportLoading = true;
          return exportHistoryData(queryParams);
        }).then(response => {
          this.$download.excel(response, '字典数据.xls');
          this.exportLoading = false;
      }).catch(() => {});
    }
  }
};
</script>
