<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item label="渠道类型" label-width="100">
        <el-select v-model="param._Eq_ChannelType" clearable>
          <el-option
            v-for="(item, idx) in channelTypes"
            :key="idx"
            :value="item.value"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="作用国家" prop="CountryCodes">
        <el-select v-model="countriesCodes" multiple filterable clearable>
          <el-option
            v-for="item in countries"
            :key="item.Id"
            :label="`${item.CnName}(${item.Code})`"
            :value="item.Code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户">
        <el-select
          v-model="customerCodes"
          placeholder="客户"
          clearable
          filterable
          multiple
        >
          <el-option
            v-for="item in customers"
            :key="item.CustomerNumber"
            :label="`${item.CompanyName}(${item.CustomerNumber})`"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="延期操作">
        <el-select v-model="param._Eq_DelayOpType">
          <el-option
            v-for="(item, idx) in delayTypes"
            :key="idx"
            :value="item.value"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="延期">
        <el-select v-model="param._GrE_Delay" filterable>
          <el-option
            v-for="(item, idx) in delays"
            :key="idx"
            :value="item.value"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间范围">
        <el-tooltip
          class="item"
          effect="dark"
          content="只统计该时间之后下单的订单"
          placement="bottom"
        >
          <el-date-picker
            v-model="param._GrE_OrderTime"
            type="month"
            placeholder="选择月"
          />
        </el-tooltip>
      </el-form-item>
      <el-button
        type="primary"
        :loading="loading"
        @click="search('statistics')"
      >搜索单量</el-button>

      <el-button
        type="primary"
        :loading="loading"
        @click="search('queryDetail')"
      >搜索明细</el-button>
    </el-form>
    <div>
      <el-table v-if="searchType == 'queryDetail'" v-loading="loading" :data="detailList">
        <el-table-column prop="TrackingNumber" label="跟踪号" width="200" />
        <el-table-column prop="TransferNumber" label="转单号" />
        <el-table-column prop="ChannelName" label="渠道名称" />
        <el-table-column prop="CountryName" label="目的国家" width="100" />
        <el-table-column prop="CustomerName" label="客户名称" />
        <el-table-column prop="BoxNumber" label="箱号" />
        <el-table-column prop="OrderTime" label="下单时间" :formatter="colFormatDate" />
        <el-table-column prop="ReceiveTime" label="称重时间" :formatter="colFormatDate" />
        <el-table-column
          prop="DeliveryTime"
          label="装箱时间"
          :formatter="colFormatDate"
        />
      </el-table>
      <el-table v-else v-loading="loading" :data="statisticsList">
        <el-table-column prop="ChannelTypeName" label="渠道类型" />
        <el-table-column prop="OrderCount" label="订单数量" />
      </el-table>
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        :current-page="param.PageIndex"
        :page-size="param.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="param.total"
        @current-change="searchPage"
      />
    </div>
  </div>
</template>
<script>
import colFormatDate from '@/utils/columnFormat'
import { _getCountries, _getCustomers } from '@/api/baseInfo'
import { query, statisticsByChannelType } from '@/api/delayOrder'
export default {
  name: 'DelayOrder',
  data: function() {
    return {
      searchType: 'queryDetail',
      loading: false,
      countries: [],
      customers: [],
      channelTypes: [
        { name: '专线', value: 0 },
        { name: '快递', value: 1 },
        { name: '邮政小包', value: 2 }
      ],
      delayTypes: [
        { name: '未称重', value: 0 },
        { name: '未装箱', value: 1 }
      ],
      detailList: [],
      statisticsList: [],
      countriesCodes: null,
      customerCodes: null,
      param: {
        _Eq_ChannelType: null,
        _GrE_OrderTime: null,
        _In_ReceiverCountryCode: null,
        _In_CustomerId: null,
        _GrE_Delay: 48,
        _Eq_DelayOpType: 0,
        PageIndex: 1,
        PageSize: 100,
        total: 0
      }
    }
  },
  computed: {
    delays: function() {
      const arr = []
      for (let i = 1; i <= 10; i++) {
        const item = { name: `${i * 12}小时`, value: i * 12 }
        arr.push(item)
      }
      return arr
    }
  },
  created() {
    _getCountries().then((resp) => {
      this.countries = resp
    })
    _getCustomers().then((resp) => {
      this.customers = resp
    })
    this.param.PageIndex = 1

    const now = new Date()
    var threeMonthsAgo = new Date(now.setMonth(now.getMonth() - 3))
    this.param._GrE_OrderTime = threeMonthsAgo
  },
  methods: {
    colFormatDate,
    searchPage(e) {
      this.param.PageIndex = e
      this.search('queryDetail')
    },
    search(searchType) {
      this.searchType = searchType
      const that = this
      const param = this.param

      if (this.countriesCodes) {
        const countryCodes = this.countriesCodes.join(',')
        param._In_ReceiverCountryCode = countryCodes
      } else {
        param._In_ReceiverCountryCode = null
      }

      if (this.customerCodes) {
        const customerIds = this.customerCodes.join(',')
        param._In_CustomerId = customerIds
      } else {
        param._In_CustomerId = null
      }

      that.loading = true

      if (searchType == 'queryDetail') {
        query(param).then(
          (resp) => {
            this.detailList = resp.Result
            that.loading = false
            that.param.total = resp.TotalCount
          },
          () => {
            that.loading = false
          }
        )
      } else {
        statisticsByChannelType(param).then(
          (resp) => {
            this.statisticsList = resp
            that.loading = false
          },
          () => {
            that.loading = false
          }
        )
      }
    }
  }
}
</script>
<style scoped></style>
