<template>
  <div class="w-full">
    <div class=" m-6 rounded-xl">
      <div class="p-3 w-full bg-white rounded-xl">
        <el-space alignment="flex-end">
          <div class="flex flex-col justify-start items-start">
            <span class="text-sm text-gray-500">关键词</span>
            <el-input size="large" style="width: 300px" v-model="keywords" placeholder="姓名/手机号/身份证/IC卡号筛选"
                      @keyup.enter.native="getList(true)"
                      clearable/>
          </div>
          <div class="flex flex-col justify-start items-start">
            <span class="text-sm text-gray-500">开卡时间</span>
            <el-date-picker size="large" v-model="createTimeRange" type="daterange" placeholder="开卡时间筛选"></el-date-picker>
          </div>
          <el-button size="large" icon="Search" @click.native="getList(true)" type="primary">
            搜索
          </el-button>
          <el-button size="large" icon="RefreshRight" @click.native="init" type="warning"
                     margin-left="mx-4">重置
          </el-button>
        </el-space>
      </div>
      <div class="p-3 w-full rounded-xl mt-4 bg-white">
        <el-table :data="list" stripe v-loading="loading" :height="tableHeight" size="large">
          <el-table-column prop="id" label="IC卡号"/>
          <el-table-column prop="code" label="IC卡编号"/>
          <el-table-column label="用户" v-slot="scope">
            <div>{{ scope.row.username }}</div>
            <div>{{ scope.row.phone }}</div>
          </el-table-column>
          <el-table-column prop="name" label="卡名称"/>
          <el-table-column prop="number" label="续卡次数"/>
          <el-table-column prop="name" label="卡类型" v-slot="scope">
            <el-tag v-if="scope.row.type === 1">年卡</el-tag>
            <el-tag v-if="scope.row.type === 2">次卡</el-tag>
            <el-tag v-if="scope.row.type === 3">月卡</el-tag>
            <el-tag v-if="scope.row.type === 4">会员IC卡</el-tag>
            <el-tag v-if="scope.row.type === 5">充值卡</el-tag>
          </el-table-column>
          <el-table-column prop="remainingMoney" label="余额"/>
          <el-table-column prop="price" label="购买价格"/>
          <el-table-column label="可用场馆" v-slot="scope">
            <span>{{ scope.row.siteList.map(item => item.name).join() }}</span>
          </el-table-column>
          <el-table-column prop="num" label="剩余次数"/>
          <el-table-column prop="count" label="总次数"/>
          <el-table-column prop="discount" label="折扣"/>
          <el-table-column prop="month" label="月限"/>
          <el-table-column prop="term" label="年限"/>
          <el-table-column label="付款方式" v-slot="scope">
            <el-tag type="success" v-if="scope.row.payType === 1">微信支付</el-tag>
            <el-tag type="success" v-if="scope.row.payType === 2">支付宝支付</el-tag>
            <el-tag type="success" v-if="scope.row.payType === 3">现金</el-tag>
            <el-tag type="success" v-if="scope.row.payType === 4">POS机刷卡</el-tag>
            <el-tag type="success" v-if="scope.row.payType === 5">平安健康卡</el-tag>
          </el-table-column>
          <el-table-column label="支付状态" v-slot="scope">
            <span class="text-green-500" v-if="scope.row.status === 1">已支付</span>
            <span class="text-red-500" v-if="scope.row.status === 2">未支付</span>
          </el-table-column>
          <el-table-column label="时间" v-slot="scope">
            <div>开卡时间:{{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
            <div class="text-blue-500">
              过期时间:{{ dayjs(scope.row.expireTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </div>
          </el-table-column>
          <el-table-column prop="remark" label="备注"/>
        </el-table>

        <page :per-page="perPage" :current-page="currentPage" :total="total" @change-size="changeSize"
              @change-page="changePage"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import dayjs from "dayjs";
import {pageCard} from "@/api/icCard.js";

const list = ref([])
const loading = ref(true)
const perPage = ref(20)
const total = ref(0)
const currentPage = ref(1)

const changeSize = ({size}) => {
  perPage.value = size
  getList(true)
}

const changePage = ({page}) => {
  currentPage.value = page
  getList()
}

const keywords = ref('')
const createTimeRange = ref([])
const getList = async (reload = false) => {
  let createTimeStart = null, createTimeEnd = null, orderTimeStart = null, orderTimeEnd = null
  if (reload) {
    currentPage.value = 1
    loading.value = true
  }
  loading.value = true
  if (createTimeRange.value && createTimeRange.value.length) {
    createTimeStart = dayjs(createTimeRange.value[0]).unix()
    createTimeEnd = dayjs(createTimeRange.value[1] + ' 23:59:59').unix()
  }
  const res = await pageCard({
    page: currentPage.value,
    limit: perPage.value,
    keywords: keywords.value ?? null,
    createTimeStart: createTimeStart ?? null,
    createTimeEnd: createTimeEnd ?? null,
    notZeroNumber: true,
  })
  loading.value = false
  total.value = res.data.count
  list.value = res.data.list
}

const tableHeight = ref(1080)
onMounted(async () => {
  tableHeight.value = document.body.clientHeight - 260
  await getList()
})
</script>