<template>
  <div class="p-2">
    <div class="panel">
      <h4 class="panel-title">基本信息</h4>
      <el-form :model="accountForm" :inline="true">
        <el-row :gutter="10">
          <el-col :span="2.5">
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="accountForm.realName" disabled style="width: 100px" />
            </el-form-item>
          </el-col>
          <el-col :span="2.5">
            <el-form-item label="学/工号" prop="userName">
              <el-input v-model="accountForm.userName" disabled style="width: 100px" />
            </el-form-item>
          </el-col>
          <el-col :span="2.5">
            <el-form-item label="部门" prop="deptName">
              <el-input v-model="accountForm.deptName" disabled style="width: 180px" />
            </el-form-item>
          </el-col>
          <el-col :span="2.5">
            <el-form-item label="卡片类型" prop="cardTypeName">
              <el-input v-model="accountForm.cardTypeName" disabled style="width: 100px" />
            </el-form-item>
          </el-col>
          <el-col :span="2.5">
            <el-form-item label="有效期" prop="lifespan">
              <el-input v-model="accountForm.lifespan" disabled style="width: 180px" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="panel">
      <h4 class="panel-title">钱包信息</h4>
      <div>
        <el-table ref="tableRef" v-loading="loading" :row-key="getRowKey" :data="bags.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
          <el-table-column label="序号" width="55" type="index" align="center">
            <template #default="scope">
              <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
          <el-table-column label="钱包代码" align="center" prop="bagCode" />
          <el-table-column label="钱包名称" align="center" prop="status">
            <template #default="scope">
              <dict-tag :options="CARDBAGTYPE" :value="scope.row.bagCode" />
            </template>
          </el-table-column>
          <el-table-column label="钱包余额" align="center" prop="balance" />
          <el-table-column label="消费总金额" align="center" prop="consumeTotal" />
          <el-table-column label="消费总次数" align="center" prop="consumeCount" width="180"> </el-table-column>
          <el-table-column label="充值总金额" align="center" prop="rechargeTotal" />
          <el-table-column label="充值总次数" align="center" prop="rechargeCount" />
        </el-table>
        <div style="text-align: center; margin-left: -120px; margin-top: 30px">
          <el-button type="primary" @click="close()">返回</el-button>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script setup name="AccountCard" lang="ts">
// 模块导入
import api from '@/api/payment/account';
import { PtUserAccountForm } from '@/api/payment/account';
import { PtBagVO } from '@/api/payment/bag/types';
import { RouteLocationNormalized } from 'vue-router';
// 接收父组件传入属性
const props = defineProps({});

// 当前组件属性
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
/** 当前页面引用的数据字典 */
const { CARDBAGTYPE } = toRefs<any>(proxy?.useDict('CARDBAGTYPE'));
// 是否加载遮罩层
const loading = ref(true);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const tableRef = ref<ElTableInstance>();
const accountForm = ref<Partial<PtUserAccountForm>>({
  realName: undefined,
  userNumb: '',
  deptName: '',
  cardTypeName: '',
  lifespan: '',
  userId: undefined
});
const bags = ref<PtBagVO[]>([]);
/** 保前组件方法 */
/** 保存选中的数据编号 */
const getRowKey = (row: PtBagVO): string => {
  return String(row.bagId);
};
const getList = async () => {
  const userId = route.params && route.params.userId;
  if (userId) {
    loading.value = true;
    const res = await api.getAccountBag(userId as string);
    Object.assign(accountForm.value, res.data.account);
    Object.assign(bags.value, res.data.bags);
    total.value = bags.value.length;
    loading.value = false;
  }
};
/** 关闭按钮 */
const close = () => {
  const obj: RouteLocationNormalized = {
    fullPath: '',
    hash: '',
    matched: [],
    meta: undefined,
    name: undefined,
    params: undefined,
    query: undefined,
    redirectedFrom: undefined,
    path: '/payment/account'
  };
  proxy?.$tab.closeOpenPage(obj);
};
// 初始化
onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss"></style>
