<template>
  <div>
    <div class="mar_T_20 data_pay right_con">
      <div class="before_title_fgx fl"></div>
      <p class="data_pay_text">员工薪资</p>
      <Table :columns="datapayList" :data="datapayData" border class="tables"></Table>
      <div class="page">
        <Page :total="count" :page-size="10" size="small" show-total show-elevator @on-change="getWageManager"/>
      </div>
    </div>
  </div>
</template>
<script>
import dataheader from "@@/data/data_header";
import { mapState } from "vuex";
export default {
  name: "data_pay",
  components: { dataheader },
  data() {
    return {
      divnum: 4,
      pindex: 1,
      count: 0,
      headerInfo: {
        yesterdayConsume: null, //昨日消费
        todayConsume: null, //今日消费
        yesterdayPromotionBonus: null, //昨日推广奖金
        todayPromotionBonus: null, //今日推广奖金
        lastMonthTotalBonus: null, //上月总计奖金
        thisMonthTotalBonus: null, //本月总计奖金
        yesterdayConsumeCommission: null, //昨日消费提成
        todayConsumeCommission: null, //今日消费提成
        lastMonthCommission: null, //上月总计提成
        thisMonthCommission: null //本月累计提成
      },
      datapayList: [
        {
          title: "工资单ID",
          width: 80,
          key: "id"
        },
        {
          title: "发放时间",
          render: (h, params) => {
            return h("span", params.row.year + "-" + params.row.month);
          }
        },
        {
          title: "姓名",
         key:"manager_name"
        },
        {
          title: "账号ID",
          key: "manager_id"
        },
        {
          title: "基本工资",
          class: "a_text",
          render: (h, params) => {
            return h("span", this.translateMoneyData(Number(params.row.base_wage) / 100));
          }
        },
        {
          title: "成长基金",
          class: "a_text",
          render: (h, params) => {
            return h("span", this.translateMoneyData(Number(params.row.grow_wage) / 100));
          }
        },
        {
          title: "元老奖励",
          className: "table-special",
          render: (h, params) => {
            return h("span", this.translateMoneyData(Number(params.row.elder_bonus ) / 100));
          }
        },
        {
          title: "消费提成",
          render: (h, params) => {
            return h("span", this.translateMoneyData(Number(params.row.recharge) / 100));
          }
        },
        {
          title: "全勤奖",
          render: (h, params) => {
            return h("span", this.translateMoneyData(Number(params.row.full_reward) / 100));
          }
        },
        {
          title: "加班费",
          render: (h, params) => {
            return h("span", this.translateMoneyData(Number(params.row.overtime_pay) / 100));
          }
        },
        {
          title: "住宿费",
          render: (h, params) => {
            return h("span", this.translateMoneyData(Number(params.row.room) / 100));
          }
        },
        {
          title: "餐费",
          render: (h, params) => {
            return h("span", this.translateMoneyData(Number(params.row.food) / 100));
          }
        },
        {
          title: "补贴",
          width: 140,
          render: (h, params) => {
            if (params.row.other.length) {
              return h("div", [
                h(
                  "div",
                  params.row.other.map((item, index) => {
                    return h("div", [
                      h("span", item.title),
                      h(
                        "span",
                        {
                          class: "a_text",
                          style: { width: "50px", margin: "0px 5px" }
                        },
                        this.translateMoneyData(Number(item.price) / 100)
                      ),
                      h("span", "元")
                    ]);
                  })
                )
              ]);
            }else{
              return h('span','--')
            }
          }
        },
        {
          title: "工资",
          className: "table-special",
          render: (h, params) => {
            return h("span", this.translateMoneyData(Number(params.row.total_salary) / 100));
          }
        },
      ],
      datapayData: []
    };
  },
  watch: {},
  computed:{
    ...mapState({
      nickname: state => state.adminInfo.nickname
    }),
  },
  methods: {
    getWageManager(page = 1) {
      this.pindex = page;
      this.$store.commit("changeloading", true);
      this.$api.getWageManager({ limit: 10, page: this.pindex }).then(data => {
        if (data.code == 200) {
          this.datapayData = data.data;
          this.count = data.count;
          this.$store.commit("changeloading", false);
        } else {
          this.$Message.info(data.msg);
          this.$store.commit("changeloading", false);
        }
      });
    },
     translateMoneyData(e) {
      e = e.toFixed(2)
      return e
    }
  },
  created() {
    this.getWageManager();
  }
};
</script>
<style>
.data_pay_text {
  font-size: 15px;
  margin-top: 15px;
  margin-left: 5px;
}
</style>



