<template>
    <div class="main bg-white-grey rounded-10px mt-4 py-8 px-8" style="font-size: 18px">
        <h3>积分详情</h3>
        <div class="mt-25px search-box">
            <input type="text" placeholder="搜索关键字" v-model="keyword">
            <button type="button" class="search-btn" @click="filterData"></button>
        </div>
        <ul v-if="listData.length > 0">
            <li v-for="(l, i) in listData" :key="i" class="flex text-14px py-18.5px border_dotted">
                <div>{{ l.tjj_datetime }}</div>
                <div class="ml-216px">{{ l.tjj_xm }}</div>
                <div class="ml-258px"><span class="font-semibold" :class="l.tjj_jfjlnr.split('')[0] == '+' ? 'color_blue' : 'color_red'">{{ l.tjj_jfjlnr }} </span> 积分</div>
            </li>
        </ul>
        <nodata v-else></nodata>
        <div class="mt-20px flex justify-center">
            <el-pagination v-model:current-page="cur_page" v-model:page-size="limit" layout="total, prev, pager, next"
                :total="total" :background="true" @current-change="handleSelectionChange"></el-pagination>
        </div>
    </div>
</template>
<script setup>
import nodata from '@/pages/xsd/component/noData.vue'
import { user } from '@/store/index'
import { jf_list } from '../api';
let keyword = $ref('');
let limit = $ref(8);
let total = $ref(0);
let cur_page = $ref(1);
let listData = $ref([])
function initData() {
    let data = {
        limit,
        page: cur_page,
        create_user_id: user.value.user_id
    }
    jf_list(data).then(res => {
        if (res.code == '1') {
            const { page_data, total_rows, page_now } = res.data
            listData = page_data
            total = Number(total_rows);
            cur_page = Number(page_now)
        }
    })
}
initData();
let handleSelectionChange = (val) => {
    cur_page = val;
    initData();
};
</script>
<style lang="scss" scoped>
$color: #1259a1;

.bg-white-grey {
    background: #fcfeff;
}

.border_dotted {
    border-bottom: 2px dashed rgba(158, 140, 232, 0.43);
}

.color_blue {
    color: $color;
}

.color_red {
    color: #F30808;
}

.search-box {
    width: 300px;
    height: 48px;
    background: #f6f8fa;
    border-radius: 8px;
    padding: 0 10px 0 14px;
    display: flex;
    align-items: center;

    input {
        flex: 1;
        height: 48px;
        border: 0;
        font-size: 16px;
        color: #333;
        outline: none;
        background: #f6f8fa;
    }

    .search-btn {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: $color url("/images/icon-search.png") center no-repeat;
        background-size: 13px 13px;
    }
}</style>