<template>
  <div class="rechargeList">
    <div class="el-card__header">
      <span>充值明细列表</span>

    </div>
    <div class="content">
      <div style="display: flex;flex-direction: row;align-items: center">
        <div class="block">
          <div class="searchInput" style="width:250px">
            <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入订单号搜索" v-model="msg.OrderNo"
              size="small" @clear="getList" @keyup.enter.native="getList" clearable>
            </el-input>
            <span @click="getList" class="el-icon-search"
              style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
          </div>
          <span>状态</span>
          <el-select class="w120" @change="getList()" style="margin-right: 10px;" v-model="msg.OrderStatus" size="small"
            placeholder="请选择">
            <el-option v-for="item in TypeList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
          <span>用户</span>

          <el-select class="w120" @change="getList()" v-model="msg.UserId" size="small" :filter-method="ChangeListName"
            filterable placeholder="请选择">
            <el-option label="不限" :value="0"></el-option>
            <el-option v-for="item in userList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>



    <div style="padding: 20px;background: #fff;margin-top: 20px">
      <el-table :data="tableData" header-cell-class-name="headClass" style="width: 100%" border>


        <el-table-column prop="OrderNo" label="订单号">
        </el-table-column>
        <el-table-column prop="Name" label="用户信息">
          <template slot-scope="scope">
            <div class="app-image" :style="{backgroundImage:'url(' + scope.row.UserPhoto + ')',backgroundSize:'cover'}">
            </div>
            <div flex="dir:left cross:center">
              {{scope.row.UserName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="PonitNum" label="充值点数">
        </el-table-column>
        <el-table-column prop="GivePoint" label="赠送点数">
        </el-table-column>
        <el-table-column prop="GivePoint" label="实收金额">
          <template slot-scope="scope">
            <span>
              ￥{{scope.row.Income.toFixed(2)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="PayWayName" label="支付方式">
          <template slot-scope="scope">
            <div>{{scope.row.PayWayName}}</div>
            <div>{{scope.row.PaymentWayName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="OrderStatus" label="状态">
          <template slot-scope="scope">
            <span>
              {{scope.row.OrderStatus==1?'待付款':'已付款'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="CreateDate" label="支付时间">

        </el-table-column>
        <!--        <el-table-column-->
        <!--          fixed="right"-->
        <!--          label="操作"-->
        <!--          width="180"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->

        <!--            <el-tooltip class="item" effect="dark" content="编辑" placement="top" >-->
        <!--              <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">-->
        <!--            </el-tooltip>-->
        <!--            <el-tooltip class="item" effect="dark" content="删除" placement="top" >-->
        <!--              <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">-->
        <!--            </el-tooltip>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
        layout="prev, pager, next" :current-page.sync="msg.pageIndex" :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "rechargeList",
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 15,
          OrderStatus: 0,
          OrderNo: '',
          OrderId: '',
        },
        changeState: false,
        dateList: [],
        TypeList: [{
            Name: '不限',
            Id: 0
          },
          {
            Name: '待付款',
            Id: 1
          },
          {
            Name: '已付款',
            Id: 2
          },
        ],
        tableData: [],
        count: 0,
        loading: false,
        EnableMsg: {
          Ids: '',
          TeacherStatus: 0,
        },
        userList: [],
        usermsg: {
          pageIndex: 1,
          pageSize: 20,
          Name: '',
          Source: 0,
          MemberGrade: 0,
          Id: 0,
          Moblie: ''
        }
      }
    },
    created() {
      this.getDateList(); //获取数据
      this.getyonghuid()

    },
    methods: {
      ChangeListName(val) {
        this.usermsg.Name = val;
        this.getyonghuid();
      },
      getyonghuid() {
        this.apipost("/api/user/GetMemberUserDropDownList", this.usermsg, res => {
          if (res.data.resultCode == 1) {
            let pageData = res.data.data.pageData;
            this.userList = pageData;
          }
        })
      },
      getDateList() {
        this.loading = true;
        let msg = JSON.parse(JSON.stringify(this.msg))
        if (msg.OrderId == '') {
          msg.OrderId = 0
        }
        msg.OrderId = Number(msg.OrderId)
        this.apipost("/api/Point/GetUserPointOrderPageList", msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.tableData = res.data.data.pageData;
            this.count = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }

        })
      },

      getList() {
        this.msg.pageIndex = 1
        this.getDateList()
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getDateList();
      },
    },
  }

</script>

<style>
  .rechargeList .el-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;

  }

  .rechargeList .el-button--small {
    padding: 9px 15px;
  }

  .rechargeList .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    /*margin-left: 10px;*/
  }

  .rechargeList .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .rechargeList .content .searchInput {
    line-height: normal;
    display: inline-table;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
  }

  .rechargeList .content {
    background: #fff;
    margin-top: 10px;
    padding: 15px;
    box-sizing: border-box;
  }

  .rechargeList .el-tag {
    margin-right: 5px;
  }

  .rechargeList .app-image {
    background-position: center center;
    width: 50px;
    height: 50px;
    border-radius: 0%;
    float: left;
    margin-right: 8px;
  }

</style>
