<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-tooltip effect="dark" :content="accountForm.deptName" placement="top">
                <el-input v-model="accountForm.deptName" disabled style="width: 180px" />
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="2.5">
            <el-form-item label="卡片类型" prop="cardTypeName">
              <el-tooltip effect="dark" :content="accountForm.cardTypeName" placement="top">
                <el-input v-model="accountForm.cardTypeName" disabled style="width: 120px" />
              </el-tooltip>
            </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>
      <el-card shadow="never">
        <template #header>
          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-button type="warning" plain icon="Refresh" @click="getList">刷新</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" plain icon="Close" @click="handleClose">关闭</el-button>
            </el-col>
          </el-row>
        </template>
        <div>
          <el-table
            ref="tableRef"
            v-loading="loading"
            :row-key="getRowKey"
            :data="cards.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
            @selection-change="handleSelectionChange"
          >
            <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="cardNo" />
            <el-table-column label="物理卡号" align="center" prop="factoryId" />
            <el-table-column label="卡片类型" align="center" prop="cardTypeName" />
            <el-table-column label="有效期" align="center" prop="lifespan" width="180"> </el-table-column>
            <el-table-column label="卡片状态" align="center" prop="status">
              <template #default="scope">
                <dict-tag :options="KZT" :value="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column label="状态变更时间" align="center" prop="changeTime">
              <template #default="scope">
                <span>{{ parseTime(scope.row.changeTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否主卡" align="center" prop="mainCard">
              <template #default="scope">
                <dict-tag :options="sys_yes_no" :value="scope.row.mainCard" />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-tooltip content="挂失" placement="top">
                  <el-button
                    v-show="scope.row.status == '1'"
                    v-hasPermi="['cardOperation:ptCard:edit']"
                    link
                    type="primary"
                    icon="Lock"
                    @click="handleLockCard(scope.row)"
                    >挂失</el-button
                  >
                </el-tooltip>
                <el-tooltip content="解挂" placement="top">
                  <el-button
                    v-show="scope.row.status == '2'"
                    v-hasPermi="['cardOperation:ptCard:edit']"
                    link
                    type="warning"
                    icon="Unlock"
                    @click="handleUnlockCard(scope.row)"
                    >解挂</el-button
                  >
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" v-model:page="pageNum" v-model:limit="pageSize" :total="total" />
          <div></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

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

// 当前组件属性
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
/** 当前页面引用的数据字典 */
const { KZT, sys_yes_no } = toRefs<any>(proxy?.useDict('KZT', 'sys_yes_no'));
// 是否加载遮罩层
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 cards = ref<PtCardVO[]>([]);
const single = ref(true);
const ids = ref<Array<number | string>>([]);
// 当前组件方法
/** 保存选中的数据编号 */
const getRowKey = (row: PtCardVO): string => {
  return String(row.cardId);
};
const getList = async () => {
  const userId = route.params && route.params.userId;
  if (userId) {
    loading.value = true;
    const res = await api.getAccountCard(userId as string);
    Object.assign(accountForm.value, res.data.account);
    Object.assign(cards.value, res.data.cards);
    total.value = cards.value.length;
    // await nextTick(() => {
    //   cards.value.forEach((row) => {
    //     if (row?.flag) {
    //       tableRef.value?.toggleRowSelection(row, true);
    //     }
    //   });
    // });
    loading.value = false;
  }
};
/** 关闭按钮 */
const handleClose = () => {
  const obj: RouteLocationNormalized = {
    fullPath: '',
    hash: '',
    matched: [],
    meta: undefined,
    name: undefined,
    params: undefined,
    query: undefined,
    redirectedFrom: undefined,
    path: '/cardCenter/cardOperation'
  };
  proxy?.$tab.closeOpenPage(obj);
};
// 表格选择事件
const handleSelectionChange = (selection: PtCardVO[]) => {
  ids.value = selection.map((item) => item.cardId);
  single.value = selection.length != 1;
};
// 挂失卡片
const handleLockCard = async (row: PtCardVO) => {
  const cardId = row.cardId;
  await proxy?.$modal.confirm('是否确认挂失这张卡片？');
  await cardApi.lockPtCard(cardId);
  await getList();
  proxy?.$modal.msgSuccess('卡片挂失成功');
};
// 解挂卡片
const handleUnlockCard = async (row: PtCardVO) => {
  const mainCard: string = row.mainCard;
  if (mainCard === 'Y') {
    if (cards.value.some((card) => card.mainCard === mainCard && card.status === '1')) {
      proxy?.$modal.alertWarning('已有正常的主卡，无法再解挂主卡！');
      return;
    }
  }
  const cardId = row.cardId;
  await proxy?.$modal.confirm('是否确认解挂这张卡片？');
  await cardApi.unlockPtCard(cardId);
  await getList();
  proxy?.$modal.msgSuccess('卡片解挂成功');
};
// 传回给父组件的属性与方法
// defineExpose({});

// 触发父组件的事件
// const emits = defineEmits([]);

// 初始化
onMounted(() => {
  getList();
});
</script>

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