<!--
  @description: 发起评审费报销-发放明细-添加行程弹框
  @Modifier: sunxinman
  @routerPath:
  @date: 2020/04/16-14:25
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogData.dialog"
      :close-on-click-modal="false"
      :title="title"
      width="1000px"
      custom-class="el-dialog__body-p8 el-dialog_table"
    >
      <el-form
        ref="formData"
        :rules="rules"
        :model="trafficfeeGrantData"
        :inline-message="true"
      >
        <table class="from_table">
          <tr>
            <td>
              <el-form-item ref="expertName" label="专家姓名" prop="expertName" />
            </td>
            <td>
              <el-input v-model="trafficfeeGrantData.expertName" disabled style="width:calc(100% - 140px)" />
              <el-button type="primary" @click="chooseExpertDialog.dialog=true">
                选择
              </el-button>
              <el-button @click="chooseExpertInfo('clear')">
                清空
              </el-button>
            </td>
            <td>
              <el-form-item ref="meetingName" label="会议室" prop="meetingName" />
            </td>
            <td>
              <el-input v-model="trafficfeeGrantData.meetingName" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="goReturnJourney" label="去程/返程" prop="goReturnJourney" />
            </td>
            <td>
              <el-radio-group v-model="trafficfeeGrantData.goReturnJourney">
                <el-radio v-for="(item,index) in journeyTypeList" :key="index" :label="item.typecode">
                  {{ item.typename }}
                </el-radio>
              </el-radio-group>
            </td>
            <td>
              <el-form-item ref="goJourneyTime" :label="goReturnJourney+'日期'" prop="goJourneyTime" />
            </td>
            <td>
              <el-date-picker
                v-model="trafficfeeGrantData.goJourneyTime"
                :format="elValueFormatDate"
                :value-format="elValueSaveFormat"
                type="date"
                placeholder="选择日期"
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item ref="vehicle" label="交通工具" prop="vehicle" />
            </td>
            <td>
              <el-checkbox-group v-model="trafficfeeGrantData.vehicle">
                <el-checkbox v-for="(item,index) in vehicleTypeList" :key="index" :label="item.typecode">
                  {{ item.typename }}
                </el-checkbox>
              </el-checkbox-group>
            </td>
            <td>
              <el-form-item ref="fromStation" label="发站" prop="fromStation" />
            </td>
            <td>
              <el-input v-model="trafficfeeGrantData.fromStation" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="中转" />
            </td>
            <td>
              <el-input v-model="trafficfeeGrantData.transfers" />
            </td>
            <td>
              <el-form-item ref="arriveAt" label="到站" prop="arriveAt" />
            </td>
            <td>
              <el-input v-model="trafficfeeGrantData.arriveAt" />
            </td>
          </tr>
          <!-- vehicle 00 火车票 01 飞机票  -->
          <tr v-if="trafficfeeGrantData.vehicle.indexOf('00')!==-1||trafficfeeGrantData.vehicle.indexOf('01')!==-1">
            <!-- vehicle 00 火车票  -->
            <td>
              <el-form-item v-if="trafficfeeGrantData.vehicle.indexOf('00')!==-1" ref="trainTicket" label="火车票（元）" prop="trainTicket" />
            </td>
            <td>
              <money v-if="trafficfeeGrantData.vehicle.indexOf('00')!==-1" :money-value="trafficfeeGrantData" :thousands="true" width="auto" name="trainTicket" @input="finalPayingAmount" />
            </td>
            <!-- vehicle 01 飞机票  -->
            <td>
              <el-form-item v-if="trafficfeeGrantData.vehicle.indexOf('01')!==-1" ref="aircraftTicket" label="飞机票（元）" prop="aircraftTicket" />
            </td>
            <td>
              <money v-if="trafficfeeGrantData.vehicle.indexOf('01')!==-1" :money-value="trafficfeeGrantData" :thousands="true" width="auto" name="aircraftTicket" @input="finalPayingAmount" />
            </td>
          </tr>
          <!-- vehicle 02 大巴票 03 其他  -->
          <tr v-if="trafficfeeGrantData.vehicle.indexOf('02')!==-1||trafficfeeGrantData.vehicle.indexOf('03')!==-1">
            <!-- vehicle 02 大巴票  -->
            <td>
              <el-form-item v-if="trafficfeeGrantData.vehicle.indexOf('02')!==-1" ref="busTicket" label="大巴票（元）" prop="busTicket" />
            </td>
            <td>
              <money v-if="trafficfeeGrantData.vehicle.indexOf('02')!==-1" :money-value="trafficfeeGrantData" :thousands="true" width="auto" name="busTicket" @input="finalPayingAmount" />
            </td>
            <!-- vehicle 03 其他  -->
            <td>
              <el-form-item v-if="trafficfeeGrantData.vehicle.indexOf('03')!==-1" ref="other" label="其他（元）" prop="other" />
            </td>
            <td>
              <money v-if="trafficfeeGrantData.vehicle.indexOf('03')!==-1" :money-value="trafficfeeGrantData" :thousands="true" width="auto" name="other" @input="finalPayingAmount" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="交通费小计（元）" />
            </td>
            <td>
              {{ moneyFormat(trafficfeeGrantData.trafficFeeSubtotal ) }}
            </td>
            <td>
              <el-form-item ref="billNumber" label="票据张数（张）" prop="billNumber" />
            </td>
            <td>
              <el-input v-model="trafficfeeGrantData.billNumber" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="备注" />
            </td>
            <td colspan="3">
              <el-input
                v-model="trafficfeeGrantData.remarks"
                :rows="4"
                type="textarea"
                maxlength="4000"
                show-word-limit
                placeholder="请输入内容"
              />
            </td>
          </tr>
        </table>
      </el-form>
      <!--操作按钮-->
      <div class="but_footer">
        <div class="but_footer-h" />
        <div class="but_footer-but">
          <el-button :loading="btnLoading" type="primary" @click="ensure">
            确定
          </el-button>
          <el-button :loading="btnLoading" @click="dialogData.dialog=false">
            取消
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 选择专家组件 -->
    <chooseExpert :dialog-data="chooseExpertDialog" @chooseExpertInfo="chooseExpertInfo" />
  </div>
