<template>
  <div>
    <div class="app-container">
      <div class="filter-container">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="状态">
            <el-select v-model="pagerDto._Eq_UnusualReason" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in unusualReasonTypes"
                :key="item.Value"
                :label="item.Name"
                :value="item.Value"
              />
            </el-select>
          </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 label="运单号">
            <el-input v-model="pagerDto._In_TrackingNumber" @focus="dialogBatchSearch=true" />
          </el-form-item>
          <el-form-item label="时间">
            <div class="block">
              <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="small" type="primary" :loading="serachLadding" @click="search">搜索</el-button>
            <el-button icon="el-icon-check" size="small" :loading="batchPossLadding" @click="batchPass">取消拦截</el-button>
            <el-button icon="el-icon-close" size="small" :loading="batchBackLadding" @click="batchBack">退件</el-button>
            <el-button icon="el-icon-download" size="small" @click="outFile">导出</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="sData" border @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"
            :selectable="handleDisable"
          />
          <el-table-column label="客户名称" prop="CustomerName" />
          <el-table-column label="客户单号" prop="CustomerOrderNo" />
          <el-table-column label="收件人" prop="ReceiverName" />
          <el-table-column label="运单号" prop="TrackingNumber" />
          <el-table-column label="内部单号" prop="SystemNo" />
          <el-table-column label="客户重量(g)" prop="SWeight" />
          <el-table-column label="核重重量(g)" prop="OPWeight" />
          <el-table-column label="拦截原因" prop="StrUnusualReason" />
          <el-table-column label="产生时间" prop="CreateTime" />
          <el-table-column label="最后操作时间" prop="UpdateTime" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.UnusualReason>=1"
                size="mini"
                @click="scope.row.UnusualReason>=1&&scope.row.UnusualReason!=3?pass(scope.row):reprocessing(scope.row)"
              >
                {{ scope.row.UnusualReason>=1&&scope.row.UnusualReason!=3?"取消拦截":"重新处理" }}
              </el-button>
              <el-button v-if="scope.row.UnusualReason>=2&&scope.row.UnusualReason!=3" size="mini" @click="sendBack(scope.row)">
                退件
              </el-button>
            </template>
          </el-table-column>
        </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="search"
        />
      </div>
      <el-dialog title="批量搜索" :visible.sync="dialogBatchSearch" :before-close="handleClose">
        <el-form :model="pagerDto" label-width="80px" @submit.native.prevent>
          <el-input v-model="vd" placeholder="请输入跟踪单号查询，一行一个" autocomplete="off" :rows="20" type="textarea" />
        </el-form>
      </el-dialog>
    </div>
    <el-dialog title="批量搜索" :visible.sync="dialogBatchSearch" :before-close="handleClose">
      <el-form :model="pagerDto" label-width="80px" @submit.native.prevent>
        <el-input v-model="vd" placeholder="请输入跟踪单号查询，一行一个" autocomplete="off" :rows="20" type="textarea" />
      </el-form>
    </el-dialog>
  </div>
</template>
<script>

import { _getData, _pass, _sendBack, _getUnusualReasonTypes, _batchPass, _batchBack, _outFile, _reprocessing } from '@/api/interceptOrder'
import { _getCustomers } from '@/api/baseInfo'

export default {
  name: 'InterceptOrder',
  data() {
    return {
      dialogBatchSearch: false,
      sData: [],
      vd: '',
      batchPossLadding: false,
      batchBackLadding: false,
      serachLadding: false,
      Customers: [],
      unusualReasonTypes: [],
      status: '',
      date: [],
      pagerDto:
            {
              PageIndex: 1,
              PageSize: 100,
              total: 0,
              _In_TrackingNumber: '',
              QuerySort: [{ Field: 'Id', IsDesc: true }],
              _GrE_UpdateTime: '',
              _LeE_UpdateTime: '',
              _Eq_UnusualReason: ''
            },
      ids: []
    }
  },
  created() {
    var end = new Date()
    var start = new Date()

    this.date = [end, start]
    this.search(1)
    this.getUnusualReasonTypes()
    _getCustomers().then(response => {
      this.Customers = response
    })
  },
  methods: {
    handleClose() {
      this.pagerDto._In_TrackingNumber = this.vd.replace(/\r\n/g, ',').replace(/\r/g, ',').replace(/\n/g, ',')
      this.dialogBatchSearch = false
    },
    handleSelectionChange(val) {
      this.ids = []
      debugger
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].Id)
      }
    },
    handleDisable(row, index) {
      return row.UnusualReason >= 1 && row.UnusualReason != 3
    },
    outFile() {
      _outFile(this.pagerDto)
    },
    getTypeName(id) {
      for (var i = 0; i < this.unusualReasonTypes.length; i++) {
        var item = this.unusualReasonTypes[i]
        if (item.Value == id) { return item.Name }
      }
    },
    getData() {
      this.serachLadding = true
      _getData(this.pagerDto).then(response => {
        this.sData = response.Result
        this.pagerDto.total = response.TotalCount
        this.serachLadding = false
        for (var i = 0; i < this.sData.length; i++) {
          var item = this.sData[i]
          item.StrUnusualReason = this.getTypeName(this.sData[i].UnusualReason)
        }
      }).catch(response => {
        this.serachLadding = false
      })
    },
    batchPass() {
      this.$confirm('取消拦截后无法恢复，是否通过?', '确定取消拦截').then(() => {
        this.batchPossLadding = true
        _batchPass(this.ids).then(response => {
          this.search()
          this.batchPossLadding = false
        }).catch(response => {
          this.batchPossLadding = false
        })
      })
    },
    batchBack() {
      this.$confirm('退回后无法恢复，是否通过?', '确定批量退回').then(() => {
        this.batchBackLadding = true
        _batchBack(this.ids).then(response => {
          this.search()
          this.batchBackLadding = false
        }).catch(response => {
          this.batchBackLadding = false
        })
      })
    },
    pass(row) {
      this.$confirm('是否取消拦截该订单?', '取消拦截', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _pass(row).then(response => {
          this.getData()
        })
      })
    },
    reprocessing(row) {
      this.$confirm('是否重新处理该订单?', '重新处理', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _reprocessing(row).then(response => {
          this.getData()
        })
      })
    },
    sendBack(row) {
      this.$confirm('是否退回该订单?', '退回订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _sendBack(row).then(response => {
          this.getData()
        })
      })
    },
    getUnusualReasonTypes() {
      _getUnusualReasonTypes().then(response => {
        this.unusualReasonTypes = response
      })
    },
    search(pageIndex) {
      if (pageIndex && pageIndex > 0) { this.pagerDto.PageIndex = pageIndex } else { this.pagerDto.PageIndex = 1 }
      if (this.date && this.date.length > 0) {
        this.pagerDto._GrE_UpdateTime = this.date[0]
        this.pagerDto._LeE_UpdateTime = this.date[1]
      } else {
        this.pagerDto._GrE_UpdateTime = ''
        this.pagerDto._LeE_UpdateTime = ''
      }
      this.getData()
    }

  }
}
</script>
