<template>
  <div class="app-container">
    <div class="filter-container">
      <el-divider content-position="left">更换末端渠道</el-divider>

      <el-form label-position="left" inline>
        <div class="itemGroup">
          <el-form-item label="批次单号">
            <el-input v-model="pagerDto._Eq_BatchOrderName" />
          </el-form-item>
           <el-form-item label="是否有错误">
             <el-select v-model="pagerDto._CoStrNull_OrderErrorMessage" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="错误筛选">
            <el-input v-model="pagerDto._Co_OrderErrorMessage" />
          </el-form-item>
           <el-form-item label="打单时间">
          <el-date-picker
            v-model="pagerDto._Range_PrintSuccessTime"
            type="daterange"
            style="width:290px"
            range-separator="~"
            start-placeholder="打单时间开始"
            value-format="yyyy-MM-dd"
            end-placeholder="打单时间结束"
          />
        </el-form-item>
          <el-button @click="search">查看相关批次进度</el-button>
          <el-button @click="showBatchAdd">增加批量更换业务</el-button>
        </div>
        <div class="itemGroup">
          <el-table border :highlight-current-row="true" width="100%" :data="data">
            <el-table-column prop="BatchOrderName" label="批次单号" />
            <el-table-column prop="OldTrackingNumber" label="原单号" />
            <el-table-column prop="NewTrackingNumber" label="新单号" />
            <el-table-column prop="CreateTime" label="批次创建时间" />
            <el-table-column prop="OrderSuccessTime" label="下单成功时间" />
            <el-table-column prop="PrintSuccessTime" label="打单时间" />
            <el-table-column prop="NewWeight" label="重量" />
            <el-table-column prop="OrderErrorMessage" label="下单失败信息" />
          </el-table>
          <el-pagination
            :page-sizes="[20,50,100, 200, 300, 400]"
            :current-page="pagerDto.PageIndex"
            :page-size="pagerDto.PageSize"
            background
            layout="prev, pager, next ,total ,jumper,sizes,slot "
            :total="pagerDto.total"
            style="margin-top:10px"
            @current-change="search"
            @size-change="sizeChange"
          />
        </div>
      </el-form>
    </div>
    <el-dialog
      title="创建换单批次"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form label-position="left" label-width="200">
        <el-form-item label="批次单号" required>
          <el-input v-model="dto.BatchOrderName" />
        </el-form-item>
        <el-form-item :label="'相关单号(一行一个);当前变更数量'+textLine" required>
          <el-input v-model="dto.TrackingNumber" type="textarea" :rows="15" @change="changeText" />
        </el-form-item>
        <el-form-item label="更换渠道" required>
          <el-select v-model="dto.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 label="下单随机重量-起始">
          <el-input v-model="dto.Start" placeholder="下单随机重量-起始"></el-input>
        </el-form-item>
        <el-form-item label="下单随机重量-结束">
          <el-input v-model="dto.End" placeholder="下单随机重量-结束"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addBatchChange()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import { _getDeliverChannel } from '@/api/baseInfo'
import { _queryBatchChangePager, _addBatchChange } from '@/api/transfer/queryBatchChangePager'
export default {
  name: 'BatchChangeEndService',
  data: function() {
    return {
      textLine: 0,
      dialogVisible: false,
      dto: { BatchOrderName: '', TrackingNumber: '', ChannelId: '', TrackingNumbers: [] ,Start:null,End:null},
      data: [],
      channels: [],
      loading: false,
      pagerDto: {
        PageIndex: 1,
        PageSize: 20,
        total: 0,
        _CoStrNull_OrderErrorMessage:'',
      },
      options:[{
          value: '1',
          label: '有'
        }, {
          value: '2',
          label: '无'
        }],
    }
  },
  mounted() {
    _getDeliverChannel().then(response => {
      this.channels = response
    })
  },
  methods: {
    inputData() {},
    search(index) {
      if (index && index > 0) {
        this.pagerDto.PageIndex = index
      }
      _queryBatchChangePager(this.pagerDto).then(r => {
        this.data = r.Result
        this.pagerDto.total = r.TotalCount
      })
    },
    showBatchAdd() {
      this.dto.BatchOrderName = ''
      this.dto.TrackingNumber = ''
      this.dto.ChannelId = ''
      this.dto.TrackingNumbers = []
      this.dialogVisible = true
    },
    addBatchChange() {
      this.loading = true
      this.dto.TrackingNumbers = this.dto.TrackingNumber.split(/[\s\n]/)
      _addBatchChange(this.dto).then(r => {
        this.$alert('提交成功')
        this.dialogVisible = false
        this.search(1)
      }).finally(() => {
        this.loading = false
      })
    },
    changeText() {
      this.dto.TrackingNumber = this.dto.TrackingNumber.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\n\t]*|[\n\r\n\t]*$/g, '')
      this.textLine = this.dto.TrackingNumber.split(/[\s\n]/).length
    },

    sizeChange(r) {
      this.pagerDto.PageSize = r
      this.search(1)
    }
  }
}

</script>

<style scoped>
    .itemGroup{
        margin: 10px;
        border: 1px solid #ebebeb;
        padding: 30px;
    }
</style>
