<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="提单号">
          <multiInput v-model="pagerDto._In_提单号" />
        </el-form-item>
        <el-form-item label="上传时间">
          <div class="block">
            <el-date-picker
              v-model="pagerDto._Range_上传时间"
              type="daterange"
              range-separator="至"
              start-placeholder="上传时间开始"
              value-format="yyyy-MM-dd"
              end-placeholder="上传时间结束"
            />
          </div>
        </el-form-item>

        <el-form-item label="出发时间">
          <div class="block">
            <el-date-picker
              v-model="pagerDto._Range_出发时间"
              type="daterange"
              range-separator="至"
              start-placeholder="出发时间开始"
              value-format="yyyy-MM-dd"
              end-placeholder="出发时间结束"
            />
          </div>
        </el-form-item>

        <el-form-item label="目的地">
          <el-input v-model="pagerDto._Eq_目的地" />
        </el-form-item>
        <el-button
          :loading="dataLoading"
          type="primary"
          size="mini"
          @click="pagerSerach(1)"
        >搜索</el-button>
      </el-form>
    </template>
    <template slot="n_option">
      <el-tag type="warning" class="el-icon-info">
        第一次上传/重试，一小时内会执行实际上传动作</el-tag></template>
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column label="提单号" prop="提单号" />
        <el-table-column label="产品代码" prop="产品代码" />
        <el-table-column label="目的地" prop="目的地" />
        <el-table-column label="上传时间" prop="上传时间" />
        <el-table-column label="出发时间" prop="出发时间" />
        <el-table-column label="报关时间" prop="报关时间" />
        <el-table-column label="抵达时间" prop="抵达时间" />
        <el-table-column label="清关时间" prop="清关时间" />
        <el-table-column label="提单订单数" prop="提单订单数" />
        <el-table-column label="未提交" prop="未提交" />
        <el-table-column label="预报成功" prop="预报成功" />
        <el-table-column label="预报失败" prop="预报失败">
          <template slot-scope="r">
            <span v-if="r.row.预报失败*1>0" style="color:red">
              {{ r.row.预报失败 }}
            </span>
            <span v-if="r.row.预报失败*1==0">
              {{ r.row.预报失败 }}
            </span>
            <el-tag
              v-if="r.row.预报失败*1>0"
              effect="dark"
              type="info"
              class="el-icon-more"
              size="mini"
              style="margin-left:5px"
              @click="more(r.row.提单号,r.row.产品代码) "
            />
            <el-tag
              effect="dark"
              type="danger"
              class="el-icon-refresh"
              size="mini"
              style="margin-left:5px"
              @click="refresh(r.row.提单号,r.row.产品代码) "
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40,100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </template>
    <el-dialog :visible.sync="showLog">
      <el-tag type="danger">
        条数:{{ errors.length }}
      </el-tag>
      <el-table :data="errors">
        <el-table-column label="跟踪单号" prop="TrackingNumber" />
        <el-table-column label="异常信息" prop="ErrorMessage" />
      </el-table>
    </el-dialog>

  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import multiInput from '@/components/Xyy/multiInput'
import { _queryPager, _getBagDeclareError, _reBagDeclare } from '@/api/channel/bagDeclare'
export default {
  name: 'BagDeclare',
  components: { 'base-list': BaseList, 'multiInput': multiInput },
  data() {
    return {
      showLog: false,
      data: [], dataLoading: false,
      errors: [],
      pagerDto: { PageIndex: 0, PageSize: 100, total: 0, QuerySort: [{ 'Field': '预报失败', 'IsDesc': 'true' }, { 'Field': '上传时间', 'IsDesc': 'true' }] }
    }
  },
  mounted() {
    this.pagerSerach(1)
  },
  methods: {
    more(n, s) {
      _getBagDeclareError(n, s).then(r => {
        this.errors = r
        this.showLog = true
      })
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      _queryPager(this.pagerDto).then(res => {
        this.data = res.Result
        this.pagerDto.total = res.TotalCount
      }).finally(res => { this.dataLoading = false })
    },
    refresh(n, s) {
      _reBagDeclare(n, s).then(r => {
        this.pagerSerach()
      })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    }
  }
}

</script>
