<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="numberValue"
            class="input-with-select"
            size="mini"
          >
            <el-select

              slot="prepend"
              v-model="numberType"
              size="mini"
              placeholder="单号类型"
              clearable
            >
              <el-option
                v-for="item in numberTypes"
                :key="item.Value"
                :label="item.Name"
                :value="item.Value"
              />
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="pagerDto._Eq_BranchCompanyId"
            class="multi-select"
            placeholder="分公司"
            size="mini"
            clearable
            filterable
          >
            <el-option
              v-for="item in branchCompanyCustomers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="pagerDto.PublicChannelIds"
            class="multi-select"
            placeholder="主渠道"
            size="mini"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="item in publicChannels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="pagerDto.CreateOrderChannelIds"
            class="multi-select"
            size="mini"
            placeholder="下单渠道"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="item in channels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="pagerDto.ChannelIds"
            class="multi-select"
            placeholder="派送渠道"
            size="mini"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="item in delvierChannels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="pagerDto._Eq_Port"
            placeholder="目的地口岸"
            size="mini"
            clearable
            filterable
          >
            <el-option
              v-for="item in DestinationPorts"
              :key="item.Port"
              :label="item.Port"
              :value="item.Port"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="pagerDto._Eq_CustomerId"
            placeholder="客户名称"
            size="mini"
            clearable
            filterable
          >
            <el-option
              v-for="item in customers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="pagerDto.Status"
            multiple
            placeholder="状态"
            clearable
            size="mini"
            filterable
          >
            <el-option
              v-for="item in Statuss"
              :key="item.Name"
              :label="item.Name"
              :value="item.Name"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-right: 10px">
          <el-select
            v-model="dateType"
            placeholder="时间类型"
            clearable
            size="mini"
          >
            <el-option
              v-for="item in dateTypes"
              :key="item.Value"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <div class="block">
            <el-date-picker
              v-model="date"
              size="mini"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="Day"
            placeholder="天数"
            size="mini"
          >
            <el-select
              slot="prepend"
              v-model="dayType"
              size="mini"
              placeholder="天数类型"
              clearable
            >
              <el-option
                v-for="item in dayTypes"
                :key="item.Value"
                :label="item.Name"
                :value="item.Value"
              />
            </el-select>
          </el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button
            size="mini"
            icon="el-icon-search"
            type="primary"
            @click="pagerSerach()"
          >搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="receiveStatistics"
            label="统计收货"
            class="receiveStatistics"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type=""
            icon="el-icon-download"
            @click="out()"
          >导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="" icon="el-icon-download" @click="batchOut()">分组导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="small" type="" @click="batchSearch()">批量搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" size="small" type="danger" :loading="recaptureLoadding" @click="recapture()">重查所选条件轨迹</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="sData" border height="660">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in props.row.Logs"
                :key="index"
                :timestamp="activity.TriggerTime"
              >
                {{ activity.Location+','+ activity.StatusString }}
              </el-timeline-item>
            </el-timeline>
          </template>
        </el-table-column>
        <el-table-column label="运单号" prop="TrackingNumber" />
        <el-table-column label="转单号" prop="TransferNumber" />
        <el-table-column label="渠道名称" prop="ChannelName" />
        <el-table-column label="提单号" prop="LadingBillNumber" />
        <el-table-column label="分公司" prop="BranchCompanyName" />
        <el-table-column label="国家" prop="ReceiverCountryCode" />
        <el-table-column label="口岸" prop="Port" />
        <el-table-column label="下单/称重时间" prop="DeliveryTime" />
        <el-table-column label="预报时间" prop="PredictionTime" />
        <el-table-column label="预上网时间" prop="PreInternetAccessTime" />
        <el-table-column label="预上网天数" prop="PreInternetAccessDay" />
        <el-table-column label="上网时间" prop="OnlineTime" />
        <el-table-column label="上网天数" prop="OnlineDay" />
        <el-table-column label="外出派送时间" prop="Delivered" />
        <el-table-column label="签收时间" prop="SignTime" />
        <el-table-column label="签收天数" prop="SignDay" />
        <el-table-column label="最后拉取时间" prop="LastGetTime" />
        <el-table-column label="状态" prop="StatusText" />
        <el-table-column label="状态更新时间" prop="TargetTime" />
      </el-table>
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @current-change="pagerSerach"
      />

      <el-dialog title="批量搜索" :visible.sync="dialogBatchSearch">
        <el-form :model="pagerDto" label-width="80px" @submit.native.prevent>
          <el-form-item label="单号类型">
            <el-select
              v-model="pagerDto._Eq_BatchNumberType"
              placeholder="单号类型"
              clearable
            >
              <el-option
                v-for="item in numberTypes"
                :key="item.Value"
                :label="item.Name"
                :value="item.Value"
              />
            </el-select>
          </el-form-item>
          <el-input
            v-model="pagerDto._Eq_BatchNumber"
            placeholder="请输入跟踪单号查询"
            autocomplete="off"
            :rows="10"
            type="textarea"
          />
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogBatchSearch = false">取 消</el-button>
          <el-button type="primary" @click="postBatchSearch">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { _getTrackingOrders, _recapture, _getQty } from '@/api/trackingOrder'
