<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <!-- 时间范围筛选 -->
        <div class="w_date">
          <span class="textSpan">时间范围：</span>
          <el-date-picker
            v-model="callbackTimeEnd"
            size="small"
            type="datetimerange"
            range-separator="至"
            style="width:40%"
            @change="oncheckTimeStart"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            
          >
          </el-date-picker>
          <el-button type="primary" plain @click="getData()">查询</el-button>
      </div>

    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column
        label="序号"
        width="60"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作人"
        width="150"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.customerName }}</span> -->
          <el-button type="text" @click="hookLook(scope.row)">{{
            scope.row.customerName
          }}</el-button>
        </template>
      </el-table-column>

      <el-table-column label="类型" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1">正常</el-tag>
          <el-tag v-if="scope.row.status === 2" type="warning">暂停</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="描述" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="text" @click="productLook(scope.row)">{{
            scope.row.shorterName
          }}</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.balance }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.creditAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="当前费用" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.currentAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="创建时间"
        width="150"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        current-page.sync="body.current"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import api from "@/api/userList";
export default {
  data(){
        return{
          callbackTimeEnd:'',
          loading:false,
          tableData:[],
          total:"",
          total:100,
          body:{
            
          }
        }
    },
  methods: {
    //获取数据
    getData(){
      this.loading=true;
      api.index.Search(this.body).then(res=>{
      this.loading=false;
            console.log(res)
            this.tableData=res.data.data.records;
            this.total=res.data.data.total;
      })
    },
   
    //页码
    handleSizeChange(val) {
      this.body.size = val;
      this.getTenantList();
    },
    //换页
    handleCurrentChange(val) {
      this.body.current = val;
      this.getTenantList();
    },
    
        oncheckTimeStart(){},
        
    
  }
};
</script>

<style scoped>
.el-card {
  border: 0px solid #fff;
}

.edit_dev >>> .el-transfer-panel {
  width: 250px;
}
</style>