<template>
  <div class="MaxKing_Test">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-input
              v-model="Name"
              clearable
              class="filter-item"
              style="width: 200px"
              size="small"
              placeholder="请输入角色名称"
              @keyup.enter.native="handleFind"
            />
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content bg-purple">
            <el-button
              class="filter-item"
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="handleFind"
            >搜索
            </el-button>
            <el-button
              class="filter-item"
              size="small"
              type="primary"
              icon="el-icon-refresh"
              @click="handleReset"
            >重置
            </el-button>
            <el-button
              class="filter-item"
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="handleAdd"
            >添加
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column type="selection" />

      <el-table-column label="订单号" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商户订单号" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.extorderId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号码" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.usedMobile }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="开始时间"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.applyDateStart }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="时间结束"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.applyDateEnd }}</span>
        </template> </el-table-column><el-table-column
        label="客户名称"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.enterpriseIdDesc }}</span>
        </template> </el-table-column><el-table-column
        label="通道名称"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.channelIdDesc }}</span>
        </template> </el-table-column><el-table-column
        label="订单状态"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.status }}</span>
        </template> </el-table-column><el-table-column
        label="运营商"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.mobileOperator }}</span>
        </template> </el-table-column><el-table-column
        label="面额"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.flowAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="面额"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.flowAmount }}</span>
        </template> </el-table-column><el-table-column
        label="回调时间开始范围"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.checkTimeStart }}</span>
        </template> </el-table-column><el-table-column
        label="回调时间结束范围"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.checkTimeEnd }}</span>
        </template> </el-table-column><el-table-column
        label="回调状态"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.dealFlag }}</span>
        </template> </el-table-column><el-table-column
        label="归属地"
        width="160"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.mobileHome }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        fixed="right"
        min-width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Name: '',
      tableData: [
        { orderId: '1618675202869450462',
          userName: 'test',
          extorderId: 'CD2104253953427952',
          usedMobile: '18820454014',
          applyDateStart: '2021-04-26 00:00:00',
          applyDateEnd: '2021-04-26 23:59:59',
          enterpriseIdDesc: '山东茶蛋信息技术有限公司',
          channelIdDesc: 'BF移动',
          status: '充值成功',
          mobileOperator: '移动',
          flowAmount: '10',
          checkTimeStart: '2021-04-25 00:39:53',
          checkTimeEnd: '2021-04-25 23:39:53',
          dealFlag: '已回调',
          mobileHome: '广东-茂名-移动' },
        { orderId: '1618675202869450462',
          userName: 'test',
          extorderId: 'CD2104253953427952',
          usedMobile: '18820454014',
          applyDateStart: '2021-04-26 00:00:00',
          applyDateEnd: '2021-04-26 23:59:59',
          enterpriseIdDesc: '山东茶蛋信息技术有限公司',
          channelIdDesc: 'BF移动',
          status: '充值成功',
          mobileOperator: '移动',
          flowAmount: '10',
          checkTimeStart: '2021-04-25 00:39:53',
          checkTimeEnd: '2021-04-25 23:39:53',
          dealFlag: '已回调',
          mobileHome: '广东-茂名-移动' },
        { orderId: '1618675202869450462',
          userName: 'test',
          extorderId: 'CD2104253953427952',
          usedMobile: '18820454014',
          applyDateStart: '2021-04-26 00:00:00',
          applyDateEnd: '2021-04-26 23:59:59',
          enterpriseIdDesc: '山东茶蛋信息技术有限公司',
          channelIdDesc: 'BF移动',
          status: '充值成功',
          mobileOperator: '移动',
          flowAmount: '10',
          checkTimeStart: '2021-04-25 00:39:53',
          checkTimeEnd: '2021-04-25 23:39:53',
          dealFlag: '已回调',
          mobileHome: '广东-茂名-移动' },
        { orderId: '1618675202869450462',
          userName: 'test',
          extorderId: 'CD2104253953427952',
          usedMobile: '18820454014',
          applyDateStart: '2021-04-26 00:00:00',
          applyDateEnd: '2021-04-26 23:59:59',
          enterpriseIdDesc: '山东茶蛋信息技术有限公司',
          channelIdDesc: 'BF移动',
          status: '充值成功',
          mobileOperator: '移动',
          flowAmount: '10',
          checkTimeStart: '2021-04-25 00:39:53',
          checkTimeEnd: '2021-04-25 23:39:53',
          dealFlag: '已回调',
          mobileHome: '广东-茂名-移动' }
      ]
    }
  }
}
</script>

<style>
</style>
