<template>
  <div>
    <el-dialog title="领取详情" :visible.sync="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="用户名" prop="name" />
          <el-table-column label="领取时间" prop="receiveTime" />
          <el-table-column label="使用时间" prop="useTime" />
          <el-table-column label="获得来源" prop="source" />
          <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="width: 30px;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="使用门店" prop="tableName" />
          <el-table-column label="操作" width="150">
            <template v-slot="scope">
              <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
                <el-button
                  slot="reference"
                  type="text"
                  icon="el-icon-delete"
                  style="color: #FF4D4F;"
                >删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="head-container">
        <el-pagination
          :total="tableData.total"
          :current-page="tableData.page + 1"
          :page-size="tableData.size"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="paginationChange"
          @size-change="sizeChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryReceive, delReceive } from '@/api/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: 0,
        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 queryReceive({
        shopId: localStorage.getItem('shopId'),
        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) {
      this.query.startTime = e[0]
      this.query.endTime = e[1]
    },

    /**
     * 删除优惠券
     * @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 - 1
      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 .1s ease-in-out;
            }
        }

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