<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="客户">
          <el-select
            v-model="pagerDto._Eq_CustomerId"
            placeholder="请选择客户"
            filterable
            clearable
          >
            <el-option
              v-for="item in customers"
              :key="item.Id"
              :label="item.CustomerNumber"
              :value="item.Id"
            >
              <span style="float: left">{{ item.CompanyName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.CustomerNumber
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道">
          <el-select
            v-model="pagerDto._Eq_ExpressId"
            placeholder="渠道名称"
            clearable
            filterable
          >
            <el-option
              v-for="item in channels"
              :key="item.PublicCode"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="转单号">
          <multi-input v-model="pagerDto._In_BillNo" />
        </el-form-item>
        <el-form-item label="运单号">
          <multi-input v-model="pagerDto._In_TrackingNumber" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="pagerDto._Eq_Success" placeholder="状态" clearable>
            <el-option
              v-for="item in statuss"
              :key="item.Name"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pagerSerach(1)">搜索</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="n_option" />
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column prop="CustomerName" label="客户名称" />
        <el-table-column prop="BillNo" label="计费单号" />
        <el-table-column prop="TrackingNumber" label="跟踪号" />
        <el-table-column prop="ChannelName" label="渠道" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.Success" type="success">成功</el-tag>
            <el-tag v-else type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ErrorMessage" label="错误信息" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" :disabled="scope.row.Success" @click="retry(scope.row)">重试</el-button>
            <el-button type="primary" @click="showJson(scope.row.Json)">查看参数</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="扣费参数" :visible.sync="dialogVisible" fullscreen>
        <json-view :data="json" />
      </el-dialog>
      <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"
      />
    </template>
  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import { _getCustomers, _getChannel, _getDeliverChannel } from '@/api/baseInfo'
import { _queryPage, _retry } from '@/api/chargeLog'
import multiInput from '@/components/Xyy/multiInput.vue'
import jsonView from 'vue-json-views'
export default {
  name: 'ChargeLog',
  components: { 'base-list': BaseList, 'multi-input': multiInput, 'json-view': jsonView },
  data() {
    return {
      dialogVisible: false,
      json: null,
      customers: [],
      channels: [],
      data: [],
      dataLoading: false,
      statuss: [
        { Name: '成功', Id: 1 },
        { Name: '失败', Id: 0 }
      ],
      pagerDto: {
        _Eq_CustomerId: null,
        _In_BillNo: null,
        _Eq_TrackingNumber: null,
        _Eq_ExpressId: null,
        PageIndex: 0,
        PageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.pagerSerach(1)
  },
  created() {
    _getCustomers().then((res) => {
      this.customers = res
    })
    _getDeliverChannel().then((res) => {
      this.channels = res
    })
  },
  methods: {
    retry(item) {
      if (item.Success) {
        this.$message({ type: 'error', message: '该扣费已成功，不能重试' })
        return
      }
      const id = item.Id
      const data = { id }
      _retry(data).then((res) => {
        if (res.success == true) {
          item.Success = true
        } else {
          const msg = res.error
          this.$message({ type: 'error', message: msg })
        }
      })
    },
    showJson(message) {
      this.dialogVisible = true
      this.json = JSON.parse(message)
      console.log(this.json)
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      _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>
