<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="detailList">
      <el-table-column label="基本工资" align="center" prop="basicSalary" />
      <el-table-column label="岗位工资" align="center" prop="jobsSalary" />
      <el-table-column label="日薪" align="center" prop="dailyWage" />
      <el-table-column label="时薪" align="center" prop="hoursSalary" />
      <el-table-column label="全勤奖" align="center" prop="fullFrequentlySubsidies" />
      <el-table-column v-for="(val,key) in detailList[0].extendeds" :key="key" :label="key">
          <span>{{ val }}</span>
      </el-table-column>
      <!-- <el-table-column label="学历补助" align="center" prop="levelOfEducationSubsidies" />
      <el-table-column label="合同补助" align="center" prop="contractSubsidies" />
      <el-table-column label="工龄补助" align="center" prop="senioritySubsidies" />
      <el-table-column label="社保补助" align="center" prop="socialSecuritySubsidies" />
      <el-table-column label="中班补助" align="center" prop="middleSubsidies" />
      <el-table-column label="夜班补助" align="center" prop="nightShiftSubsidies" />
      <el-table-column label="夜餐补助" align="center" prop="dinnerSubsidies" /> -->
      <el-table-column label="职务津贴" align="center" prop="fixedAllowance" />
      <el-table-column label="其他补助" align="center" prop="otherSubsidies" />
      <el-table-column label="早餐消费" align="center" prop="breakfastExpend" />
      <el-table-column label="午餐消费" align="center" prop="lunchExpend" />
      <el-table-column label="晚餐消费" align="center" prop="supperExpend" />
      <el-table-column label="离职扣款" align="center" prop="subsidyDeductMoney" />
      <el-table-column label="其他扣款" align="center" prop="deductions" />
      <el-table-column label="养老保险" align="center" prop="endowmentInsurance" />
      <el-table-column label="医疗保险" align="center" prop="medicalInsurance" />
      <el-table-column label="工伤保险" align="center" prop="employmentInjuryInsurance" />
      <el-table-column label="生育保险" align="center" prop="maternityInsurance" />
      <el-table-column label="失业保险" align="center" prop="unemploymentInsurance" />
      <el-table-column label="公积金" align="center" prop="accumulationFund" />
      <el-table-column label="子女教育" align="center" prop="childrenEducation" />
      <el-table-column label="赡养老人" align="center" prop="supportTheOld" />
      <el-table-column label="住房贷款" align="center" prop="housingLoans" />
      <el-table-column label="住房租金" align="center" prop="housingRents" />
      <el-table-column label="继续教育" align="center" prop="adultEducation" />
      <el-table-column label="大病医疗" align="center" prop="treatmentForSeriousDisease" />
      <el-table-column label="本年累计专项附加扣除" align="center" prop="specialDeduction" />
      <el-table-column label="本年累计已发工资" align="center" prop="totalWages" />
      <el-table-column label="本年累计已缴个税" align="center" prop="aggregatePersonalIncomeTax" />
      <el-table-column label="销售提成" align="center" prop="salesCommission" />
      <el-table-column label="备注" align="center" prop="remarks" />
      <el-table-column label="操作" align="center" fixed="right" width="100"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:staffDetail:edit']"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改员工详情对话框 -->
    <el-dialog :title="title" v-dialog-drag :visible.sync="open" width="620px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="98px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="基本工资" prop="basicSalary">
              <el-input v-model="form.basicSalary" placeholder="请输入基本工资" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位工资" prop="jobsSalary">
              <el-input v-model="form.jobsSalary" placeholder="请输入岗位工资" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="日薪" prop="dailyWage">
              <el-input v-model="form.dailyWage" placeholder="请输入日薪" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时薪" prop="hoursSalary">
              <el-input v-model="form.hoursSalary" placeholder="请输入时薪" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="全勤奖" prop="fullFrequentlySubsidies">
              <el-input v-model="form.fullFrequentlySubsidies" placeholder="请输入全勤奖" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中班补助" prop="middleSubsidies">
              <el-input v-model="form.middleSubsidies" placeholder="请输入夜餐补助" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="夜班补助" prop="nightShiftSubsidies">
              <el-input v-model="form.nightShiftSubsidies" placeholder="请输入夜班补助" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="夜餐补助" prop="dinnerSubsidies">
              <el-input v-model="form.dinnerSubsidies" placeholder="请输入夜餐补助" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他补助" prop="otherSubsidies">
              <el-input v-model="form.otherSubsidies" placeholder="请输入其他补助" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="固定补助" prop="fixedAllowance">
              <el-input v-model="form.fixedAllowance" placeholder="请输入固定补助" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="其他扣款" prop="deductions">
              <el-input v-model="form.deductions" placeholder="请输入其他扣款" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社保补助" prop="socialSecuritySubsidies">
              <el-input v-model="form.socialSecuritySubsidies" placeholder="请输入社保补助" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="子女教育" prop="childrenEducation">
              <el-input v-model="form.childrenEducation" placeholder="请输入子女教育" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="赡养老人" prop="supportTheOld">
              <el-input v-model="form.supportTheOld" placeholder="请输入赡养老人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="住房贷款" prop="housingLoans">
              <el-input v-model="form.housingLoans" placeholder="请输入住房贷款" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="继续教育" prop="adultEducation">
              <el-input v-model="form.adultEducation" placeholder="请输入继续教育" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="大病医疗" prop="treatmentForSeriousDisease">
              <el-input v-model="form.treatmentForSeriousDisease" placeholder="请输入大病医疗" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="住房租金" prop="housingRents">
              <el-input v-model="form.housingRents" placeholder="请输入住房租金" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同补助" prop="contractSubsidies">
              <el-input v-model="form.contractSubsidies" placeholder="请输入合同补助" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDetail, getDetail,updateDetail } from "@/api/system/staffDetail";

export default {
  name: "StaffDetail",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 员工详情表格数据
      detailList: [],
      // 弹出层标题
      title: "",
      total: 0,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        staffId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    var param = this.$route.query
    this.queryParams.staffId = param.staffId;
    this.getList();
  },
  methods: {
    /** 查询员工详情列表 */
    getList() {
      this.loading = true;
      listDetail(this.queryParams).then(response => {
        this.detailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        basicSalary: null,
        jobsSalary: null,
        dailyWage: null,
        hoursSalary: null,
        fullFrequentlySubsidies: null,
        levelOfEducationSubsidies: null,
        contractSubsidies: null,
        senioritySubsidies: null,
        socialSecuritySubsidies: null,
        nightShiftSubsidies: null,
        dinnerSubsidies: null,
        fixedAllowance: null,
        otherSubsidies: null,
        breakfastExpend: null,
        lunchExpend: null,
        supperExpend: null,
        subsidyDeductMoney: null,
        deductions: null,
        endowmentInsurance: null,
        medicalInsurance: null,
        employmentInjuryInsurance: null,
        maternityInsurance: null,
        unemploymentInsurance: null,
        accumulationFund: null,
        childrenEducation: null,
        supportTheOld: null,
        housingLoans: null,
        housingRents: null,
        adultEducation: null,
        treatmentForSeriousDisease: null,
        specialDeduction: null,
        totalWages: null,
        aggregatePersonalIncomeTax: null,
        salesCommission:null,
        remarks: null,
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getDetail(row.id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改员工详情";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateDetail(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },


  }
};
</script>
