<!--
  @description: 发起交通费报销-发放明细
  @Modifier: sunxinman/肖文龙
  @routerPath: /fee/trafficfeeApplyStep/trafficfeeGrant-add
  @date: 2020/06/15-15:20
-->
<template>
  <div>
    <el-button
      plain
      type="primary"
      class="mb10"
      @click="dialogData.dialog=true"
    >
      添加
    </el-button>
    <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
          header-align="center"
          label="操作"
          fixed="right"
          align="center"
          width="130"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="editRow(scope.row)"
            >
              [编辑]
            </el-link>
            <el-link
              type="primary"
              @click="delRow(scope.row)"
            >
              [删除]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination :pagination-data="paginationData" @change="loadData" />
    </section>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button :loading="confirmLoading" @click="prevStep">
            上一步
          </el-button>
          <el-button :loading="confirmLoading" type="primary" @click="submitData">
            提交
          </el-button>
        </div>
      </div>
    </div>
    <!-- 添加行程弹框组件 -->
    <journeyAdd
      :dialog-data="dialogData"
      :traffic-fee-data="trafficFeeData"
      @journeyInfo="journeyAddInfo"
    />
  </div>
</template>

<script>
/* 接口*/
import { queryTrafficFeeDetailPageList, deleteTrafficFeeDetail, submitTrafficFeeDetail } from '@api/fee/trafficfee'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'
import { trafficfeeGroupMixin } from '../mixins/trafficfeeGroupMixin'
/* 组件*/
import pagination from '@comp/common/pagination/pagination' // 分页
import journeyAdd from './journeyAdd-dialog' // 添加行程弹框组件
/* 公用方法*/
export default {
  name: 'TrafficfeeGrantAdd',
  components: {
    pagination, // 分页
    journeyAdd // 添加行程弹框组件
  },
  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 {
      confirmLoading: false,
      // 添加行程弹框组件
      dialogData: {
        dialog: false,
        datailId: ''// 明细id
      },
      tableData: []
    }
  },
  created() {
    this.loadData()// 查询发放明细
  },
  methods: {
    // 添加行程回调函数
    journeyAddInfo() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData()// 查询发放明细
    },
    // 查询发放明细
    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 //  火车票（元）
        })
      })
    },
    // 上一步
    prevStep() {
      this.$emit('stepPage', 'prev')// 步骤条切换方法 prev 上一步
    },
    // 编辑
    editRow(row) {
      this.dialogData = {
        dialog: true,
        datailId: row.id// 明细id
      }
    },
    // 删除
    delRow(row) {
      this.$confirm('确认删除本条记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteTrafficFeeDetail(row.id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          // 查询发放明细
          this.loadData()
        })
      })
    },
    // 数据组装
    assemblyData() {
      const data = []
      // 遍历获取 交通费小计
      this.tableData.forEach(item => {
        data.push(item.trafficFeeSubtotal)
      })
      return {
        id: this.trafficFeeData.trafficFeeId, // 交通费报销ID
        meetingId: this.trafficFeeData.meetingId, // 会议ID
        subtotalList: data// 交通费小计
      }
    },
    // 提交
    submitData() {
      if (this.tableData.length > 0) {
        const data = this.assemblyData()// 数据组装
        this.$confirm('是否确认提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        }).then(() => {
          this.confirmLoading = true
          submitTrafficFeeDetail(data).then(() => {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.confirmLoading = false
            this.$router.push('/fee/trafficfeeApply-list')
          }).catch(() => {
            this.confirmLoading = false
          })
        })
      } else {
        this.$message({
          message: '没有专家信息',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>

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