<template>
  <div class="appointList">
    <div class="el-card__header">
      <span>vip购买记录</span>
      <div style="display: flex; flex-direction: row; align-items: center">
        <el-button type="primary" class="el-button--small" @click="addAppoint"
          >新增</el-button
        >
      </div>
    </div>
    <div class="content">
      <div style="display: flex; flex-direction: row; align-items: center">
        <div class="block">
          <div class="searchInput" style="width: 200px">
            <el-input
              style="display: inline-block; width: 170px; height: 30px"
              placeholder="用户昵称"
              v-model="msg.UserName"
              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>
          <div class="searchInput" style="width: 200px">
            <el-input
              style="display: inline-block; width: 170px; height: 30px"
              placeholder="订单号"
              v-model.number="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>
          <el-date-picker
            size="small"
            v-model="dateList"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getList"
          ></el-button>
        </div>
      </div>
    </div>
    <div style="padding: 20px; background: #fff">
      <el-table
        :data="dataList"
        header-cell-class-name="headClass"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="序号" width="55" align="center">
        </el-table-column>
        <el-table-column
          prop="Id"
          label="充值ID"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="OrderNo"
          label="订单号"
          width="240"
          align="center"
        ></el-table-column>
        <el-table-column prop="UserName" label="用户昵称" align="center">
        </el-table-column>
        <el-table-column prop="Money" label="购买金额" align="center">
        </el-table-column>
        <el-table-column prop="GradeName" label="购买vip名称" align="center">
        </el-table-column>
        <el-table-column
          prop="PayTime"
          label="支付时间"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130" align="center">
          <template slot-scope="scope">
            <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="pageCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "appointList",
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 10,
        UserId: 0,
        OrderNo: "",
        UserName: "",
        StartTime: "",
        EndTime: "",
      },
      pageCount: 0,
      dateList: [],
      dataList: [],
    };
  },
  methods: {
    getList() {
      if (this.dateList.length > 0) {
        this.msg.StartTime = this.dateList[0];
        this.msg.EndTime = this.dateList[1];
      }
      this.apipost("/api/User/GetMemberBuyUserPageList", this.msg, (res) => {
        if (res.data.resultCode == 1) {
          this.dataList = res.data.data.pageData;
          this.pageCount = res.data.data.pageCount;
        } else {
          this.Error(res.data.message);
        }
      });
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    //新增
    addAppoint() {
      //   this.$router.push("/editAppoint");
    },
    //删除记录
    delete_b(item) {
      let that = this;
      that.Confirm("是否删除?", function () {
        that.apipost(
          "/api/Miai/DelMiaiDatingInfo",
          {
            DatingId: item.Id,
          },
          (res) => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message);
              that.getList();
            } else {
              that.Error(res.data.message);
            }
          }
        );
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

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

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

.appointUserInfo {
  display: flex;
}
.el-table .cell{
    white-space: nowrap;
}
</style>
