<template>
  <div>
    <n-card
      :bordered="true"
      title="账号信息"
      class="proCard mt-2"
      size="small"
      :segmented="{ content: true }"
    >
      <n-skeleton v-if="loading" text :repeat="6" />
      <template v-else>
        <template v-for="item in attrs">
          <n-space vertical size="medium" style="margin-bottom: 15px">
            <n-descriptions
              label-placement="left"
              label-align="left"
              :column="4"
              size="large"
              class="n-space"
            >
              <n-descriptions-item>
                <template #label>玩家ID</template>
                <span class="default_text_value">{{ item.playerId }}</span>
              </n-descriptions-item>

              <n-descriptions-item>
                <template #label>玩家等级</template>
                <span class="default_text_value">{{ item.level }}</span>
              </n-descriptions-item>

              <n-descriptions-item label="昵称">
                <n-space>
                  <span class="default_text_value" type="info">{{ item.nickname }}</span>
                </n-space>
              </n-descriptions-item>

              <n-descriptions-item label="openid">
                <n-space>
                  <span class="default_text_value">{{ item.openId }}</span>
                </n-space>
              </n-descriptions-item>

              <n-descriptions-item label="服务器">
                <n-space>
                  <span class="default_text_value">{{ getServerName(item.serverId) }}</span>
                </n-space>
              </n-descriptions-item>

              <n-descriptions-item label="账号ID">
                <n-space>
                  <span class="default_text_value">{{ item.accId ?? '' }}</span>
                </n-space>
              </n-descriptions-item>

              <n-descriptions-item label="注册时间">
                <n-space>
                  <span class="default_text_value">{{ item.createtime }}</span>
                </n-space>
              </n-descriptions-item>
            </n-descriptions>
          </n-space>
        </template>
      </template>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import { timestampToTime, formatToDateTime } from '@/utils/dateUtil';
  import { getPlayerAttrAll } from '@/api/account/list';
  import { RetrofitGroupOptions } from '@/api/echarts/rechargeList';
  //import { useRouter } from 'vue-router';
  import { getServerName } from '@/utils/admin';
  import { Ref } from 'vue';

  interface Props {
    userId?: number;
  }

  const props = withDefaults(defineProps<Props>(), {
    userId: 0,
  });

  //const router = useRouter();
  const retrofitOptions = ref([]);
  const loading = ref(false);

  interface attr {
    lastlogintick: string;
    lastlogouttick: string;
    // location: string;
    // advCount: number;
    // onlineDuration: string;
    serverId: number;
    accId: number;
    openId: string;
    nickname: string;
    createtime: string;
    playerId: number;
    level: number;
  }

  const attrs: Ref<attr[]> = ref([]);

  function loadBaseInfo() {
    getPlayerAttrAll({ accId: props.userId })
      .then((res) => {
        console.log('res::' + JSON.stringify(res));
        for (let index = 0; index < res.length; index++) {
          const r = res[index];
          console.log('r::', r);
          // 属性
          attrs.value.push({
            lastlogintick: r.lastlogintick > 0 ? timestampToTime(r.lastlogintick) : '',
            lastlogouttick: r.lastlogouttick > 0 ? timestampToTime(r.lastlogouttick) : '',
            // location: r.location !== null && r.location !== '' ? r.location.slice(0, -2) : '',
            // advCount: r.advCount,
            // onlineDuration: r.onlineDuration,
            accId: r.accId,
            serverId: r.line,
            openId: r.openId,
            nickname: r.nickName,
            createtime: r.create_time,
            playerId: r.playerid,
            level: r.level,
          });
        }
      })
      .catch((error) => {
        // message.error(error.toString());
        console.log('error:' + error.toString());
      });
  }

  watch(props, (_newVal, _oldVal) => {
    loadBaseInfo();
  });

  onMounted(async () => {
    console.log(props);
    if (props.userId < 1) {
      console.log('传入用户信息不正确，props.userId：', props.userId);
      return;
    }
    loadBaseInfo();
    getRetrofitOptions();
  });

  function getRetrofitOptions() {
    new Promise((_resolve, _reject) => {
      RetrofitGroupOptions({})
        .then((res) => {
          console.log('retrofitOptions res::' + JSON.stringify(res));
          retrofitOptions.value = res;
        })
        .catch((error) => {
          // message.error(error.toString());
          console.log('error:' + error.toString());
        });
    });
  }
</script>

<style lang="less" scoped>
  .default_text_value {
    color: var(--n-tab-text-color-active);
  }
</style>
