<template>
  <div>
    <div class="n-app-container">
      <el-card v-if="!showFull" shadow="never" style="margin-bottom:20px;">
        <el-tabs :value="'邮政上网异常'" @tab-click="handleClick">
          <el-tab-pane name="邮政上网异常">
            <span slot="label">
              邮政上网异常 <el-badge :value="onlineQty" class="item" />
            </span>
          </el-tab-pane>
          <el-tab-pane name="头程同步异常">
            <span slot="label">
              头程同步异常 <el-badge class="item" :value="noFirstQty" />
            </span>
          </el-tab-pane>
          <el-tab-pane name="尾程同步异常">
            <span slot="label">
              尾程同步异常 <el-badge :value="noLastQty" class="item" />
            </span>
          </el-tab-pane>
          <el-tab-pane name="签收同步异常">
            <span slot="label">
              签收同步异常 <el-badge :value="noSignQty" class="item" />
            </span>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <el-card shadow="never">
        <div v-if="tabIndex == 1">
          <el-alert title="开发中..." type="error" />
        </div>

        <div v-if="tabIndex == 0">
          <el-alert title="当前匹配规则:1.创建/发货时间大于24小时内未同步到邮政上网轨迹。因17缓存问题，可能有部分临近订单状态不同（6小时同步），可在17上查询最新状态并更新缓存。"
            type="error" />
          <vxe-toolbar custom ref="xOnlineToolbar">
            <template #buttons>
              <vxe-button @click="exportOnlieDataEvent" :loading="onlineQtyLoading">导出</vxe-button>
            </template>
          </vxe-toolbar>
          <vxe-table border ref="xOnlineTable" resizable stripe :data="onlineData" :loading="onlineQtyLoading">
            <vxe-column title="客户" field="CustomerName" :min-width="120"></vxe-column>
            <vxe-column title="服务商" field="ServiceName" :min-width="120"></vxe-column>
            <vxe-column title="邮政单号" field="CNPostNumber" :min-width="200"></vxe-column>
            <vxe-column title="末端单号" field="TrackingNumber" :min-width="300"></vxe-column>
            <vxe-column title="创建/收件时间" field="DeliveryTime" :min-width="160"></vxe-column>
            <vxe-column title="系统更新时间" field="SystemSyncTime" :min-width="150"></vxe-column>
          </vxe-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            background
            layout="prev, pager, next ,total ,jumper,sizes,slot "
            :total="total"
          />
        </div>


        <div v-if="tabIndex == 2">

          <el-alert
            title="当前匹配规则:1.实际订单已上网;2.末端轨迹更新时间大于24小时;邮局轨迹与末端轨迹相差超过24小时。因17缓存问题，可能有部分临近订单状态不同（6小时同步），可在17上查询最新状态并更新缓存。"
            type="error" />

          <vxe-toolbar custom ref="xLastToolbar">
            <template #buttons>
              <vxe-button @click="exportLastDataEvent">导出</vxe-button>
            </template>
          </vxe-toolbar>
          <vxe-table border ref="xLastTable" resizable stripe :data="lastData">
            <vxe-column title="客户" field="CustomerName" width="120"></vxe-column>
            <vxe-column title="服务商" field="ServiceName" width="120"></vxe-column>
            <vxe-column title="邮政单号" field="CNPostNumber" width="150"></vxe-column>
            <vxe-column title="末端单号" field="TrackingNumber" width="300"></vxe-column>
            <vxe-column title="邮政状态" field="CNPostStatus" width="100" show-overflow='tooltip'></vxe-column>
            <vxe-column title="末端状态" field="TrackingPostStatus" width="100" show-overflow='tooltip'></vxe-column>
            <vxe-column title="邮政最新轨迹" field="CNPostLastMsg" width="150"></vxe-column>
            <vxe-column title="末端最新轨迹" field="TrackingLastMsg" width="150"></vxe-column>
            <vxe-column title="邮局更新时间" field="CNPostLastTime" width="150"></vxe-column>
            <vxe-column title="末端更新时间" field="TrackingLastTime" width="150"></vxe-column>
            <vxe-column title="系统更新时间" field="SystemSyncTime" width="150"></vxe-column>
            <vxe-column title="创建/收件时间" field="DeliveryTime" width="160"></vxe-column>
          </vxe-table>
        </div>


        <div v-if="tabIndex == 3">
          <el-alert title="当前匹配规则:1.实际订单轨迹已签收 2.实际订单轨迹已签收24小时后,邮政还未更新到签收状态;因17缓存问题，可能有部分临近订单状态不同（6小时同步），可在17上查询最新状态并更新缓存。"
            type="error" />
          <vxe-toolbar custom ref="xSignToolbar">
            <template #buttons>
              <vxe-button @click="exportSignDataEvent">导出</vxe-button>
            </template>
          </vxe-toolbar>
          <vxe-table border ref="xSignTable" resizable stripe :data="signData">
            <vxe-column title="客户" field="CustomerName" width="120"></vxe-column>
            <vxe-column title="服务商" field="ServiceName" width="120"></vxe-column>
            <vxe-column title="邮政单号" field="CNPostNumber" width="150"></vxe-column>
            <vxe-column title="末端单号" field="TrackingNumber" width="300"></vxe-column>
            <vxe-column title="邮政状态" field="CNPostStatus" width="100" show-overflow='tooltip'></vxe-column>
            <vxe-column title="末端状态" field="TrackingPostStatus" width="100" show-overflow='tooltip'></vxe-column>
            <vxe-column title="邮政最新轨迹" field="CNPostLastMsg" width="150"></vxe-column>
            <vxe-column title="末端最新轨迹" field="TrackingLastMsg" width="150"></vxe-column>
            <vxe-column title="邮局更新时间" field="CNPostLastTime" width="150"></vxe-column>
            <vxe-column title="末端更新时间" field="TrackingLastTime" width="150"></vxe-column>
            <vxe-column title="系统更新时间" field="SystemSyncTime" width="150"></vxe-column>
            <vxe-column title="创建/收件时间" field="DeliveryTime" width="160"></vxe-column>
          </vxe-table>
        </div>

        <div v-if="tabIndex == 1">
          <el-alert title="当前匹配规则:1.实际订单轨迹未上网 2.实际状态更新24后邮政还无相关状态轨迹;因17缓存问题，可能有部分临近订单状态不同（6小时同步），可在17上查询最新状态并更新缓存。"
            type="error" />
          <vxe-toolbar custom ref="xfirstToolbar">
            <template #buttons>
              <vxe-button @click="exportfirstDataEvent">导出</vxe-button>
            </template>
          </vxe-toolbar>
          <vxe-table border ref="xfirstTable" resizable stripe :data="firstData">
            <vxe-column title="客户" field="CustomerName" width="120"></vxe-column>
            <vxe-column title="服务商" field="ServiceName" width="120"></vxe-column>
            <vxe-column title="邮政单号" field="CNPostNumber" width="150"></vxe-column>
            <vxe-column title="末端单号" field="TrackingNumber" width="300"></vxe-column>
            <vxe-column title="邮政上网时间" field="OnlineTime" width="200" show-overflow='tooltip'></vxe-column>
            <vxe-column title="离开时间" field="DepartTime" width="150">
            </vxe-column>
            <vxe-column title="是否同步" field="SyncDepartureTime" width="100"></vxe-column>
            <vxe-column title="清关时间" field="ArrivalTime" width="150"></vxe-column>
            <vxe-column title="是否同步" field="SyncArrivalTime" width="100"></vxe-column>
            <vxe-column title="清关时间" field="ClearanceTime" width="150"></vxe-column>
            <vxe-column title="是否同步" field="SyncClearanceTime" width="100"></vxe-column>
            <vxe-column title="系统更新时间" field="SystemSyncTime" width="150"></vxe-column>
          </vxe-table>
        </div>

      </el-card>
    </div>
  </div>
