<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="运单号">
        <el-input v-model="pagerDto._In_TrackingNumber" @focus="dialogBatchSearch = true" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="pagerDto._Eq_CustomerId" placeholder="所属客户" 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._Eq_ChannelId" placeholder="渠道" clearable filterable>
          <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._Eq_SendFialEmail" placeholder="发送状态" clearable filterable>
          <el-option v-for="item in sendFialEmails" :key="item.Id" :label="item.Name" :value="item.Id" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生日期">
        <el-date-picker v-model="dateRange" type="daterange" clearable />
      </el-form-item>

      <el-button
        icon="el-icon-search"
        size="small"
        type="primary"
        :loading="serachLadding"
        @click="pagerSerach"
      >搜索</el-button>
      <el-button
        icon="el-icon-search"
        size="small"
        type="success"
        :loading="serachLadding"
        @click="exportData"
      >导出</el-button>
    </el-form>
    <el-table :data="sData" border>
      <el-table-column label="时间" prop="Date" />
      <el-table-column label="客户名称" prop="CompanyName" />
      <el-table-column label="客单号" prop="CustomerOrderNo" />
      <el-table-column label="原单号" prop="TransferNumber" />
      <el-table-column label="运单号" prop="TrackingNumber" />
      <el-table-column label="问题件" prop="Message" />
      <el-table-column label="截止日期" prop="LastDate" />
      <el-table-column label="发送状态" prop="SendFialEmail" />
      <el-table-column label="当前状态" prop="Status" />
      <el-table-column label="备注" prop="StrStatus" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="reSend(scope.row.Id)">
            重新发送
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :hide-on-single-page="true"
      :page-sizes="[50, 100, 150, 200]"
      :current-page="pagerDto.PageIndex"
      :page-size="pagerDto.PageSize"
      background
      layout="prev, pager, next ,total ,jumper,sizes,slot "
      :total="pagerDto.total"
      @current-change="pagerSerach"
    />

  </div>

</template>
<script>
import { _getEmail, _reSend, _outNotice } from '@/api/trackingOrder'
import { _getCustomers, _getChannel } from '@/api/baseInfo'

import date from 'date-and-time'
export default {
  name: 'TrackingQuestions',
  data() {
    return {
      dateRange: null,
      sData: {},
      Id: {},
      serachLadding: false,
      Customers: [],
      channels: [],
      sendFialEmails:
        [
          {
            Id: '未发送', Name: '未发送'
          },
          {
            Id: '已发送', Name: '已发送'
          },
          {
            Id: '发送失败', Name: '发送失败'
          }
        ],
      pagerDto:
      {
        PageIndex: 1,
        PageSize: 50,
        total: 0,
        QuerySort: [{ Field: 'Date', IsDesc: true }],
        _Eq_CustomerId: '',
        _Eq_ChannelId: '',
        _Eq_SendFialEmail: '',
        _GrE_FailTime: null,
        _LeE_FailTime: null
      }
    }
  },
  watch: {
    dateRange(o) {
      if (!o) {
        this.pagerDto._GrE_FailTime = null
        this.pagerDto._LeE_FailTime = null
      } else {
        const from = date.format(o[0], 'YYYY-MM-DD')
        this.pagerDto._GrE_FailTime = from
        const to = date.format(o[1], 'YYYY-MM-DD')
        this.pagerDto._LeE_FailTime = to
      }
    }
  },
  created() {
    this.getEmail()
    var that = this
    _getCustomers().then(response => {
      that.Customers = response
    })
    _getChannel().then(response => {
      that.channels = response
    })
  },
  methods: {
    exportData() {
      const data = this.pagerDto
      _outNotice(data)
    },
    getEmail() {
      this.serachLadding = true
      _getEmail(this.pagerDto).then(response => {
        this.sData = response.Result
        this.pagerDto.total = response.TotalCount
        this.serachLadding = false
      }).catch(error => {
        this.serachLadding = false
      })
    },
    reSend(Id) {
      this.Id = Id
      var that = this
      debugger
      _reSend({ Id: that.Id }).then(response => {
        this.pagerSerach(1)
      })
    },
    pagerSerach(pageIndex) {
      if (pageIndex && pageIndex > 0) { this.pagerDto.PageIndex = pageIndex }
      this.getEmail()
    }
  }
}
</script>
