<template>
  <base-list>
    <template slot="n_header">
      <div>
        <el-row>
          <el-col
            :span="8"
          ><operate-node-pad
            ref="RecScnPad"
            class="nodePad"
            :count="recScnTimeOutCount"
            node="RecScn"
            :loading="RecScnLoading"
            @search="searchCount"
          /></el-col>
          <el-col
            :span="8"
          ><operate-node-pad
            ref="ScnOutPad"
            class="nodePad"
            :count="scnOutTimeOutCount"
            node="ScnOut"
            :loading="ScnOutLoading"
            @search="searchCount"
          /></el-col>
          <el-col
            :span="8"
          ><operate-node-pad
            ref="OutDptPad"
            class="nodePad"
            :count="outDptTimeOutCount"
            node="OutDpt"
            :loading="OutDptLoading"
            @search="searchCount"
          /></el-col>
        </el-row>
        <el-row>
          <el-col
            :span="8"
          ><operate-node-pad
            ref="ArrClrPad"
            class="nodePad"
            :count="arrClrTimeOutCount"
            node="ArrClr"
            :loading="ArrClrLoading"
            @search="searchCount"
          /></el-col>
          <el-col
            :span="8"
          ><operate-node-pad
            ref="ClrOlnPad"
            class="nodePad"
            :count="clrOlnTimeOutCount"
            node="ClrOln"
            :loading="ClrOlnLoading"
            @search="searchCount"
          /></el-col>
          <el-col
            :span="8"
          ><operate-node-pad
            ref="OlnSgnPad"
            class="nodePad"
            :count="olnSgnTimeOutCount"
            node="OlnSgn"
            :loading="OlnSgnLoading"
            @search="searchCount"
          /></el-col>
        </el-row>
      </div>
    </template>
    <template slot="n_option">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="超时节点">
          <el-select v-model="pagerDto._Eq_Node">
            <el-option
              v-for="(v, k) in nodes"
              :key="k"
              :label="v.name"
              :value="v.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="单号类型">
          <el-select v-model="pagerDto._Eq_NumberType">
            <el-option
              v-for="k in numTypes"
              :key="k.value"
              :value="k.value"
              :label="k.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单号">
          <multi-input v-model="pagerDto._In_Numbers" />
        </el-form-item>
        <el-form-item label="派送渠道">
          <el-select
            v-model="pagerDto._Eq_ChannelId"
            placeholder="派送渠道"
            clearable
            filterable
          >
            <el-option
              v-for="item in channels"
              :key="'channel3' + item.Id"
              :value="item.Id"
              :label="item.Name"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="时间类型">
          <el-select v-model="pagerDto._Eq_TimeType">
            <el-option
              v-for="k in timeTypes"
              :key="k.value"
              :value="k.value"
              :label="k.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pagerSerach(1)">搜索</el-button>
          <el-button type="success" @click="output()">导出</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column label="转单号" prop="TransferNumber" />
        <el-table-column label="跟踪号" prop="TrackingNumber" />
        <el-table-column label="提单号" prop="LadingBillNumber" />
        <el-table-column label="渠道名称" prop="ChannelName" />
        <el-table-column label="订单状态" prop="OrderStatusName" />
        <el-table-column label="揽收-装箱">
          <template scope="s">
            <el-tooltip
              class="item"
              effect="light"
              :content="getDetailInfo(s.row, 0)"
              placement="top"
            >
              <el-tag :type="getStatusColor(s.row.RecScnStatus)">{{
                s.row.RecScnStatusName
              }}</el-tag>
            </el-tooltip>
            <i
              v-if="s.row.RecScnStatus == 1"
              class="el-icon-success fixIcon"
              title="标记解决"
              @click="showFixPannel(s.row, 0)"
            />
          </template>
        </el-table-column>
        <el-table-column label="装箱-出库">
          <template scope="s">
            <el-tooltip
              class="item"
              effect="light"
              :content="getDetailInfo(s.row, 1)"
              placement="top"
            >
              <el-tag :type="getStatusColor(s.row.ScnOutStatus)">{{
                s.row.ScnOutStatusName
              }}</el-tag>
            </el-tooltip>
            <i
              v-if="s.row.ScnOutStatus == 1"
              class="el-icon-success fixIcon"
              title="标记解决"
              @click="showFixPannel(s.row, 1)"
            />
          </template>
        </el-table-column>
        <el-table-column label="出库-离港">
          <template scope="s">
            <el-tooltip
              class="item"
              effect="light"
              :content="getDetailInfo(s.row, 2)"
              placement="top"
            >
              <el-tag :type="getStatusColor(s.row.OutDptStatus)">{{
                s.row.OutDptStatusName
              }}</el-tag>
            </el-tooltip>
            <i
              v-if="s.row.OutDptStatus == 1"
              class="el-icon-success fixIcon"
              title="标记解决"
              @click="showFixPannel(s.row, 2)"
            />
          </template>
        </el-table-column>
        <el-table-column label="到达-清关">
          <template scope="s">
            <el-tooltip
              class="item"
              effect="light"
              :content="getDetailInfo(s.row, 3)"
              placement="top"
            >
              <el-tag :type="getStatusColor(s.row.ArrClrStatus)">{{
                s.row.ArrClrStatusName
              }}</el-tag>
            </el-tooltip>
            <i
              v-if="s.row.ArrClrStatus == 1"
              class="el-icon-success fixIcon"
              title="标记解决"
              @click="showFixPannel(s.row, 3)"
            />
          </template>
        </el-table-column>
        <el-table-column label="清关-上网">
          <template scope="s">
            <el-tooltip
              class="item"
              effect="light"
              :content="getDetailInfo(s.row, 4)"
              placement="top"
            >
              <el-tag :type="getStatusColor(s.row.ClrOlnStatus)">{{
                s.row.ClrOlnStatusName
              }}</el-tag>
            </el-tooltip>
            <i
              v-if="s.row.ClrOlnStatus == 1"
              class="el-icon-success fixIcon"
              title="标记解决"
              @click="showFixPannel(s.row, 4)"
            />
          </template>
        </el-table-column>
        <el-table-column label="上网-签收">
          <template scope="s">
            <el-tooltip
              class="item"
              effect="light"
              :content="getDetailInfo(s.row, 5)"
              placement="top"
            >
              <el-tag :type="getStatusColor(s.row.OlnSgnStatus)">{{
                s.row.OlnSgnStatusName
              }}</el-tag>
            </el-tooltip>
            <i
              v-if="s.row.OlnSgnStatus == 1"
              class="el-icon-success fixIcon"
              title="标记解决"
              @click="showFixPannel(s.row, 5)"
            />
          </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"
      />

      <el-dialog
        title="将该订单标记为正常状态"
        :visible.sync="showFixDialog"
        width="20%"
        center
      >
        <el-form>
          <el-form-item label="备注">
            <el-input
              v-model="fixRemark"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="hideFixDialog()">取 消</el-button>
          <el-button type="primary" @click="submitFix()">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import { _queryPage, _fix, _queryTimeOutCount, _output } from '@/api/orderOperateNodeTime'
