<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <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>
        <el-select
          v-model="pagerDto._Eq_ChannelId"
          placeholder="派送渠道"
          clearable
          filterable
        >
          <el-option
            v-for="item in delvierChannels"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select
          v-model="pagerDto._Eq_CreateChannelId"
          placeholder="下单渠道"
          clearable
          filterable
        >
          <el-option
            v-for="item in publicChannels"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="pagerDto._Co_Target" placeholder="客户单号" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="pagerDto._Co_RespnoseMessgae" placeholder="返回结果" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="pagerDto._Eq_Success" placeholder="是否成功" clearable filterable>
          <el-option
            v-for="item in result"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="block">
          <el-date-picker
            v-model="CreateDate"
            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" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="" icon="el-icon-download" @click="out">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="sData"
      border
      height="660"
    >
      <el-table-column label="客户" prop="CustomerName" width="200" />
      <el-table-column label="客单号" prop="Target" width="160" />
      <el-table-column label="返回结果" prop="RespnoseMessgae" />
      <el-table-column label="下单信息" width="160">
        <template slot-scope="props">
          <el-button size="mini" @click="showCode(props.row.RequestMessgae)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="执行毫秒数" prop="ExecutionTime" width="100" />
      <el-table-column label="下单时间" prop="CreateTime" width="160" />
    </el-table>
    <el-pagination
      :hide-on-single-page="true"
      :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"
    />
    <el-dialog
      title="下单信息"
      :visible.sync="dialogVisible"
      fullscreen
    >
      <json-view :data="json" />
    </el-dialog>
  </div>
</template>
<script>
import { _getCustomers, _getChannel, _getDeliverChannel } from '@/api/baseInfo'
import { _getLogs, _outLogs } from '@/api/createOrderLog'
import format from 'date-fns/format'
import jsonView from 'vue-json-views'
export default {
  name: 'CreateOrder',
  components: {
    'json-view': jsonView
  },
  data() {
    return {
      json: '',
      dialogVisible: false,
      loading: false,
      CreateDate: [],
      result: [{ name: 'true', value: 'True' }, { name: 'false', value: 'False' }],
      sData: [],
      Customers: [],
      delvierChannels: [],
      publicChannels: [],
      pagerDto:
            {
              PageIndex: 1,
              PageSize: 100,
              total: 0,
              QuerySort: [{ Field: 'CreateTime', IsDesc: true }],
              _Eq_CustomerId: '',
              _Eq_Success: '',
              _Co_Target: '',
              _Eq_OperationName: '',
              _GrE_CreateTime: '',
              _LeE_CreateTime: ''
            }
    }
  },
  created() {
    _getCustomers().then(response => {
      this.Customers = response
    })
    _getChannel().then(res => {
      this.publicChannels = res
    })
    _getDeliverChannel().then(res => {
      this.delvierChannels = res
    })
    var nowDate = format(new Date(), 'yyyy-MM-dd')
    this.CreateDate = [nowDate, nowDate]
    this.pagerSerach()
  },
  methods: {
    search() {
      this.pagerSerach(0)
    },
    pagerSerach(pageIndex) {
      if (pageIndex && pageIndex > 0) { this.pagerDto.PageIndex = pageIndex } else { this.pagerDto.PageIndex = 1 }

      this.loading = true
      if (this.setSerach()) {
        _getLogs(this.pagerDto).then(response => {
          this.pagerDto.total = response.TotalCount
          this.sData = response.Result
          this.loading = false
        }).catch(error => {
          console.log(error)
          this.loading = false
        })
      }
    },
    out() {
      if (this.setSerach()) {
        _outLogs(this.pagerDto)
      }
    },
    showCode(message) {
      this.dialogVisible = true
      this.json = JSON.parse(message)
    },
    setSerach() {
      if (!this.CreateDate || this.CreateDate.length < 2) {
        // this.$alert('必须填入日期');
        this.pagerDto._GrE_CreateTime = ''
        this.pagerDto._LeE_CreateTime = ''
        return true
      } else {
        this.pagerDto._GrE_CreateTime = this.CreateDate[0]
        this.pagerDto._LeE_CreateTime = this.CreateDate[1]
      }

      return true
    }
  }
}
</script>
