<template>
  <div v-loading="loading">
    <div class="container">
      <div class="operate-btn" style="text-align: right; margin: 10px 16px;">
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
        <el-button size="small" type="primary" icon="el-icon-printer" v-print="'#budgetWrap'">打印</el-button>
      </div>
      <table id="budgetWrap" class="doc-page">
        <thead>
          <th colspan="3">研发项目经费预算表</th>
        </thead>
        <tbody>
          <tr>
            <td class="doc-label">研发项目名称</td>
            <td>
              <project-select v-model="currProjectId" @change="handleProjectChange"></project-select>
            </td>
          </tr>
          <tr>
            <td class="doc-label">项目申请单位</td>
            <td>{{ selProject.xmsqdw }}</td>
          </tr>
          <tr>
            <td class="doc-label">项目起止时间</td>
            <td>{{ getXmDateRange }}</td>
          </tr>
          
          <tr>
            <td class="doc-label">研究费用预算明细</td>
            <td style="padding: 0;">
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                show-summary
                class="budget-table"
                :summary-method="getSummaries"
              >
                <el-table-column
                  prop="kmmc"
                  label="科目名称"                  
                >
                </el-table-column>
                <el-table-column
                  prop="sales"
                  label="科目金额(万元)"
                  width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="ratio"
                  label="占总预算比例(%)"
                  align="center"
                  width="140"
                >
                </el-table-column>
              </el-table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import projectSelect from "@/components/project-select";
import { getAllBudget } from "@/api/projectManage/projectList";
import Decimal from "decimal.js";

export default {
  props: {
    projectId: [String, Number],
    projectData: Object
  },
  components: {
    projectSelect,
  },
  data() {
    return {
      currProjectId: "",
      tableData: [{
        kmmc: '一、人员人工费用',
      }, {
        kmmc: '二、直接投入费用'
      }, {
        kmmc: '三、折旧费用与长期待摊费用'
      }, {
        kmmc: '四、无形资产摊销费用'
      }, {
        kmmc: '五、设计费用'
      }, {
        kmmc: '六、装备调试费用与试验费用'
      }, {
        kmmc: '七、委托外部研究开发费'
      }, {
        kmmc: '八、其他费用'
      }],

      selProject: {},

      loading: false,
    };
  },
  computed: {
     getXmDateRange() {
      if (this.selProject.xmkssj && this.selProject.xmjssj) {
        let xmkssj = moment(this.selProject.xmkssj).format('yyyy年MM月DD日');
        let xmjssj = moment(this.selProject.xmjssj).format('yyyy年MM月DD日')
        return `${xmkssj}至${xmjssj}`;
      }
      return `年 月 日至 年 月 日`;
    },
  },
  watch: {
    projectId(newVal, oldVal) {
      this.currProjectId = newVal;
      if (oldVal) {
        this.selProject = this.projectData;
      }
    },
    currProjectId(newVal) {
      if (newVal) {
        this.getAllBudgetData(newVal);
      }
    }
  },
  mounted() {
    this.currProjectId = this.projectId || '';
  },
  methods: {
    handleRefresh() {
      this.getAllBudgetData(this.currProjectId);
    },
    handleProjectChange(data) {
      this.selProject = data;
      this.$emit("change", data);
    },
    getAllBudgetData(id) {
      this.loading = true;
      getAllBudget({ xmId: id }).then(({ data }) => {
        this.loading = false;
        if (data.success) {
          const { ryrgfy, zjtrfy, zjfyycqdtfy, wxzctxfy, sjfy, zbtsysyfy, wtwbyjkffy, qtfy } = data.data;
          const newData = {
            ryrgfy: new Decimal(ryrgfy === -1 ? 0 : ryrgfy).div(new Decimal(10000)).toFixed(4),
            zjtrfy: new Decimal(zjtrfy === -1 ? 0 : zjtrfy).div(new Decimal(10000)).toFixed(4),
            zjfyycqdtfy: new Decimal(zjfyycqdtfy === -1 ? 0 : zjfyycqdtfy).div(new Decimal(10000)).toFixed(4),
            wxzctxfy: new Decimal(wxzctxfy === -1 ? 0 : wxzctxfy).div(new Decimal(10000)).toFixed(4),
            sjfy: new Decimal(sjfy === -1 ? 0 : sjfy).div(new Decimal(10000)).toFixed(4),
            zbtsysyfy: new Decimal(zbtsysyfy === -1 ? 0 : zbtsysyfy).div(new Decimal(10000)).toFixed(4),
            wtwbyjkffy: new Decimal(wtwbyjkffy === -1 ? 0 : wtwbyjkffy).div(new Decimal(10000)).toFixed(4),
            qtfy: new Decimal(qtfy === -1 ? 0 : qtfy).div(new Decimal(10000)).toFixed(4),
          };

          let _total = new Decimal(newData.ryrgfy)
            .add(newData.zjtrfy)
            .add(newData.zjfyycqdtfy)
            .add(newData.wxzctxfy)
            .add(newData.sjfy)
            .add(newData.zbtsysyfy)
            .add(newData.wtwbyjkffy)
            .add(newData.qtfy);
          
          this.tableData = this.tableData.map((item, index) => {
            let readKey = '';
            if (index == 0) {
              readKey = 'ryrgfy';
            } else if (index == 1) {
              readKey = 'zjtrfy';
            } else if (index == 2) {
              readKey = 'zjfyycqdtfy';
            } else if (index == 3) {
              readKey = 'wxzctxfy';
            } else if (index == 4) {
              readKey = 'sjfy';
            } else if (index == 5) {
              readKey = 'zbtsysyfy';
            } else if (index == 6) {
              readKey = 'wtwbyjkffy';
            } else if (index == 7) {
              readKey = 'qtfy';
            }

            item.sales = newData[readKey];

            let ratio = 0;
            if (Number(_total) > 0) {
              ratio = (new Decimal(item.sales).div(new Decimal(_total)) * 100).toFixed(4);
            }
            item.ratio = ratio;

            return item;
          });
        }
      }).catch(err => {
        this.loading = false;
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // 保留两位小数
          sums[index] = sums[index].toFixed(2);
        } else {
          sums[index] = '';
        }
      });
      return sums;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 800px;
  margin: 0 auto;
}
.doc-page {
  width: 100%;
  border: 1px solid #eee;
  tr,
  td {
    border: 1px solid #eee;
  }
  td {
    padding: 12px 8px;
  }
  thead th {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    background-color: rgba(228, 240, 254, 1);
  }
  tr td.doc-label {
    width: 26%;
    background-color: rgb(246, 246, 246);
    font-weight: 600;
    text-align: center;
    font-size: 14px;
  }
}

.budget-table {
  ::v-deep .el-table__body .el-table__cell {
    padding: 8px 2px;
  }
  ::v-deep .el-table__header .el-table__cell {
    padding: 10px 2px;
  }
} 
</style>