<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="form_query.keyword"
      />
      <button type="button" class="search-btn" @click="initData"></button>
    </div>
   <div v-if="listData.length > 0">
     <ul >
      <li
        v-for="(l, i) in listData"
        :key="i"
        class="grid grid-cols-3 text-14px py-18.5px border_dotted"
      >
        <div>{{ l.tjj_datetime }}</div>
        <div class="">{{ l.tjj_keyword }}</div>
        <div class="">
          <span
            class="font-semibold"
            :class="
              l.tjj_jfjlnr.split('')[0] == '+' ? 'color_blue' : 'color_red'
            "
            >{{ l.tjj_jfjlnr }}
          </span>
          积分
        </div>
      </li>
    </ul> <div class="mt-20px flex justify-center">
      <el-pagination
        v-model:current-page="form_query.page"
        v-model:page-size="form_query.limit"
        layout="total, prev, pager, next"
        :total="total"
        :background="true"
        @current-change="initData"
        :hide-on-single-page="false"
      ></el-pagination>
    </div></div>
    <nodata v-else></nodata>
   
  </div>
</template>
<script setup>
import nodata from "@/pages/xsd/component/noData.vue";
import { user } from "@/store/index";
import { jf_list } from "./api";
let total = $ref(10);

let form_query = $ref({
  page: 1,
  limit: 8,
  keyword: "",
  create_user_id: user.value.user_id,
});
let listData = $ref([]);
function initData() {
  const data = {
    ...form_query,
  };
  jf_list(data).then((res) => {
    if (res.code == "1") {
      listData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
</script>
<style lang="scss" scoped>
$color: #1259a1;
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background: $color;
}
::v-deep .el-pager li:hover {
  color: $color;
}
.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>