<template>
  <div>
    <el-form inline>
      <el-form-item label="赠送时间">
        <el-date-picker
          v-model="query.dateTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="handleSearch"
          @clear="handleSearch"
        />
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="query.key" placeholder="用户名称/手机号" clearable @clear="handleSearch">
          <template #prepend>
            用户名称/手机号
            <!-- <el-select v-model="query.userType" placeholder="名称" style="width: 80px">
              <el-option label="名称" value="name"></el-option>
            </el-select> -->
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="m-t-[10px]">
      <div class="flex items-center gap-[40px]">
        <div class="p-[30px] border-[1px] border-solid border-[#D9D9D9] rounded-[10px]">
          <p class="color-[#4F535A]">发放总数量{{ summary.totalNum || 0 }}</p>
          <p class="m-t-[12px] font-size-[24px] font-500 color-[#12161e]">
            {{ summary.totalNum || 0 }}
          </p>
        </div>
      </div>
    </div>
    <div class="m-t-[20px]"></div>
    <el-table :data="tableData.records" stripe>
      <el-table-column label="Id" prop="id"></el-table-column>
      <el-table-column label="用户">
        <template #default="scope">
          <div>
            <el-link :underline="false" type="primary" class="no-wrap">
              {{ scope.row.nickName }}
            </el-link>
          </div>
          <div>
            <el-link :underline="false" type="primary" class="no-wrap">
              {{ scope.row.phone }}
            </el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="生日日期" prop="birthday"></el-table-column>
      <el-table-column label="赠送优惠券" prop="usedCouponList">
        <template #default="scope">
          <div class="flex gap-[10px]" v-for="item in scope.row.couponList" :key="item.id">
            <span>{{ item.couponName }}</span>
            <span>{{ item.num }}张</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="赠送时间" prop="createTime"></el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.totalRow"
      :page-size="query.size"
      @current-change="getData"
      @size-change="getData"
    />
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import birthdayGiftApi from "@/api/market/birthdayGift";

const query = reactive({
  status: "",
  page: 1,
  size: 10,
  key: "",
  dateTime: "",
});

const tableData = reactive({
  records: [],
  totalRow: 0,
});
function handleSearch() {
  console.log(query);
  query.page = 1;
  getData();
}

const summary = ref({});
function getData() {
  birthdayGiftApi.getRecord(query).then((res) => {
    res.totalRow = res.totalRow * 1;
    Object.assign(tableData, res);
  });
  birthdayGiftApi.getSummary(query).then((res) => {
    console.log(res);
    summary.value = res || {};
  });
}
onMounted(getData);
</script>

<style scoped lang="scss">
:deep(.el-table th.el-table__cell) {
  background-color: #f8f8f8;
}
</style>
