<template>
  <div class="main main-paySlips main-paySlips-month" id="main_index">
    <div class="slips-mid">
      <div class="slips-mid-top">
        <p>实发工资(元)</p>
        <h3>
          <span
            >￥{{
              Number(obj[0].currentRealWage).toFixed(2) | get_thousand_num
            }}</span
          >
        </h3>
      </div>
      <div class="slips-mid-bottom">
        <p>
          <label>收入来源</label>
          <span>{{ obj[0].abbrName }}</span>
        </p>
        <p>
          <label>保存账户</label>
          <span>{{ obj[0].bankNo }}</span>
        </p>
        <p>
          <label>发放时间</label>
          <span>{{ obj[0].payTime }}</span>
        </p>
      </div>
    </div>
    <div class="slips-bottom">
      <h3>工资明细</h3>
      <hr />
      <div class="pay-detail-box">
        <p>
          <label>本次收入</label>
          <span
            >￥{{
              (Number(obj[0].currentRealWage) -
                Number(obj[0].currentBaseOldInsurance) -
                Number(obj[0].currentBaseHealthInsurance) -
                Number(obj[0].currentUnemploymentInsurance) -
                Number(obj[0].currentFund) -
                Number(obj[0].currentTaxDeduction))
                | get_thousand_num
            }}</span
          >
        </p>
        <p>
          <label>养老保险</label>
          <span class="green"
            >-{{
              Number(obj[0].currentBaseOldInsurance).toFixed(2)
                | get_thousand_num
            }}</span
          >
        </p>
        <p>
          <label>医疗保险</label>
          <span class="green"
            >-{{
              Number(obj[0].currentBaseHealthInsurance).toFixed(2)
                | get_thousand_num
            }}</span
          >
        </p>
        <p>
          <label>失业保险</label>
          <span class="green"
            >-{{
              Number(obj[0].currentUnemploymentInsurance).toFixed(2)
                | get_thousand_num
            }}</span
          >
        </p>
        <p>
          <label>住房公积金</label>
          <span class="green"
            >-{{
              Number(obj[0].currentFund).toFixed(2) | get_thousand_num
            }}</span
          >
        </p>
        <p>
          <label>代扣个税</label>
          <span class="green"
            >-{{
              Number(obj[0].currentTaxDeduction).toFixed(2) | get_thousand_num
            }}</span
          >
        </p>
        <p class="wages">
          <label>实发工资</label>
          <span
            >-{{
              Number(obj[0].currentRealWage).toFixed(2) | get_thousand_num
            }}</span
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import "../assets/css/labor.css";
import Vue from "vue";
import { Component } from "vue-property-decorator";

@Component({})
export default class PaySlipsMonth extends Vue {
  private obj: any = [
    {
      no: "",
      abbrName: "",
      currentRealWage: 0,
      currentBaseOldInsurance: 0,
      cardType: "",
      bankNo: "",
      currentFund: 0,
      payTime: "",
      currentIncome: 0,
      currentUnemploymentInsurance: 0,
      cardNo: "",
      currentBaseHealthInsurance: 0,
      name: "",
      bankName: "",
      bankOpen: "",
      currentTaxDeduction: 0
    }
  ];
  private id: any = "";

  private getSalaryInfo(): void {
    let params = {
      id: this.id
    };
    this.$server.EmployeeService.getSalaryInfoDetail(params)
      .then((res: any) => {
        // console.log("res=" + JSON.stringify(res) + "工资条信息");
        this.obj = res;
        console.log("obj=", JSON.stringify(this.obj));
      })
      .catch((error: any) => {});
  }

  init() {
    this.id = this.$route.query.id;

    this.getSalaryInfo();
    // this.obj = {
    //   rescode: 0,
    //   data: [
    //     {
    //       no: "GZ20200608160345451651972",
    //       abbrName: "1022服务商Q",
    //       currentRealWage: 500000,
    //       current_base_old_insurance: 10000,
    //       card_type: "居民身份证",
    //       bank_no: "6214833401590859",
    //       current_fund: 3000,
    //       pay_time: "2020-06-08",
    //       current_income: 650000,
    //       current_unemployment_insurance: 2000,
    //       card_no: "330881199511043934",
    //       current_base_health_insurance: 5000,
    //       name: "李鹏飞",
    //       bank_name: "招商银行",
    //       bank_open: "招商银行中华北大街支行",
    //       current_tax_deduction: 5000
    //     }
    //   ]
    // };
  }

  created() {
    console.log("this.id=", this.id);

    this.init();
  }
}
</script>

<style lang="less">
.green {
  color: #70b603 !important;
}
</style>