import { _getCustomers, _getDeliverChannel, _getChannel, _getAllPublic } from '@/api/baseInfo'
import { Loading } from 'element-ui'
import { exportExcel } from '@/utils/filedown'
import { _getAllFirstPort } from '@/api/firstPort'
import { _getAllBranchCompanyCustomers } from '@/api/customer'

export default {
  name: 'TrackingList',
  data() {
    return {
      DestinationPorts: [],
      numberValue: '',
      numberType: 2,
      numberTypes: [
        { Name: '运单号', Value: 2 },
        { Name: '转单号', Value: 3 },
        { Name: '提单号', Value: 1 }
      ],
      dateTypes: [
        { Name: '发货时间', Value: 1 },
        { Name: '预上网时间', Value: 2 },
        { Name: '上网时间', Value: 3 },
        { Name: '签收时间', Value: 4 },
        { Name: '状态更新时间', Value: 5 },
        { Name: '称重时间', Value: 6 }
      ],
      dayTypes: [
        { Name: '预上网天数', Value: 1 },
        { Name: '上网天数', Value: 2 },
        { Name: '签收天数', Value: 3 },
        { Name: '状态停留天数', Value: 4 }
      ],
      Day: '',
      dateType: 1,
      dayType: '',
      dialogBatchSearch: false,
      date: [this.getTimeByNumber(28), this.getTimeByNumber(7)],
      Statuss: [
        { Name: 'delivered' },
        { Name: 'exception' },
        { Name: 'expired' },
        { Name: 'notfound' },
        { Name: 'pending' },
        { Name: 'pickup' },
        { Name: 'transit' },
        { Name: 'undelivered' },
        { Name: 'wait' }
      ],
      sData: [],
      pagerDto: {
        PageIndex: 1,
        PageSize: 100,
        total: 0,
        QuerySort: [{ Field: 'Id', IsDesc: true }],
        Status: '',
        PublicChannelIds: [],
        CreateOrderChannelIds: [],
        Channels: [],
        _Eq_BranchCompanyId: '',
        _Eq_LadingBillNumber: '',
        _Eq_TrackingNumber: '',
        _GrE_DeliveryTime: '',
        _LeE_DeliveryTime: '',
        _GrE_OnlineTime: '',
        _LeE_OnlineTime: '',
        _GrE_PreInternetAccessTime: '',
        _LeE_PreInternetAccessTime: '',
        _GrE_SignTime: '',
        _LeE_SignTime: '',
        _GrE_TargetTime: '',
        _LeE_TargetTime: '',
        _GrE_SignDay: '',
        _GrE_OnlineDay: '',
        _GrE_PreInternetAccessDay: '',
        _GrE_StopDay: '',
        _GrE_DeliveryDay: '',
        _Eq_BatchNumber: '',
        _Eq_BatchNumberType: 2,
        _In_Status: ''
      },
      trackingLog: [],
      customers: [],
      delvierChannels: [],
      publicChannels: [],
      channels: [],
      receiveStatistics: '',
      recaptureLoadding: false,
      branchCompanyCustomers: [],
    }
  },
  created() {
    _getAllFirstPort().then((resp) => {
      for (var i = 0; i < resp.length; i++) {
        if (resp[i].PortType == 1) {
          // this.OriginPorts.push({ Port: resp[i].Port })
        } else {
          this.DestinationPorts.push({ Port: resp[i].Port })
        }
      }
    })
    _getDeliverChannel().then((response) => {
      this.delvierChannels = response
    })
    _getAllPublic().then((resp) => {
      this.publicChannels = resp
    })
    _getChannel().then((res) => {
      this.channels = res
    })
    _getCustomers().then((repsonse) => {
      this.customers = repsonse
    })
    _getAllBranchCompanyCustomers().then((resp) => {
      this.branchCompanyCustomers = resp
    })
    // this.pagerSerach()
  },
  methods: {
    batchOut() {
      this.setSerach()
      exportExcel('/TrackingMore/batchOut', this.pagerDto, 'post')
    },
    setSerach() {
      this.pagerDto._GrE_DeliveryTime = ''
      this.pagerDto._LeE_DeliveryTime = ''
      this.pagerDto._GrE_OnlineTime = ''
      this.pagerDto._LeE_OnlineTime = ''
      this.pagerDto._GrE_PreInternetAccessTime = ''
      this.pagerDto._LeE_PreInternetAccessTime = ''
      this.pagerDto._GrE_SignTime = ''
      this.pagerDto._LeE_SignTime = ''
      this.pagerDto._GrE_TargetTime = ''
      this.pagerDto._LeE_TargetTime = ''
      this.pagerDto._GrE_SignDay = ''
      this.pagerDto._GrE_OnlineDay = ''
      this.pagerDto._GrE_PreInternetAccessDay = ''
      this.pagerDto._GrE_StopDay = ''
      this.pagerDto._GrE_DeliveryDay = ''
      this.pagerDto._Eq_LadingBillNumber = ''
      this.pagerDto._Eq_TransferNumber = ''
      this.pagerDto._Eq_TrackingNumber = ''
      this.pagerDto._Eq_LadingBillNumber = ''
      this.pagerDto._In_Status = ''

      if (this.date && this.date.length > 0) {
        if (this.dateType == 1) {
          this.pagerDto._GrE_DeliveryTime = this.date[0]
          this.pagerDto._LeE_DeliveryTime = this.date[1]
        } else if (this.dateType == 2) {
          this.pagerDto._GrE_PreInternetAccessTime = this.date[0]
          this.pagerDto._LeE_PreInternetAccessTime = this.date[1]
        } else if (this.dateType == 3) {
          this.pagerDto._GrE_OnlineTime = this.date[0]
          this.pagerDto._LeE_OnlineTime = this.date[1]
        } else if (this.dateType == 4) {
          this.pagerDto._GrE_SignTime = this.date[0]
          this.pagerDto._LeE_SignTime = this.date[1]
        } else if (this.dateType == 5) {
          this.pagerDto._GrE_TargetTime = this.date[0]
          this.pagerDto._LeE_TargetTime = this.date[1]
        } else if (this.dateType == 6) {
          this.pagerDto._GrE_ReceiveTime = this.date[0]
          this.pagerDto._LeE_ReceiveTime = this.date[1]
        }
      }
      if (this.Day > 0) {
        if (this.dayType == 1) {
          this.pagerDto._LeE_PreInternetAccessDay = this.Day
        } else if (this.dayType == 2) {
          this.pagerDto._LeE_OnlineDay = this.Day
        } else if (this.dayType == 3) {
          this.pagerDto._LeE_SignDay = this.Day
        } else if (this.dayType == 4) {
          this.pagerDto._LeE_StopDay = this.Day
        }
      }
      console.log('this.numberValue', this.numberValue)
      if (this.numberValue != '') {
        if (this.numberType == 1) {
          this.pagerDto._Eq_LadingBillNumber = this.numberValue
        } else if (this.numberType == 2) {
          this.pagerDto._Eq_TrackingNumber = this.numberValue
        } else if (this.numberType == 3) {
          this.pagerDto._Eq_TransferNumber = this.numberValue
        }
      }

      if (this.pagerDto.Status != '' && this.pagerDto.Status.length > 0) {
        this.pagerDto._In_Status = this.pagerDto.Status.join(',')
      } else {
        this.pagerDto._In_Status = null
      }

      if (!!this.pagerDto.PublicChannelIds && this.pagerDto.PublicChannelIds.length > 0) {
        this.pagerDto._In_PublicChannelId = this.pagerDto.PublicChannelIds.join(',')
      } else {
        this.pagerDto.PublicChannelIds = null
      }
      if (!!this.pagerDto.CreateOrderChannelIds && this.pagerDto.CreateOrderChannelIds.length > 0) {
        this.pagerDto._In_CreateOrderChannelId = this.pagerDto.CreateOrderChannelIds.join(',')
      } else {
        this.pagerDto._In_CreateOrderChannelId = null
      }
      if (!!this.pagerDto.ChannelIds && this.pagerDto.ChannelIds.length > 0) {
        this.pagerDto._In_ChannelId = this.pagerDto.ChannelIds.join(',')
      } else {
        this.pagerDto._In_ChannelId = null
      }

      delete this.pagerDto._Eq_ReceiveStatistics
    },
    batchSearch() {
      this.dialogBatchSearch = true
    },
    pagerSerach(pageIndex) {
      this.dialogBatchSearch = false
      if (pageIndex && pageIndex > 0) {
        this.pagerDto.PageIndex = pageIndex
      }
      this.setSerach()
      var loading = Loading.service()
      _getTrackingOrders(this.pagerDto)
        .then((response) => {
          this.pagerDto.total = response.TotalCount
          this.sData = response.Result
          loading.close()
          // this.pagerDto._Eq_BatchNumber = '';
        })
        .catch((response) => {
          loading.close()
          // this.pagerDto._Eq_BatchNumber = '';
        })
    },
    showTracking(row) {
      this.trackingLog = row
    },
    out() {
      this.setSerach()
      this.pagerDto._Eq_ReceiveStatistics = this.receiveStatistics
      exportExcel('/TrackingMore/out', this.pagerDto, 'post')
    },
    postBatchSearch() {
      this.pagerSerach(1)
    },
    recapture() {
      this.setSerach()
      this.recaptureLoadding = true
      _getQty(this.pagerDto).then(rseponse => {
        if (rseponse > 50000) {
          this.$alert('重新抓取数量[' + rseponse + ']大于50000！不允许该操作')
          this.recaptureLoadding = false
          return
        }
        this.$confirm('本次将重新抓取' + rseponse + '条数据，是否确认操作', '确认重新抓取').then(r => {
          _recapture(this.pagerDto).then(r => {
            this.$message('设置重新抓取成功，后台在重新获取中。')
          }).finally(r => {
            this.recaptureLoadding = false
          })
        }).catch(r => {
          this.recaptureLoadding = false
        })
      }).catch(r => {
        this.recaptureLoadding = false
      })
    },
    getTimeByNumber(num) {
      const tempTime = new Date()
      tempTime.setTime(tempTime.getTime() - 3600 * 1000 * 24 * num)
      return tempTime
    }
  }
}
</script>
<style>
.receiveStatistics {
  margin: 0px 5px;
}
.el-select .el-input{
  width: 130px;
}

.multi-select .el-input{
  width: unset !important;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-form-item__content .el-input-group{ vertical-align: initial;}

.el-form-item {
    margin-bottom: 12px;
}
</style>
