<template>
  <div class="container">
    <!-- <vab-query-form>
      <vab-query-form-right-panel :span="24">
        <el-form :inline="true" class="docTime" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-select v-model.trim="queryForm.status" placeholder="状态" clearable>
              <el-option label="已领取" value="1"></el-option>
              <el-option label="已核销" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model.trim="queryForm.name" placeholder="优惠券名称" clearable>
              <el-option label="优惠券一" value="1"></el-option>
              <el-option label="优惠券二" value="2"></el-option>
              <el-option label="优惠券三" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form> -->
    <div class="query-form">
      <div class="query-form-left-panel"></div>
      <div class="query-form-right-panel">
        <el-form :inline="true" class="docTime" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input v-model="queryForm.name" placeholder="分享人" clearable size="small" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table style="width: 100%;margin-top:5px" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)' ,color:'#eeeeee'}" ref="list" class="custom-table" highlight-current-row border v-loading="listLoading" :data="list" max-height="600px" :element-loading-text="elementLoadingText" @row-dblclick="handleGot">
      <template slot="empty"></template>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="share" label="分享人"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="sharePhone" label="分享人手机号码"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="got" label="领取人"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="getPhone" label="领取人手机号码"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="getDate" label="领取时间"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="docDate" label="核销时间"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="isUse" label="状态">
        <template #default="{ row, $index }">
          <el-tag type="primary" v-if="row.isUse === 0">未核销</el-tag>
          <el-tag type="danger" v-if="row.isUse === 1">已核销</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background :current-page="queryForm.pageNum" :page-size="queryForm.pageSize" :layout="layout" :total="list.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
import { getList } from "@/api/discount-coupon/record.js";
export default {
  data() {
    return {
      // 表格数据
      list: [
        // {
        //   share: "13169783956",
        //   got: "16168459528",
        //   status: "1",
        //   gotDate: "2022-06-22 13:54:14",
        // },
        // {
        //   share: "13169783956",
        //   got: "19234985968",
        //   status: "1",
        //   gotDate: "2022-06-22 12:34:17",
        // },
        // {
        //   share: "13169783956",
        //   got: "18019865328",
        //   status: "1",
        //   gotDate: "2022-06-22 12:24:39",
        // },
        // {
        //   share: "13169783956",
        //   got: "18304985207",
        //   status: "1",
        //   gotDate: "2022-06-22 11:20:05",
        // },
        // {
        //   share: "13169783956",
        //   got: "18320546927",
        //   status: "1",
        //   gotDate: "2022-06-22 09:59:48",
        // },
        // {
        //   share: "13411455208",
        //   got: "13169783956",
        //   status: "1",
        //   gotDate: "2022-06-22 08:03:32",
        // },
        // {
        //   share: "13411455208",
        //   got: "18321254687",
        //   status: "1",
        //   gotDate: "2022-06-22 04:26:36",
        // },
        // {
        //   share: "13411455208",
        //   got: "18354625842",
        //   status: "1",
        //   gotDate: "2022-06-21 23:38:19",
        // },
        // {
        //   share: "13411455208",
        //   got: "17246582475",
        //   status: "1",
        //   gotDate: "2022-06-21 22:19:46",
        // },
        // {
        //   share: "19316582047",
        //   got: "13411455208",
        //   status: "1",
        //   gotDate: "2022-06-21 22:17:15",
        // },
        // {
        //   share: "19316582047",
        //   got: "18204652748",
        //   status: "1",
        //   gotDate: "2022-06-21 21:36:59",
        // },
        // {
        //   share: "19316582047",
        //   got: "18203588454",
        //   status: "2",
        //   gotDate: "2022-06-21 21:34:13",
        //   HXDate: "2022-06-21 22:42:25",
        // },
        // {
        //   share: "19316582047",
        //   got: "18546325885",
        //   status: "2",
        //   gotDate: "2022-06-21 18:31:12",
        //   HXDate: "2022-06-22 14:59:47",
        // },
      ],
      listLoading: false,
      elementLoadingText: "正在加载...",
      // 分页
      queryForm: {
        pageNu: 1,
        pageSize: 10,
      },
      total: 0,
      layout: "total, sizes, prev, pager, next, jumper",
    };
  },
  created() {
    this.fetchData()
  },
  methods: {
    // ====================== 查询 ====================== //
    // 查询
    queryData() {
      this.queryForm.pageNum = 1;
      this.fetchData();
    },
    // 查询领取消费记录
    async fetchData() {
      this.listLoading = true;
      let { code, pageInfo } = await getList(this.queryForm);
      this.listLoading = false;
      if (code == "000000") {
        this.list = Array.from(pageInfo.list);
        this.total = pageInfo.total;
        this.queryForm.pageNum = pageInfo.pageNum;
        this.queryForm.pageSize = pageInfo.pageSize;
      }
    },
    // 分页-一页多少条
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      // this.fetchData()
    },
    // 分页-第几页
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      // this.fetchData()
    },
    // 分享人下的领取人
    handleGot() {
      this.$router.push("/active/got");
    },
  },
};
</script>

<style scoped>
@import "./styles/index.css";
</style>