</template>

<script>
/* api */
import { addOrUpdateTrafficFeeDetail, getByIdTrafficFeeDetailInfo } from '@api/fee/trafficfee'
/* 常用方法 */
import { restoreInitialValue, moneyFormat, totalHeadCount } from '@/assets/js/utils' // 常用方法
import { characters1_auto, checkRate, checkMoney } from '@/assets/js/validate'// 校验输入内容
/* 公共参数*/
import { trafficfeeGroupMixin } from '../mixins/trafficfeeGroupMixin'
import { trafficfeeMixin } from '../mixins/trafficfeeMixin'
/* 组件 */
import chooseExpert from './chooseExpert-dialog' // 选择专家信息框组件
import money from '@comp/common/money/money'// 金额
export default {
  name: 'JourneyDialog',
  components: {
    money, // 金额
    chooseExpert
  },
  mixins: [trafficfeeMixin, trafficfeeGroupMixin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false,
          datailId: ''// 明细id
        }
      }
    },
    // 接收tab父页面信息
    trafficFeeData: {
      type: Object,
      default: function() {
        return {
          trafficFeeId: '', // 交通费id
          meetingId: ''// 会议id
        }
      }
    }
  },
  data() {
    return {
      btnLoading: false,
      moneyFormat: moneyFormat, // 转千分位
      title: '添加行程',
      goReturnJourney: '', // 去程/返程
      chooseExpertDialog: {
        dialog: false // 专家列表信息弹框
      },
      // 校验
      rules: {
        arriveAt: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 到站
        expertName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 专家名称
        billNumber: [{ required: true, validator: checkRate, trigger: 'blur' }], // 票张数据（张）
        busTicket: [{ required: true, validator: checkMoney, trigger: 'blur' }], //  大巴票（元）
        aircraftTicket: [{ required: true, validator: checkMoney, trigger: 'blur' }], //  飞机票（元）
        other: [{ required: true, validator: checkMoney, trigger: 'blur' }], //  其他（元）
        trainTicket: [{ required: true, validator: checkMoney, trigger: 'blur' }], //  火车票（元）
        fromStation: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 发站
        goJourneyTime: [{ required: true, message: '请选择', trigger: 'change' }], // 去程日期
        goReturnJourney: [{ required: true, message: '请选择', trigger: 'change' }], // 去程/返程 00：去程、01：反程
        meetingName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 会议室
        remarks: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 备注
        vehicle: [{ required: true, message: '请选择', trigger: 'change' }]// 交通工具 00：火车、01：飞机、02：大巴、03：其他
      }
    }
  },
  watch: {
    // 弹框展示状态
    'dialogData.dialog'(val) {
      if (val) { // 弹框打开时
        this.initData()
      } else {
        restoreInitialValue(this.trafficfeeGrantData)// 初始化内容
        this.dialogData.datailId = ''// 清空id
      }
    },
    // 去程/返程
    'trafficfeeGrantData.goReturnJourney'(val) {
      if (val === '00') {
        this.goReturnJourney = '去程'
      } if (val === '01') {
        this.goReturnJourney = '返程'
      }
    },
    // 交通方式
    'trafficfeeGrantData.vehicle'(val) {
      const vehicle = [...val]// 交通方式
      // 参数
      const data = {
        busTicket: '', //  大巴票（元）
        aircraftTicket: '', //  飞机票（元）
        other: '', //  其他（元）
        trainTicket: '' //  火车票（元）
      }
      for (let i = 0; i < vehicle.length; i++) {
        switch (vehicle[i]) {
          case '00':// 火车
            data.trainTicket = this.trafficfeeGrantData.trainTicket // 火车票（元）
            break
          case '01':// 飞机
            data.aircraftTicket = this.trafficfeeGrantData.aircraftTicket // 飞机票（元）
            break
          case '02':// 大巴
            data.busTicket = this.trafficfeeGrantData.busTicket // 大巴票（元）
            break
          case '03':// 其他
            data.other = this.trafficfeeGrantData.other // 其他（元）
            break

          default:
            break
        }
      }
      // 合并
      for (const key of Object.keys(data)) {
        this.trafficfeeGrantData[key] = data[key]
      }
    }
  },
  methods: {
    // 查询数据
    initData() {
      const id = this.dialogData.datailId// 发放明细ID
      if (id) { // 如果有id1则为编辑
        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.id = id// 主键id
          this.finalPayingAmount()// 交通费小计（元）
        })
      } else { // 新增
        this.trafficfeeGrantData.trafficFeeId = this.trafficFeeData.trafficFeeId // 专家交通费用id
        this.trafficfeeGrantData.meetingId = this.trafficFeeData.meetingId // 会议id
        this.trafficfeeGrantData.meetingName = this.trafficFeeData.batchNumber// 会议室批次号
      }
    },
    // 交通费小计（元）
    finalPayingAmount() {
      // 需要计算相加的参数
      const data = {
        busTicket: this.trafficfeeGrantData.busTicket, //  大巴票（元）
        aircraftTicket: this.trafficfeeGrantData.aircraftTicket, //  飞机票（元）
        other: this.trafficfeeGrantData.other, //  其他（元）
        trainTicket: this.trafficfeeGrantData.trainTicket //  火车票（元）
      }
      this.trafficfeeGrantData.trafficFeeSubtotal = totalHeadCount(data).toFixed(2)// 计算金额
    },
    // 专家
    chooseExpertInfo(data) {
      if (data === 'clear') { // 清空
        this.trafficfeeGrantData.expertName = ''// 专家名称
        this.trafficfeeGrantData.expertId = ''// 专家id
      } else { // 选择
        this.trafficfeeGrantData.expertName = data.name// 专家名称
        this.trafficfeeGrantData.expertId = data.id// 专家id
      }
    },
    // 数据组装
    assemblyData() {
      const data = {
        ...this.trafficfeeGrantData
      }
      // 交通工具
      if (data.vehicle.length > 0) {
        data.vehicle = data.vehicle.join(',')
      } else {
        data.vehicle = ''
      }
      return data
    },
    // 确定
    ensure() {
      const data = this.assemblyData()// 数据组装
      // 校验输入内容
      this.$refs.formData.validate((valid) => {
        if (valid) { // 校验通过
          this.btnLoading = true
          addOrUpdateTrafficFeeDetail(data).then(() => {
            this.dialogData.dialog = false// 关闭弹框
            this.$emit('journeyInfo')
            this.btnLoading = false
          }).catch(() => {
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>

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