import multiInput from '@/components/Xyy/multiInput.vue'
import { _getDeliverChannel } from '@/api/baseInfo'
import OperateNodePad from '@/components/Xyy/OperateNodePad.vue'
export default {
  name: 'OrderOperateNodeTime',
  components: { 'base-list': BaseList, 'multi-input': multiInput, OperateNodePad },
  data() {
    return {
      RecScnLoading: false,
      ScnOutLoading: false,
      OutDptLoading: false,
      ArrClrLoading: false,
      ClrOlnLoading: false,
      OlnSgnLoading: false,
      recScnTimeOutCount: 0,
      scnOutTimeOutCount: 0,
      outDptTimeOutCount: 0,
      arrClrTimeOutCount: 0,
      clrOlnTimeOutCount: 0,
      olnSgnTimeOutCount: 0,
      numTypes: [
        { value: 0, name: '跟踪号' },
        { value: 1, name: '转单号' },
        { value: 2, name: '客户单号' },
        { value: 3, name: '箱号' },
        { value: 4, name: '提单号' }
      ],
      timeTypes: [
        { value: 0, name: '下单时间' },
        { value: 1, name: '揽收时间' },
        { value: 2, name: '装箱时间' },
        { value: 3, name: '出库时间' },
        { value: 4, name: '离港时间' },
        { value: 5, name: '到达时间' },
        { value: 6, name: '清关时间' },
        { value: 7, name: '上网时间' },
        { value: 8, name: '签收时间' }
      ],
      data: [],
      channels: [],
      dataLoading: false,
      showFixDialog: false,
      fixRemark: null,
      currentFixItem: null,
      timeRange: [this.getTimeByNumber(7), this.getTimeByNumber(1)],
      pagerDto: {
        _Eq_Node: 'None',
        _Eq_TimeType: 0,
        _GrE_StartTime: null,
        _LeE_EndTime: null,
        _In_Numbers: null,
        _Eq_NumberType: 0,
        PageIndex: 0,
        PageSize: 20,
        total: 0
      },
      nodes: [
        { name: '全部', value: 'None', key: null },
        { name: '揽收-装箱', value: 'RecScn', key: 0 },
        { name: '装箱-出库', value: 'ScnOut', key: 1 },
        { name: '出库-离港', value: 'OutDpt', key: 2 },
        { name: '到达-清关', value: 'ArrClr', key: 3 },
        { name: '清关-上网', value: 'ClrOln', key: 4 },
        { name: '上网-签收', value: 'OlnSgn', key: 5 }
      ],
      detailInfos: [
        {
          op1: '揽收',
          time1: 'ReceiveTime',
          op2: '装箱',
          time2: 'ScanTime',
          setting: 'RecScnSetting',
          fixed: 'RecScnFixed',
          fixedRemark: 'RecScnFixedRemark'
        },
        {
          op1: '装箱',
          time1: 'ScanTime',
          op2: '出库',
          time2: 'OutBoundTime',
          setting: 'ScnOutSetting',
          fixed: 'ScnOutFixed',
          fixedRemark: 'ScnOutFixedRemark'
        },
        {
          op1: '出库',
          time1: 'OutBoundTime',
          op2: '离港',
          time2: 'DepartTime',
          setting: 'OutDptSetting',
          fixed: 'OutDptFixed',
          fixedRemark: 'OutDptFixedRemark'
        },
        {
          op1: '到港',
          time1: 'ArrivalTime',
          op2: '清关',
          time2: 'ClearanceTime',
          setting: 'ArrClrSetting',
          fixed: 'ArrClrFixed',
          fixedRemark: 'ArrClrFixedRemark'
        },
        {
          op1: '清关',
          time1: 'ClearanceTime',
          op2: '上网',
          time2: 'OnlineTime',
          setting: 'ClrOlnSetting',
          fixed: 'ClrOlnFixed',
          fixedRemark: 'ClrOlnFixedRemark'
        },
        {
          op1: '上网',
          time1: 'OnlineTime',
          op2: '签收',
          time2: 'SignTime',
          setting: 'OlnSgnSetting',
          fixed: 'OlnSgnFixed',
          fixedRemark: 'OlnSgnFixedRemark'
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },

  mounted() {
    _getDeliverChannel().then((resp) => {
      this.channels = resp
    })
    this.pagerSerach(1)

    this.$refs['RecScnPad'].search()
    this.$refs['ScnOutPad'].search()
    this.$refs['OutDptPad'].search()
    this.$refs['ArrClrPad'].search()
    this.$refs['ClrOlnPad'].search()
    this.$refs['OlnSgnPad'].search()
  },
  methods: {
    output() {
      this.setTimeParam()
      _output(this.pagerDto)
    },
    searchCount(nodeTag, from, to) {
      const loadingName = `${nodeTag}Loading`
      this[loadingName] = true
      const idx = this.nodes.findIndex((n) => n.value == nodeTag)
      const node = this.nodes[idx].key
      const data = { node, from, to }
      _queryTimeOutCount(data)
        .then((res) => {
          const count = res.Count
          if (nodeTag == 'RecScn') {
            this.recScnTimeOutCount = count
          } else if (nodeTag == 'ScnOut') {
            this.scnOutTimeOutCount = count
          } else if (nodeTag == 'OutDpt') {
            this.outDptTimeOutCount = count
          } else if (nodeTag == 'ArrClr') {
            this.arrClrTimeOutCount = count
          } else if (nodeTag == 'ClrOln') {
            this.clrOlnTimeOutCount = count
          } else if (nodeTag == 'OlnSgn') {
            this.olnSgnTimeOutCount = count
          }
        })
        .finally(() => {
          this[loadingName] = false
        })
    },
    hideFixDialog() {
      this.fixRemark = null
      this.currentFixItem = null
      this.showFixDialog = false
    },
    submitFix() {
      const orderId = this.currentFixItem && this.currentFixItem.orderId
      const node = this.currentFixItem && this.currentFixItem.node
      const remark = this.fixRemark
      const data = { orderId, node, remark }
      _fix(data).then((res) => {
        this.$message({ type: 'success', message: '成功' })
        this.showFixDialog = false
      })
    },
    showFixPannel(item, node) {
      const orderId = item.OrderId
      this.currentFixItem = { orderId, node }
      this.showFixDialog = true
    },
    getTimeByNumber(num) {
      const tempTime = new Date()
      tempTime.setTime(tempTime.getTime() - 3600 * 1000 * 24 * num)
      return tempTime
    },
    setTimeParam() {
      this.pagerDto._GrE_StartTime = this.timeRange && this.timeRange[0]
      this.pagerDto._LeE_EndTime = this.timeRange && this.timeRange[1]
    },
    getDetailInfo(dto, type) {
      const op1 = this.detailInfos[type].op1
      const op2 = this.detailInfos[type].op2
      const time1 = this.detailInfos[type].time1
      const time2 = this.detailInfos[type].time2
      const setting = this.detailInfos[type].setting
      const fixedP = this.detailInfos[type].fixed
      const fixRmkP = this.detailInfos[type].fixedRemark
      const fixRmk = dto[fixRmkP]
      let info = `${op1}:${dto[time1]} , ${op2}:${dto[time2]} , 超时设置:${dto[setting]}`
      const fixed = dto[fixedP]
      if (fixed == true && !!fixRmk) {
        info += `，处理备注${fixRmk}`
      }
      return info
    },
    getStatusColor(status) {
      if (status == 0) return 'success'
      if (status == 1) return 'danger'
      if (status == 2) return 'primary'
      if (status == 3) return 'warn'
      else return 'info'
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      this.setTimeParam()
      _queryPage(this.pagerDto)
        .then((res) => {
          this.data = res.Result
          this.pagerDto.total = res.TotalCount
        })
        .finally((res) => {
          this.dataLoading = false
        })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    }
  }
}
</script>
<style scoped>
.fixIcon {
  cursor: pointer;
  color: green;
  font-size: 20px;
  margin: 5px;
}
.nodePad {
  height: 100px;
  margin: 10px;
}
</style>
