<!--
  @description: 发起交通费报销-发放明细-查看行程弹框
  @Modifier: sunxinman/肖文龙
  @routerPath:
  @date: 2020/06/18-15:25
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    :title="title"
    width="1000px"
    custom-class="el-dialog__body-p0"
    top="calc((100vh - 461px) / 2)"
  >
    <section class="main mb10">
      <table class="tableData">
        <tr>
          <td>专家姓名</td>
          <td>{{ trafficfeeGrantData.expertName }}</td>
          <td>会议室</td>
          <td>{{ trafficfeeGrantData.meetingName }}</td>
        </tr>
        <tr>
          <td>去程/返程</td>
          <td>
            <span
              v-for="(item, index) in journeyTypeList"
              v-if="trafficfeeGrantData.goReturnJourney === item.typecode"
              :key="index"
            >{{ item.typename }}</span>
          </td>
          <td>{{ goReturnJourney }}日期</td>
          <td>{{ trafficfeeGrantData.goJourneyTime }}</td>
        </tr>
        <tr>
          <td>交通工具</td>
          <td>{{ trafficfeeGrantData.vehicle|vehicleTypeFlters(vehicleTypeList) }}</td>
          <td>发站</td>
          <td>{{ trafficfeeGrantData.fromStation }}</td>
        </tr>
        <tr>
          <td>中转</td>
          <td>{{ trafficfeeGrantData.transfers }}</td>
          <td>到站</td>
          <td>{{ trafficfeeGrantData.arriveAt }}</td>
        </tr>
        <tr>
          <td>火车票（元）</td>
          <td>{{ trafficfeeGrantData.trainTicket }}</td>
          <td>飞机票（元）</td>
          <td>{{ trafficfeeGrantData.aircraftTicket }}</td>
        </tr>
        <tr>
          <td>大巴票（元）</td>
          <td>{{ trafficfeeGrantData.busTicket }}</td>
          <td>其他（元）</td>
          <td>{{ trafficfeeGrantData.other }}</td>
        </tr>
        <tr>
          <td>交通费小计（元）</td>
          <td>{{ trafficfeeGrantData.trafficFeeSubtotal }}</td>
          <td>票据张数</td>
          <td>{{ trafficfeeGrantData.billNumber }}</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="3">
            {{ trafficfeeGrantData.remarks }}
          </td>
        </tr>
      </table>
    </section>
  </el-dialog>
</template>

<script>
/* api */
import { getByIdTrafficFeeDetailInfo } from '@api/fee/trafficfee'
/* 常用方法 */
import { restoreInitialValue, moneyFormat } from '@/assets/js/utils' // 常用方法
/* 公共参数*/
import { trafficfeeGroupMixin } from '../mixins/trafficfeeGroupMixin'
import { trafficfeeMixin } from '../mixins/trafficfeeMixin'
export default {
  name: 'JourneyDetailDialog',
  components: {
  },
  filters: {
    // 供应商分类
    vehicleTypeFlters: (val, groupList) => {
      let data = val.join(',')
      groupList.forEach(item => {
        data = data.replace(item.typecode, item.typename)
      })
      return data
    }
  },
  mixins: [trafficfeeGroupMixin, trafficfeeMixin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false,
          datailId: ''// 明细id
        }
      }
    }
  },
  data() {
    return {
      moneyFormat: moneyFormat, // 转千分位
      title: '查看行程',
      goReturnJourney: '' // 去程/返程
    }
  },

  watch: {
    // 弹框展示状态
    'dialogData.dialog'(val) {
      if (val) { // 弹框打开时
        this.initData()
      } else {
        restoreInitialValue(this.trafficfeeGrantData)// 初始化内容
      }
    },
    // 去程/返程
    'trafficfeeGrantData.goReturnJourney'(val) {
      if (val === '00') {
        this.goReturnJourney = '去程'
      } if (val === '01') {
        this.goReturnJourney = '返程'
      }
    }
  },
  methods: {
    // 查询数据
    initData() {
      const id = this.dialogData.datailId// 发放明细ID
      if (id) { // 如果有id则为编辑
        getByIdTrafficFeeDetailInfo(id).then(res => {
          // 交通工具
          if (res.data.vehicle) {
            res.data.vehicle = res.data.vehicle.split(',')
          } else {
            res.data.vehicle = []
          }
          this.trafficfeeGrantData = res.data
          this.trafficfeeGrantData.goJourneyTime = this.$Moment(this.trafficfeeGrantData.goJourneyTime).format(this.momentDateTime)// 往返时间
          this.trafficfeeGrantData.busTicket = this.trafficfeeGrantData.busTicket ? Number(this.trafficfeeGrantData.busTicket).toFixed(2) : 0.00 //  大巴票（元）
          this.trafficfeeGrantData.aircraftTicket = this.trafficfeeGrantData.aircraftTicket ? Number(this.trafficfeeGrantData.aircraftTicket).toFixed(2) : 0.00 //  飞机票（元）
          this.trafficfeeGrantData.other = this.trafficfeeGrantData.other ? Number(this.trafficfeeGrantData.other).toFixed(2) : 0.00 //  其他（元）
          this.trafficfeeGrantData.trainTicket = this.trafficfeeGrantData.trainTicket ? Number(this.trafficfeeGrantData.trainTicket).toFixed(2) : 0.00 //  火车票（元）
        })
      }
    }

  }
}
</script>

<style lang="less" scoped>
</style>
