<!--
  @description: 查看评审费报销-发放明细
  @Modifier: sunxinman
  @routerPath:
  @date: 2020/04/14-18:03
-->
<template>
  <div>
    <p class="mb10" style="text-align: right;">
      小计：<span style="color:red;margin-right:6px">{{ moneyFormat(realMoney) }}</span>元
    </p>
    <el-table
      :data="tableData"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        fixed="left"
        align="center"
      />
      <!-- 姓名 -->
      <el-table-column
        prop="expertName"
        min-width="140px"
        fixed="left"
        align="center"
        label="姓名"
      />
      <!-- 身份证号 -->
      <el-table-column
        prop="idCard"
        min-width="200"
        align="center"
        fixed="left"
        label="身份证号"
      />
      <!-- 评标人员类型 -->
      <el-table-column
        prop="evalPersonType"
        align="center"
        fixed="left"
        width="100"
        label="评标人员类型"
      >
        <template slot-scope="scope">
          <span v-for="(item,index) in evalPersonTypeList" v-if="scope.row.evalPersonType===item.typecode" :key="index">
            {{ item.typename }}
          </span>
        </template>
      </el-table-column>
      <!-- 实发金额（元） -->
      <el-table-column
        width="110"
        prop="realMoney"
        header-align="center"
        align="right"
        label="实发金额（元）"
      />
      <!-- 单日评审费（元） -->
      <el-table-column
        prop="dayEvalMoney"
        align="right"
        header-align="center"
        label="单日评审费（元）"
        width="120"
      />
      <!-- 评审天数 -->
      <el-table-column
        prop="evalDayNumber"
        header-align="center"
        min-width="110"
        label="评审天数"
        align="right"
      />
      <!-- 加班费 -->
      <el-table-column
        prop="overtMoney"
        header-align="center"
        min-width="110"
        label="加班费（元）"
        align="right"
      />
      <el-table-column
        prop="systemTax"
        header-align="center"
        min-width="130"
        label="系统计算个税（元）"
        align="right"
      />
      <el-table-column
        prop="accounTax"
        header-align="center"
        min-width="130"
        label="应扣增值税（元）"
        align="right"
      />
      <el-table-column
        prop="additionTax"
        header-align="center"
        min-width="130"
        label="城建税及附加（元）"
        align="right"
      />
      <el-table-column
        prop="salaryMoney"
        header-align="center"
        min-width="110"
        label="应发金额（元）"
        align="right"
      />
      <el-table-column
        header-align="center"
        label="操作"
        align="center"
        fixed="right"
        width="130"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="viewRow(scope.row)"
          >
            [查看]
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看专家信息弹框组件 -->
    <viewExpert :dialog-data="dialogDataView" />
  </div>
</template>

<script>
/* 接口*/
import { queryByIdEvalFeeDetailInfos } from '@api/fee/evalfee'
/* 常用方法 */
import { moneyFormat } from '@assets/js/utils'
/* 混合 */
import { evalFeeGroupMixin } from '@views/fee/evalfee/mixins/evalFeeGroupMixin'// 字典
/* 组件*/
import viewExpert from './viewExpert-dialog' // 查看专家信息弹框组件
/* 公用方法*/
export default {
  name: 'EvalfeeGrantDetail',
  components: {
    viewExpert // 查看专家信息弹框组件
  },
  mixins: [evalFeeGroupMixin],
  props: {
    // 接收tab父页面信息
    evalFeeData: {
      type: Object,
      default: function() {
        return {
          evalFeeId: '', // 评审费id
          meetingId: ''// 会议id
        }
      }
    }
  },
  data() {
    return {
      moneyFormat: moneyFormat, // 千分位
      // 查看专家信息弹框
      dialogDataView: {
        dialog: false,
        data: {}, // 查看时需要的参数
        datailId: ''// 明细id
      },
      realMoney: 0.00, // 实发金额小计（元）
      tableData: []// 列表
    }
  },
  created() {
    // 判断是否有评审id
    if (this.evalFeeData.evalFeeId) {
      this.initData()// 查询发放明细
    }
  },
  methods: {
    // 查询发放明细
    initData() {
      queryByIdEvalFeeDetailInfos(this.evalFeeData.evalFeeId).then(res => {
        this.tableData = res.data
        this.realMoney = 0 // 实发金额
        this.tableData.forEach(item => {
          // 实发金额小计
          this.realMoney += Number(item.realMoney)
          this.realMoney.toFixed(2)
          item.realMoney = moneyFormat(item.realMoney ? Number(item.realMoney).toFixed(2) : item.realMoney)// 实发金额
          item.dayEvalMoney = moneyFormat(item.dayEvalMoney ? Number(item.dayEvalMoney).toFixed(2) : item.dayEvalMoney)// 单日评审费（元）
          item.overtMoney = moneyFormat(item.overtMoney ? Number(item.overtMoney).toFixed(2) : item.overtMoney)// 加班费（元）
        })
      })
    },
    //  查看
    viewRow(row) {
      this.dialogDataView = {
        dialog: true,
        datailId: row.id// 明细id
      }
    }
  }
}
</script>

<style lang="less" scoped>

  .summaries{
    margin-right: 130px;
  }
</style>