</template>
<script>
import { _getNotSign, _getNotSysLast, _getNotOnline, _getNotSysFirst } from '@/api/tracking/monitor'
import VXETable from 'vxe-table'
export default {
  name: 'EsbMonitor',
  data: function () {
    return {
      onCreateing: 0,
      showFull: false,
      noLastQty: 0,
      noSignQty: 0,
      noFirstQty: 0,
      tabIndex: 0,
      onlineQty: 0,
      onlineQtyLoading: false,
      signData: [],
      lastData: [],
      onlineData: [],
      firstData: [],
      pagerDto: {
        _Eq_IsFilter: 1,
        _In_TranferNumber: null,
        _Eq_IsSuccess: 0,
        _Eq_IsExecute: 1,
        _Eq_ShowExpress: 1,
        _Eq_ProblemHandling: 1,
        _GrE_ProblemGenerationTime: '',
        _LeE_ProblemGenerationTime: '',
        _GrE_LastExecuteTime: '',
        _LeE_LastExecuteTime: '',
        QuerySort: [{ Field: 'Id', IsDesc: false }],
        keyword: null,
        PageIndex: 1,
        PageSize: 20,
        total: 0
      },
      // 分页
      currentPage: 1, //当前页
      total: 0, //总条数
      list: [], //后台返回的所有结果
      pageSize: 100, //当前页容量
      pageSizes: [100, 200, 300, 400, 500],
      onlineTimer: null
    }
  }, created() {
    this.$nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = this.$refs.xSignTable
      const $toolbar = this.$refs.xSignToolbar
      if ($table && $toolbar) {
        $table.connect($toolbar)
      }
    })

    this.$nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = this.$refs.xOnlineTable
      const $toolbar = this.$refs.xOnlineToolbar
      if ($table && $toolbar) {
        $table.connect($toolbar)
      }
    })


    this.$nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = this.$refs.xLastTable
      const $toolbar = this.$refs.xLastToolbar
      if ($table && $toolbar) {
        $table.connect($toolbar)
      }
    })


    this.$nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = this.$refs.xfirstTable
      const $toolbar = this.$refs.xfirstToolbar
      if ($table && $toolbar) {
        $table.connect($toolbar)
      }
    })
  },
  mounted() {
    this.getOnlineData();
  },
  beforeDestroy() {
    if(this.onlineTimer) {
      clearTimeout(this.onlineTimer)
      this.onlineTimer = null
    }
  },
  methods:
  {
    exportSignDataEvent() {
      this.$refs.xSignTable.exportData({ type: 'csv' })
    },
    exportLastDataEvent() {
      this.$refs.xLastTable.exportData({ type: 'csv' })
    },
    exportfirstDataEvent() {
      this.$refs.xfirstTable.exportData({ type: 'csv' })
    },
    exportOnlieDataEvent() {
      const that = this
      that.onlineQtyLoading = true
      that.onlineTimer = setTimeout(() => {
        that.$refs.xOnlineTable.exportData({
          type: 'csv',
          data: that.list,
          afterExportMethod: () => {
            that.onlineQtyLoading = false
            clearTimeout(that.onlineTimer)
          }
        })
      }, 0)
    },
    handleClick(tab, event) {
      this.tabIndex = tab.index
      if (this.tabIndex == 3) {
        this.getSignData()
      }
      else if (this.tabIndex == 1) {
        this.getFirstData()
      }
      else if (this.tabIndex == 2) {
        this.getLastData()
      }
      else if (this.tabIndex == 0) {
        this.getOnlineData()
      }
    },
    getSignData() {
      _getNotSign().then(r => {
        this.signData = r
        this.noSignQty = r.length
      })
    },
    getLastData() {
      _getNotSysLast().then(r => {
        this.lastData = r
        this.noLastQty = r.length
      })

    },
    getOnlineData() {
      this.onlineQtyLoading = true
      _getNotOnline().then(r => {
        // this.onlineData = r
        this.list = r
        this.onlineQty = r.length
        this.getList();
      }).finally(() => {
        this.onlineQtyLoading = false
      })

    },
    getFirstData() {
      _getNotSysFirst().then(r => {
        this.firstData = r
        this.noFirstQty = r.length
      })
    },
    // 分页
    //切换每页条数容量
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getList();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    //获取表格数据
    getList() {
      this.list = this.list;    //总数组
      this.total = this.list.length;      //总条数
      this.onlineData = this.getNeedArr(this.list, this.pageSize)[this.currentPage - 1]  //当前页的表格数据
    },
    // 前端处理分页
    getNeedArr(array, size) {       //获取所需指定长度分割的数组;参数1为用于分割的总数组,参数2为分割数组后每个小数组的长度
      const length = array.length;
      //判断不是数组，或者size没有设置，size小于1，就返回空数组
      if (!length || !size || size < 1) {
        return [];
      }
      let index = 0;
      let resIndex = 0;
      let result = new Array(Math.ceil(length / size));
      while (index < length) {
        result[resIndex++] = array.slice(index, (index += size));
      }
      return result;
    },
  }
}

</script>
