<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>
        <n-descriptions label-placement="left" label-align="left" :column="4" size="large">
          <n-descriptions-item>
            <template #label>玩家ID</template>
            <span class="default_text_value">{{ userInfo.userId }}</span>
          </n-descriptions-item>

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

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

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

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

          <!--          <n-descriptions-item label="近90天登录">
            <n-space>
              <span class="default_text_value">{{ attr.loginCount ?? 0 }}次</span>
            </n-space>
          </n-descriptions-item>

          <n-descriptions-item label="近90天看广告">
            <n-space>
              <span class="default_text_value">{{ attr.advCount ?? '' }}次</span>
            </n-space>
          </n-descriptions-item>

          <n-descriptions-item label="近90天在线">
            <n-space>
              <span class="default_text_value">{{ attr.onlineDuration ?? '' }}</span>
            </n-space>
          </n-descriptions-item>-->

          <n-descriptions-item label="注册时间(当前服)">
            <n-space>
              <span class="default_text_value">{{ user.createtime }}</span>
            </n-space>
          </n-descriptions-item>
          <n-descriptions-item label="最近登录">
            <n-space>
              <span class="default_text_value">{{ attr.lastlogintick ?? '' }}</span>
            </n-space>
          </n-descriptions-item>
        </n-descriptions>
      </template>
    </n-card>

    <n-card
      :bordered="true"
      title="属性信息"
      class="proCard mt-2"
      size="small"
      :segmented="{ content: true }"
    >
      <n-descriptions
        label-placement="left"
        label-align="left"
        :column="4"
        size="large"
        v-show="!showModifyBase"
      >
        <n-descriptions-item label="玩家等级">
          <!--  --><!-- <template #label>玩家等级</template> -->
          <n-space>
            <span class="default_text_value">{{ userInfo.userLevel }}</span>
          </n-space>
        </n-descriptions-item>
        <n-descriptions-item label="玩家金币">
          <n-space>
            <span class="default_text_value">{{ materials.coin }}</span>
          </n-space>
        </n-descriptions-item>
        <n-descriptions-item label="玩家钻石">
          <n-space>
            <span class="default_text_value">{{ materials.diamond }}</span>
          </n-space>
        </n-descriptions-item>
      </n-descriptions>
    </n-card>

    <!--    <n-card
      :bordered="true"
      title="充值与消费 （消费数据统计时间从2022年9月1日开始）"
      class="proCard mt-2"
      size="small"
      :segmented="{ content: true }"
    >
      <n-skeleton v-if="loading" text :repeat="6" />
      <template v-else>
        <n-descriptions label-placement="left" label-align="left" :column="4" size="large">
          <n-descriptions-item>
            <template #label>累计充值次数</template>
            <span class="default_text_value">{{ order.rechargeCount }}</span>
          </n-descriptions-item>
          <n-descriptions-item label="累计充值金额">
            <n-space>
              <span class="default_text_value">{{ order.rechargeAmount }} 元</span>
            </n-space>
          </n-descriptions-item>
        </n-descriptions>
      </template>
    </n-card>-->
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref, watch } from 'vue';
  import { useMessage } from 'naive-ui';
  import { userInfoObj } from '@/views/account/accountList/userInfo';
  import { timestampToTime } from '@/utils/dateUtil';
  import {
    getPlayerAttr,
    // getSigninCount,
    getUserAccountInfo,
    // orderStatistics,
  } from '@/api/account/list';
  import { UtilsTool } from '@/utils/macd/UtilsTool';
  import { RetrofitGroupOptions } from '@/api/echarts/rechargeList';
  //import { useRouter } from 'vue-router';
  import { getServerName } from '@/utils/admin';

  const singleBan = reactive({
    ban: false,
  });

  const paySwitch = reactive({
    pay: false,
  });

  const userBan = reactive({
    ban: false,
  });

  interface Props {
    userId?: number;
    userInfo?: any;
  }

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

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

  let user = reactive({
    openid: '',
    nickname: '',
    account: '',
    createtime: '',
    ban: '',
  });

  let attr = reactive({
    lastlogintick: '',
    lastlogouttick: '',
    // location: '',
    // signinCount: 0,
    // advCount: 0,
    // onlineDuration: '',
    serverId: 0,
    accId: 0,
    openId: '',
    loginCount: 0,
  });

  const order = reactive({
    playerid: 0,
    orderPlatform: '',
    rechargeCount: 0,
    rechargeDiamondCount: 0,
    consumptionCoinCount: '',
    consumptionDiamondCount: '',
    firstChargeAt: '',
    lastChargeAt: '',
    rechargeAmount: 0,
  });

  const materials = reactive({
    coin: 0,
    diamond: 0,
  });

  function loadBaseInfo() {
    new Promise((_resolve, _reject) => {
      getUserAccountInfo({ playerid: props.userId })
        .then((res) => {
          console.log('getUserAccountInfo res::', res);
          // 用户信息
          // user.openid = res.openid;
          // user.nickname = res.nickname;
          user.account = res.account;
          // user.createtime = res.createtime > 0 ? timestampToTime(res.createtime) : '';
          // user.ban = res.ban == 1 ? '禁用' : '正常';
          userBan.ban = res.ban == 1;
          singleBan.ban = res.singleBan == 1;
        })
        .catch((error) => {
          message.error(error.toString());
        });
    });

    new Promise((_resolve, _reject) => {
      getPlayerAttr({ playerid: props.userId })
        .then((res) => {
          console.log('getPlayerAttr res::', res);
          // 属性
          attr.lastlogintick = res.lastlogintick > 0 ? timestampToTime(res.lastlogintick) : '';
          attr.lastlogouttick = res.lastlogouttick > 0 ? timestampToTime(res.lastlogouttick) : '';
          // if (res.location !== null && res.location !== '') {
          //   attr.location = res.location.slice(0, -2);
          // }

          // attr.advCount = res.advCount;
          // attr.onlineDuration = res.onlineDuration;
          attr.accId = res.accId;
          attr.serverId = res.line;
          attr.openId = res.openId;
          user.nickname = res.nickName;
          user.createtime = res.create_time > 0 ? timestampToTime(res.create_time) : '';

          paySwitch.pay = res.paySwitch == 1;
          const userMaterials = JSON.parse(res.materials);
          console.log('userMaterials::', userMaterials);
          materials.coin = userMaterials[3001];
          materials.diamond = userMaterials[3002];
        })
        .catch((error) => {
          // message.error(error.toString());
          console.log('error:' + error.toString());
        });
    });

    // new Promise((_resolve, _reject) => {
    //   orderStatistics({ playerid: props.userId })
    //     .then((res) => {
    //       if (res.orderPlatform == 1) {
    //         order.orderPlatform = '安卓';
    //       } else {
    //         order.orderPlatform = '苹果';
    //       }
    //
    //       order.rechargeCount = res.rechargeCount;
    //       order.rechargeDiamondCount = res.rechargeDiamondCount;
    //       order.rechargeAmount = res.rechargeAmount;
    //       order.firstChargeAt = res.firstChargeAt > 0 ? timestampToTime(res.firstChargeAt) : '';
    //       order.lastChargeAt = res.lastChargeAt > 0 ? timestampToTime(res.lastChargeAt) : '';
    //
    //       order.consumptionCoinCount = UtilsTool.unitConversion(res.consumptionCoinCount);
    //       order.consumptionDiamondCount = UtilsTool.unitConversion(res.consumptionDiamondCount);
    //     })
    //     .catch((error) => {
    //       // message.error(error.toString());
    //       console.log('error:' + error.toString());
    //     });
    // });

    // new Promise((_resolve, _reject) => {
    //   getSigninCount({ playerid: props.userId })
    //     .then((res) => {
    //       attr.signinCount = res.signinCount;
    //       attr.loginCount = res.loginCount;
    //     })
    //     .catch((e: Error) => {
    //       // message.error(e.message ?? '操作失败');
    //       console.log('error:' + e.message);
    //     });
    // });
  }

  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>
