<!--
  @description: 查看交通费报销-发放明细
  @Modifier: sunxinman
  @routerPath:
  @date: 2020/04/16-18:03
-->
<template>
  <div>
    <section>
      <el-table
        :data="tableData"
        class="mb16"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
        />
        <!-- 专家姓名 -->
        <el-table-column
          prop="expertName"
          header-align="center"
          align="center"
          min-width="100px"
          label="专家姓名"
        />
        <!-- 会议室 -->
        <el-table-column
          prop="meetingName"
          header-align="center"
          min-width="200"
          align="left"
          label="会议室"
        />
        <!-- 去程/返程 -->
        <el-table-column
          header-align="center"
          min-width="90"
          align="center"
          label="去程/返程"
        >
          <template slot-scope="scope">
            <span v-for="(item,index) in journeyTypeList" v-if="scope.row.goReturnJourney===item.typecode" :key="index">
              {{ item.typename }}
            </span>
          </template>
        </el-table-column>
        <!-- 往返时间 -->
        <el-table-column
          prop="goJourneyTime"
          min-width="140"
          align="center"
          label="往返时间"
        />
        <!-- 交通工具 -->
        <el-table-column
          prop="vehicle"
          header-align="center"
          width="120"
          align="left"
          label="交通工具"
        >
          <template slot-scope="scope">
            {{ scope.row.vehicle|vehicleTypeFlters(vehicleTypeList) }}
          </template>
        </el-table-column>
        <!-- 发站 -->
        <el-table-column
          prop="fromStation"
          header-align="center"
          min-width="200"
          label="发站"
        />
        <!-- 中转站 -->
        <el-table-column
          prop="transfers"
          header-align="center"
          min-width="200"
          label="中转站"
        />
        <!-- 到站 -->
        <el-table-column
          prop="arriveAt"
          header-align="center"
          min-width="200"
          label="到站"
        />
        <!-- 火车票金额（元） -->
        <el-table-column
          prop="trainTicket"
          header-align="center"
          min-width="140"
          align="right"
          label="火车票金额（元）"
        />
        <!-- 飞机票金额（元） -->
        <el-table-column
          prop="aircraftTicket"
          header-align="center"
          min-width="140"
          align="right"
          label="飞机票金额（元）"
        />
        <!-- 大巴票金额（元） -->
        <el-table-column
          prop="busTicket"
          header-align="center"
          min-width="140"
          align="right"
          label="大巴票金额（元）"
        />
        <!-- 其他（元） -->
        <el-table-column
          prop="other"
          header-align="center"
          min-width="100"
          align="right"
          label="其他（元）"
        />
        <!-- 交通费小计 -->
        <el-table-column
          prop="trafficFeeSubtotal"
          header-align="center"
          min-width="140"
          align="right"
          label="交通费小计"
        />
        <!-- 票据张数（张） -->
        <el-table-column
          prop="billNumber"
          header-align="center"
          min-width="140"
          align="right"
          label="票据张数（张）"
        />
        <el-table-column
          align="center"
          min-width="60"
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="viewRow(scope.row)"
            >
              [查看]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination :pagination-data="paginationData" @change="loadData" />
    </section>
    <!-- 查看行程弹框组件 -->
    <journeyDetail :dialog-data="dialogDataView" />
  </div>
</template>

<script>
/* 接口*/
import { queryTrafficFeeDetailPageList } from '@api/fee/trafficfee'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'
import { trafficfeeGroupMixin } from '../mixins/trafficfeeGroupMixin'
/* 组件*/
import pagination from '@comp/common/pagination/pagination' // 分页
import journeyDetail from './journeyDetail-dialog' // 查看行程弹框组件
/* 公用方法*/
export default {
  name: 'TrafficfeeGrantDetail',
  components: {
    pagination, // 分页
    journeyDetail // 查看行程弹框组件
  },
  filters: {
    // 供应商分类
    vehicleTypeFlters: (val, groupList) => {
      let data = val
      groupList.forEach(item => {
        data = data.replace(item.typecode, item.typename)
      })
      return data
    }
  },
  mixins: [ListMixin, trafficfeeGroupMixin],
  props: {
    // 接收tab父页面信息
    trafficFeeData: {
      type: Object,
      default: function() {
        return {
          trafficFeeId: '', // 交通费id
          meetingId: ''// 会议id
        }
      }
    }
  },
  data() {
    return {
      tableData: [], // 列表
      dialogDataView: { // 查看行程弹框
        dialog: false,
        datailId: ''// 明细id
      }
    }
  },
  created() {
    this.loadData()// 查询发放明细
  },
  methods: {
    // 查询发放明细
    loadData() {
      const params = {
        trafficFeeId: this.trafficFeeData.trafficFeeId,
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      queryTrafficFeeDetailPageList(params).then(response => {
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
        this.tableData.forEach(item => {
          item.goJourneyTime = this.$Moment(item.goJourneyTime).format(this.momentDateTime)// 往返时间
          item.busTicket = item.busTicket ? Number(item.busTicket).toFixed(2) : 0.00 //  大巴票（元）
          item.aircraftTicket = item.aircraftTicket ? Number(item.aircraftTicket).toFixed(2) : 0.00 //  飞机票（元）
          item.other = item.other ? Number(item.other).toFixed(2) : 0.00 //  其他（元）
          item.trainTicket = item.trainTicket ? Number(item.trainTicket).toFixed(2) : 0.00 //  火车票（元）
        })
      })
    },
    // 查看
    viewRow(row) {
      this.dialogDataView = {
        dialog: true,
        datailId: row.id// 明细id
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .summaries{
    margin-right: 130px;
  }
</style>
