<!--
 * @Author: ysh
 * @Date: 2024-09-29 17:20:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-06-09 09:58:25
-->
<template>
  <div>
    <div id="printPerformance">
      <h2 class="text-center title">绩效统计表</h2>
      <table border="1">
        <tr>
          <td :colspan="1" class="fontbold">上报人</td>
          <td :colspan="4">{{ getUserName(form.reporter) }}</td>
          <td :colspan="1" class="fontbold">上报部门</td>
          <td :colspan="3">{{ getDeptName(form.reportDept) }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">上报时间</td>
          <td :colspan="8">{{ form.reportTime }}</td>
        </tr>
        <tr>
          <td :colspan="9" class="fontbold">绩效明细</td>
        </tr>
        <tr>
          <td :colspan="9">
            <table border="1" style="width:100%;text-align: center;">
              <tr style="font-weight: bold;">
                <td style="width:70px;">序号</td>
                <td>姓名</td>
                <td>部门</td>
                <td>生产绩效</td>
                <td>管理绩效</td>
                <td>总绩效</td>
                <td>统计月份</td>
              </tr>
              <tr v-for="(item, index) in performanceTableData" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.nickName }}</td>
                <td>{{ item.dept.deptName }}</td>
                <td style="text-align: right;">{{ item.producePerformance.toFixed(2) }}</td>
                <td style="text-align: right;">{{ item.managePerformance.toFixed(2) }}</td>
                <td style="text-align: right;">{{ (Number(item.producePerformance) + Number(item.managePerformance)).toFixed(2) }}</td>
                <td>{{ parseTime(item.performanceMonth, '{y}-{m}') }}</td>
              </tr>
              <tr v-if="!performanceTableData || performanceTableData.length === 0">
                <td colspan="7">无</td>
              </tr>
              <tr>
                <td colspan="3">总计</td>
                <td style="text-align: right;">
                  {{ performanceTableData.reduce((acc, curr) => acc + Number(curr.producePerformance || 0), 0).toFixed(2) }}
                </td>
                <td style="text-align: right;">
                  {{ performanceTableData.reduce((acc, curr) => acc + Number(curr.managePerformance || 0), 0).toFixed(2) }}
                </td>
                <td style="text-align: right;">
                  {{ performanceTableData.reduce((acc, curr) => acc + Number(curr.producePerformance || 0) + Number(curr.managePerformance || 0), 0).toFixed(2) }}
                </td>
                <td></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">绩效说明</td>
          <td :colspan="8" style="white-space: pre-wrap;">{{ form.remark }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">分管审核意见</td>
          <td :colspan="3">{{ form.managerComment }}</td>
          <td :colspan="1" class="fontbold">签名</td>
          <td :colspan="2"><span class="auditor">{{ form.managerUser ? form.managerUser.nickName : '' }}</span></td>
          <td :colspan="1" style="min-width:90px;">{{ form.managerTime }}</td>
        </tr>
        <tr>
          <td :colspan="1" class="fontbold">总经理审批意见</td>
          <td :colspan="3">{{ form.zjlComment }}</td>
          <td :colspan="1" class="fontbold">签名</td>
          <td :colspan="2"><span class="auditor">{{ form.zjlUser ? form.zjlUser.nickName : '' }}</span></td>
          <td :colspan="1" style="min-width:90px;">{{ form.zjlTime }}</td>
        </tr>
      </table>
    </div>
    <div class="text-center mt20">
      <el-button type="primary" v-print="print">确认打印</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </div>
  </div>
</template>

<script>
import { parseTime } from "@/utils/ruoyi";

export default {
  name: 'PerformancePrint',
  props: {
    form: {
      type: Object,
      required: true
    },
    performanceTableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      print: {
        id: 'printPerformance',
        popTitle: '绩效统计表打印',
        extraHead: '',
        preview: false,
        previewTitle: '',
        previewPrintBtnLabel: '',
        zIndex: '',
        previewBeforeOpenCallback() { },
        previewOpenCallback() { },
        beforeOpenCallback() { },
        openCallback() { },
        closeCallback() { },
        url: '',
        standard: '',
        extraCss: ''
      }
    }
  },
  methods: {
    getUserName(userId) {
      const user = this.$store.state.user.userList.find(item => item.userId === userId)
      return user ? user.nickName : ''
    },
    getDeptName(deptId) {
      const dept = this.$store.state.user.deptList.find(item => item.deptId === deptId)
      return dept ? dept.deptName : ''
    },
    getFileName(name) {
      if (name) {
        let arr = name.split('/')
        return arr[arr.length - 1]
      }
      return ''
    },
    parseTime
  }
}
</script>

<style lang="scss" scoped>
table {
  width: 90%;
  text-align: left;
  border-collapse: collapse;
  margin: 0 auto;
  border: 1px solid #a5abb0;

  td {
    padding: 15px;
  }
}

.title {
  font-family: '黑体';
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

.fontbold {
  font-weight: bold;
  min-width: 100px;
  text-align: center;
}

@page {
  size: auto;
  margin-bottom: 0;
}

@media print {
  #printPerformance table {
    width: 100%;
  }
}
</style>