<template>
  <div class="account-list admin-page-card">
    <div class="header-bar">
      <div class="period-tabs">
        <div v-for="t in accountTabs" :key="t.value" :class="['period-tab', { active: activeType === t.value }]"
          @click="onPickType(t.value)">
          {{ t.label }}
        </div>
      </div>
      <el-button type="primary" class="blue-sign add-btn" @click="goAdd">
        <img class="add-icon" src="@/assets/image/admin/accounts/add.svg" alt=""> {{ addBtnText }}
      </el-button>
    </div>

    <el-table class="admin-table" :data="list" v-loading="loading" header-cell-class-name="admin-table-header-cell"
      stripe>
      <el-table-column :label="$t('table.account')" prop="username" width="auto" />
      <el-table-column v-if="activeType === 'Hospital'" :label="$t('table.hospital')" prop="hospitalName"
        min-width="180" show-overflow-tooltip />
      <el-table-column :label="$t('table.name')" prop="name" width="auto" />
      <el-table-column :label="$t('table.gender')" prop="gender" width="auto" />
      <el-table-column v-if="activeType === 'Admin'" :label="$t('table.role')" prop="role" width="auto" />
      <el-table-column :label="$t('label.status')" width="auto">
        <template #default="{ row }">
          <el-switch :model-value="row.status === '启用'" @change="toggleStatus(row)" :loading="row.__loading"
            :active-text="$t('account.enable')" :inactive-text="$t('account.disable')" inline-prompt />
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.createTime')" width="auto">
        <template #default="{ row }">
          {{ formatDate(row.createdAt) }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('table.action')" width="220" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" plain class="purple-sign smaller" @click="goEdit(row)">
            {{ $t('btn.edit') }}
          </el-button>
          <el-button type="warning" plain class="blue-sign smaller" @click="resetPwd(row)">
            {{ $t('account.resetPassword') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="admin-pagination">
      <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="loadList" @current-change="loadList" />
    </div>

                    <AccountEditDialog v-model:visible="editVisible" :account-id="editId" :account-data="editRow"
      :user-type="activeType" @success="loadList" />

    <ResetPasswordDialog v-model:visible="resetVisible" :account-data="resetRow" @success="loadList" />
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
import {
  getAdminAccounts,
  toggleAdminAccountStatus,
} from "@/service/modular/admin";
import AccountEditDialog from "./components/AccountEditDialog.vue";
import ResetPasswordDialog from "./components/ResetPasswordDialog.vue";

const { t: $t } = useI18n();

const accountTabs = [
  { label: "医院账号", value: "Hospital" },
  { label: "管理员账号", value: "Admin" },
];
const activeType = ref("Hospital");

// 添加按钮文案随当前 tab 切换
const addBtnText = computed(() =>
  activeType.value === "Admin" ? "添加管理员账号" : "添加医院账号"
);

const list = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);

const loadList = async () => {
  loading.value = true;
  try {
    const res = await getAdminAccounts({
      page: page.value,
      pageSize: pageSize.value,
      type: activeType.value,
    });
    list.value = res?.list || [];
    total.value = res?.total || 0;
  } finally {
    loading.value = false;
  }
};

const onPickType = (val) => {
  if (activeType.value === val) return;
  activeType.value = val;
  page.value = 1;
  loadList();
};

const formatDate = (val) => (val ? dayjs(val).format("YYYY-MM-DD") : "");

// 添加 / 编辑改为弹窗
const editVisible = ref(false);
const editId = ref("");
const editRow = ref({});

const goAdd = () => {
  editId.value = "";
  editRow.value = {};
  editVisible.value = true;
};
const goEdit = (row) => {
  editId.value = row.id;
  editRow.value = row;
  editVisible.value = true;
};

// 重置密码弹窗
const resetVisible = ref(false);
const resetRow = ref({});
const resetPwd = (row) => {
  resetRow.value = row;
  resetVisible.value = true;
};

const toggleStatus = async (row) => {
  row.__loading = true;
  try {
    await toggleAdminAccountStatus(row.id);
    ElMessage.success($t('msg.statusChangeSuccess'));
    loadList();
  } finally {
    row.__loading = false;
  }
};

onMounted(loadList);
</script>

<style scoped lang="scss">
.account-list {
  .header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .period-tabs {
    display: flex;
    gap: 32px;
  }

  .period-tab {
    cursor: pointer;
    user-select: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #1d2129;
    padding: 0 0 16px 0;
    border-bottom: 3px solid transparent;

    &:hover {
      color: #3289fb;
    }

    &.active {
      color: #3289fb;
      border-bottom-color: #3289fb;
    }
  }

  .add-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 155px;
    height: 35px;
  }
}
</style>

<style lang="scss">
@use "@/assets/style/admin-common.scss" as *;
</style>
