<template>
  <div>
    <el-dialog title="领取详情" v-model="dialogVisible" width="70%" @close="reset">
      <div class="search">
        <el-form :model="query" inline label-position="left">
          <el-form-item>
            <el-input
              v-model="query.value"
              placeholder="用户ID/用户昵称/用户手机"
              style="width: 180px"
            />
          </el-form-item>
          <el-form-item>
            <el-select v-model="query.status" placeholder="选择状态" style="width: 154px">
              <el-option
                v-for="item in stateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item />
          <el-form-item label="领取时间">
            <el-date-picker
              v-model="queryTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="queryTimeChange"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTableData">查询</el-button>
            <!-- <el-button v-loading="downloadLoading" icon="el-icon-download" @click="downloadHandle">
              <span v-if="!downloadLoading">导出</span>
              <span v-else>下载中...</span>
            </el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="head-container">
        <el-table v-loading="loading" :data="tableData.data">
          <el-table-column label="用户ID" prop="id" />
          <el-table-column label="用户名" prpo="name">
            <template v-slot="scope">
              <div>{{ scope.row.name ? scope.row.name : "-" }}</div>
            </template>
          </el-table-column>
          <el-table-column label="领取时间" prop="receiveTime" />
          <el-table-column label="使用时间" prpo="useTime">
            <template v-slot="scope">
              <div>{{ scope.row.useTime ? scope.row.useTime : "-" }}</div>
            </template>
          </el-table-column>
          <el-table-column label="获得来源" prpo="source">
            <template v-slot="scope">
              <div>
                {{
                  scope.row.source == "activate"
                    ? "充值活动"
                    : scope.row.source == "invited"
                    ? "好友分享"
                    : ""
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="status">
            <template v-slot="scope">
              <div style="display: flex; align-items: center">
                <div v-if="scope.row.overNum == scope.row.num" style="color: #faad14">未使用</div>
                <div v-if="scope.row.num != 0 && scope.row.overNum != scope.row.num">
                  {{ scope.row.overNum }}/{{ scope.row.num }}
                </div>
                <div v-if="scope.row.overNum == 0" style="color: #52c41a">已使用</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="使用门店" prpo="useTime">
            <template v-slot="scope">
              <div>{{ scope.row.tableName ? scope.row.tableName : "-" }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template v-slot="scope">
              <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
                <template #reference>
                  <el-button type="text" icon="el-icon-delete" style="color: #ff4d4f">
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="head-container">
        <el-pagination
          :total="tableData.total"
          :current-page="tableData.page"
          :page-size="tableData.size"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="paginationChange"
          @size-change="sizeChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import couponApi from "@/api/account/coupon";

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ["couponId"],
  data() {
    return {
      dialogVisible: false,
      downloadLoading: false,
      loading: false,
      stateList: [
        { label: "未使用", value: 0 },
        { label: "已使用", value: 1 },
      ],
      queryTime: [],
      query: {
        couponId: "",
        value: "",
        status: 0,
        startTime: "",
        endTime: "",
        page: 1,
        size: 10,
      },
      resetQuery: null,
      tableData: {
        data: [],
        page: 1,
        size: 10,
        loading: false,
        total: 0,
      },
    };
  },
  mounted() {
    this.resetQuery = { ...this.query };
  },
  methods: {
    /**
     * 查询
     */
    async getTableData() {
      // eslint-disable-next-line no-unused-vars, prefer-const
      // console.log(this.couponId)

      // eslint-disable-next-line no-unused-vars, prefer-const
      let res = await couponApi.queryReceive({
        shopId: localStorage.getItem("shopId") * 1,
        couponId: this.query.couponId,
        value: this.query.value,
        status: this.query.status,
        startTime: this.query.startTime,
        endTime: this.query.endTime,
        page: this.query.page,
        size: this.query.size,
      });
      this.tableData.loading = false;
      this.tableData.data = res.content;
      this.tableData.total = res.totalElements;
    },

    /**
     * 时间选择监听
     */
    queryTimeChange(e) {
      if (e) {
        this.query.startTime = e[0];
        this.query.endTime = e[1];
      } else {
        this.query.startTime = "";
        this.query.endTime = "";
      }
    },

    /**
     * 删除优惠券
     * @param id
     */
    async delTableHandle(id) {
      // eslint-disable-next-line no-undef
      const delRes = await delReceive(id);
      console.log(delRes);
      this.getTableData();
    },

    /**
     * 打开详情
     * @param obj
     */
    show(obj) {
      console.log(obj);
      this.dialogVisible = true;
      this.query.couponId = obj.id;
      this.getTableData();
    },
    // 分页大小改变
    sizeChange(e) {
      this.tableData.size = e;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e;
      this.query.page = e;
      this.getTableData();
    },
    /**
     * 关闭详情
     */
    close() {
      this.dialogVisible = false;
    },

    /**
     * 导出Excel
     */
    async downloadHandle() {
      try {
        this.downloadLoading = true;
        // eslint-disable-next-line no-undef
        const file = await summaryTableDownload({
          startTime: this.query.createdAt[0],
          endTime: this.query.createdAt[1],
        });
        // eslint-disable-next-line no-undef
        downloadFile(file, "数据", "xlsx");
        this.downloadLoading = false;
      } catch (error) {
        this.downloadLoading = false;
        console.log(error);
      }
    },
    reset() {
      this.query = { ...this.resetQuery };
    },
  },
};
</script>

<style scoped lang="scss">
.shop_list {
  display: flex;
  flex-wrap: wrap;

  .item_wrap {
    $size: 80px;

    .item {
      $radius: 4px;
      width: $size;
      height: $size;
      border-radius: $radius;
      overflow: hidden;
      position: relative;
      margin-right: 10px;
      margin-top: 10px;

      &:hover {
        cursor: pointer;
      }

      &::after {
        content: attr(data-index);
        font-size: 12px;
        height: 20px;
        display: flex;
        padding: 0 10px;
        border-radius: 0 0 $radius 0;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
      }

      &::before {
        content: "删除";
        font-size: 12px;
        width: 100%;
        height: 20px;
        display: flex;
        padding: 0 10px;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        transition: all 0.1s ease-in-out;
      }
    }

    .name {
      width: $size;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
