<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="pagerDto._Eq_ChannelId" placeholder="渠道名称" clearable filterable>
          <el-option
            v-for="item in channels"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
          />
        </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>
        <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="ladding" @click="pagerSerach">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="sData"
      border
      height="660"
    >
      <el-table-column label="客户名称" prop="CompanyName" />
      <el-table-column label="渠道名称" prop="PublicName" />
      <el-table-column label="跟踪单号" prop="TrackingNumber" />
      <el-table-column label="交接时间" prop="CreateTime">
        <template slot-scope="row">
          {{ row.row.CreateTime.replace('T',' ') }}
        </template>
      </el-table-column>
      <el-table-column label="交接人" prop="CreateUserName" />
    </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="pagerSerach"
    />
  </div>
</template>
<script>
import { _getHandoverLogs } from '@/api/customerHandover'
import { _getCustomers, _getDeliverChannel } from '@/api/baseInfo'
export default {
  data() {
    return {
      ladding: false,
      sData: [],
      channels: [],
      row: {},
      customers: [],
      date: '',
      pagerDto:
            {
              PageIndex: 1,
              PageSize: 100,
              total: 0,
              _In_TrackingNumber: '',
              QuerySort: [{ Field: 'Id', IsDesc: true }],
              _Eq_ChannelId: '',
              _Eq_CustomerId: '',
              _GrE_CreateTime: '',
              _LeE_CreateTime: ''
            }
    }
  },
  created() {
    var that = this
    this.pagerSerach()
    _getDeliverChannel().then(response => {
      that.channels = response
    })
    _getCustomers().then(resposne => {
      that.customers = resposne
    })
  },
  methods: {
    pagerSerach() {
      if (this.date.length > 0) {
        this.pagerDto._GrE_CreateTime = this.date[0]
        this.pagerDto._LeE_CreateTime = this.date[1]
      }
      this.ladding = true
      _getHandoverLogs(this.pagerDto).then(response => {
        this.sData = response.Result
        this.ladding = false
        this.pagerDto.total = response.TotalCount
      }).catch(response => {
        this.ladding = false
      })
    }

  }

}
</script>
