<template>
  <div>
    <div class="row">
      <el-table :data="tableData.list" stripe border v-loading="tableData.loading">
        <el-table-column label="用户ID" prop="id" width="100"></el-table-column>
        <el-table-column label="用户" prop="nickName">
          <template v-slot="scope">
            <div class="user_info">
              <el-avatar :src="scope.row.headImg" :size="35"></el-avatar>
              <span class="name">{{ scope.row.nickName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="账户积分" prop="pointBalance"></el-table-column>
        <el-table-column label="操作" width="100">
          <template v-slot="scope">
            <el-button link type="primary" @click="showRecord(scope.row)">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="row mt14">
      <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
        :page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog title="积分明细" width="800px" v-model="visible" @closed="selectUserTableDataReset">
      <div class="content">
        <div class="header">
          <div class="item">
            <span class="t1">用户</span>
            <span class="t2">{{ selectRow.nickName }} {{ selectRow.phone }}</span>
          </div>
          <div class="item">
            <span class="t1">账户积分</span>
            <span class="t2">{{ selectRow.pointBalance }}</span>
          </div>
        </div>
        <div class="row mt14">
          <el-table :data="selectUserTableData.list" border stripe v-loading="selectUserTableData.loading"
            height="50vh">
            <el-table-column label="变动类型" prop="floatType" width="100">
              <template v-slot="scope">
                <span v-if="scope.row.floatType == 'add'">累加</span>
                <span v-if="scope.row.floatType == 'subtract'">扣减</span>
              </template>
            </el-table-column>
            <el-table-column label="变动积分" prop="floatPoints" width="100"></el-table-column>
            <el-table-column label="变动原因" prop="content"></el-table-column>
            <el-table-column label="变动时间" prop="createTime" width="200"></el-table-column>
            <el-table-column label="变动后积分" prop="balancePoints" width="100"></el-table-column>
          </el-table>
        </div>
        <div class="row mt14">
          <el-pagination v-model:current-page="selectUserTableData.page" v-model:page-size="selectUserTableData.size"
            :page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
            :total="selectUserTableData.total" @size-change="selectUserTableDataSizeChange"
            @current-change="selectUserTableDataCurrentChange" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { pointsUserPage, pointsUserRecord } from '@/api/points'

const tableData = reactive({
  loading: false,
  list: [],
  page: 1,
  size: 10,
  total: 0
})

// 分页大小发生变化
function handleSizeChange(e) {
  tableData.size = e;
  goodsRecordPageAjax();
  goodsRecordTotalAjax()
}

// 分页发生变化
function handleCurrentChange(e) {
  tableData.page = e;
  goodsRecordPageAjax();
  goodsRecordTotalAjax()
}

// 积分:用户:列表
async function pointsUserPageAjax() {
  try {
    tableData.loading = true
    const res = await pointsUserPage({
      page: tableData.page,
      size: tableData.size
    })
    tableData.list = res.records
    tableData.total = res.totalRow
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    tableData.loading = false
  }, 500);
}

const visible = ref(false)
const selectRow = ref({})
function showRecord(row) {
  selectRow.value = row
  visible.value = true
  pointsUserRecordAjax()
}

// 积分:用户:积分详情
const selectUserTableData = reactive({
  loading: false,
  page: 1,
  size: 10,
  total: 0,
  list: []
})

// 分页大小发生变化
function selectUserTableDataSizeChange(e) {
  selectUserTableData.size = e;
  pointsUserRecordAjax()
}

// 分页发生变化
function selectUserTableDataCurrentChange(e) {
  selectUserTableData.page = e;
  pointsUserRecordAjax()
}

function selectUserTableDataReset() {
  selectUserTableData.page = 1
  selectUserTableData.list = []
}

async function pointsUserRecordAjax() {
  try {
    selectUserTableData.loading = true
    const res = await pointsUserRecord({
      page: 1,
      size: 10,
      id: selectRow.value.id
    })
    selectUserTableData.list = res.records
    selectUserTableData.total = res.totalRow
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    selectUserTableData.loading = false
  }, 500);
}

onMounted(() => {
  pointsUserPageAjax()
})
</script>

<style scoped lang="scss">
.row {
  &.mt14 {
    margin-top: 14px;
  }
}

.user_info {
  display: flex;
  gap: 10px;
  align-items: center;

  .name {
    font-size: 14px;
    color: #333;
  }
}

.content {
  .header {
    display: flex;

    .item {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 14px;

      .t1 {
        font-size: 16px;
        color: #333;
      }

      .t2 {
        font-size: 16px;
        color: #666;
      }
    }
  }
}
</style>