<template>
  <div class="app-container" style="width:50%">
    <el-form v-loading="loading">
      <el-form-item label="轨迹时间" label-width="100px">
        <el-date-picker
          v-model="trajectoryTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="轨迹内容" label-width="100px">
        <el-input v-model="StatusString" placeholder="填写轨迹内容" />
      </el-form-item>
      <el-form-item label="轨迹地点（不填写时默认为收件人国家）" label-width="100px">
        <el-input v-model="Loaction" placeholder="填写轨迹地点" />
      </el-form-item>
      <el-form-item label="运单/提单" label-width="100px">
        <el-select v-model="dataType" placeholder="请选择">
          <el-option
            v-for="item in dataTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="dataType==2" label="提单号" label-width="100px">
        <el-input v-model="LadingBillNumber" placeholder="提单号" />
      </el-form-item>
      <el-form-item v-if="dataType==1" label="运单号" label-width="100px">
        <el-input v-model="TrackingNumber" type="textarea" :rows="25" placeholder="请输入运单号,每行一个" />
      </el-form-item>
    </el-form>
    <div class="text-center">
      <el-button type="success" @click="submit">轨迹补充</el-button>
    </div>
  </div>
</template>

<script>
import { supplement } from '@/api/trackSupplement'
export default {
  name: 'TrackSupplement',
  data: function() {
    return {
      loading: false,
      LadingBillNumber: '',
      TrackingNumber: '',
      trajectoryTime: '',
      place: '',
      StatusString: '',
      Loaction: '',
      submitLoading: false,
      dataType: 1, // 1运单，2提单
      dataTypes: [{
        value: 1,
        label: '运单号'
      },
      {
        value: 2,
        label: '提单号'
      }
      ]
    }
  },
  methods: {
    submit() {
      if (this.dataType == 1) { this.LadingBillNumber = '' } else { this.TrackingNumber = '' }
      const trackingNumber = this.TrackingNumber
      const trajectoryTime = this.trajectoryTime
      const LadingBillNumber = this.LadingBillNumber
      const StatusString = this.StatusString
      const Loaction = this.Loaction
      if ((!trackingNumber) && (!LadingBillNumber)) {
        this.$message({ message: '请按选择单号填写数据并提交', type: 'error' })
        return
      }
      if (!trajectoryTime) {
        this.$message({ message: '请填写轨迹时间', type: 'error' })
        return
      }
      if (!StatusString) {
        this.$message({ message: '请填写轨迹内容', type: 'error' })
        return
      }

      const param = { trackingNumber, trajectoryTime, LadingBillNumber, StatusString, Loaction }
      this.loading = true
      if (this.submitLoading) { return false }
      this.submitLoading = true
      supplement(param)
        .then((res) => {
          this.$message({ message: '轨迹补充完成', type: 'success' })
        })
        .finally(() => {
          this.loading = false
          this.submitLoading = false
        })
    }
  }
}
</script>
