<template>
  <view class="box" :style="{ backgroundImage: `url(${bg})`, backgroundRepeat: 'noRepeat', backgroundSize: '100% 100%' }">
    <view class="top">
      <view class="user-info-left">
        <img class="headImg" src="/static/image/user/touxiang.png" alt="" />
        <view class="user-info-box">
          <view style="color: #fff; font-size: 1rem; font-weight: 500">{{ desensitization(store.$state.userInfo?.mobile) }}</view>
          <view style="font-size: 0.8125rem; color: #a6a6a6">{{ store.$state.userInfo?.true_name || t('index.tip1') }}</view>
          <!-- <span>{{ t('user.xinyongpingfen') }}：{{ store.$state.userInfo?.score }}</span> -->
        </view>
      </view>
      <view class="user-info-right" @click="goPage('/subPackages/seting/seting')">
        <img :src="set" style="width: 1.0211rem; height: 0.875rem" />
      </view>
      <!-- <view class="user-info-bottom">
        <view class="zichan-box">
          <view style="display: flex; align-items: center">
            <span class="zichan-box-title">{{ t('user.zongzichan') }}</span>
            <van-icon v-if="!isShowInfo" name="closed-eye" color="#50aff0" size="20" class="showIcon" @click="isShowInfo = !isShowInfo" />
            <van-icon v-else name="eye-o" color="#50aff0" size="20" class="showIcon" @click="isShowInfo = !isShowInfo" />
          </view>
          <span v-if="!isShowInfo" class="zichan-box-money">******</span>
          <span v-else class="zichan-box-money" style="font-size: 0.8125rem; font-weight: 400">{{ Number(store.$state.userInfo?.total).toLocaleString() || 0 }}</span>
        </view>
        <view id="zichan-chart" class="zichan-chart"> </view>
      </view> -->
    </view>

    <view class="user-info">
      <view class="user-info-top">
        <view class="user-info-top-left">
          <view class="zichan-box">
            <view style="display: flex; align-items: center">
              <span class="zichan-box-title">{{ t('user.zongzichan') }}</span>
              <van-icon v-if="!isShowInfo" name="closed-eye" color="#aeb2bb" size="20" class="showIcon" @click="isShowInfo = !isShowInfo" />
              <van-icon v-else name="eye-o" color="#aeb2bb" size="20" class="showIcon" @click="isShowInfo = !isShowInfo" />
            </view>
            <span v-if="!isShowInfo" class="zichan-box-money">******</span>
            <span v-else class="zichan-box-money">{{ Number(store.$state.userInfo?.total).toLocaleString() || 0 }}</span>
          </view>
        </view>
        <view class="user-info-top-right">
          <van-button class="chongzhi" type="primary" @click="goWeb">{{ t('user.chongzhi') }}</van-button>
          <van-button type="primary" plain class="plain-btn" @click="goPage('/subPackages/withdrawal/withdrawal')">{{ t('user.tixian') }}</van-button>
        </view>
      </view>
      <view class="user-info-buttom">
        <view v-for="(item, i) in userAssetsInfo" :key="i" class="user-info-item" :style="i === 0 ? { textAlign: 'left' } : i === 1 ? { textAlign: 'center' } : { textAlign: 'right' }">
          <view class="user-info-item-left">
            <!-- <view class="user-info-item-tou" :style="{ background: item.tou }"></view> -->
            <view class="user-info-item-t">{{ t(item.t) }}</view>
          </view>
          <view v-if="!isShowInfo" class="user-info-item-money">******</view>
          <view v-else class="user-info-item-money">{{ item.num }}</view>
        </view>
      </view>
      <!-- <view v-for="(item, i) in userAssetsInfo" :key="i" class="user-info-item">
        <view class="user-info-item-left">
          <view class="user-info-item-tou" :style="{ background: item.tou }"></view>
          <view class="user-info-item-t">{{ t(item.t) }}</view>
        </view>
        <view v-if="!isShowInfo" class="user-info-item-money">******</view>
        <view v-else class="user-info-item-money">{{ item.num }}</view>
      </view> -->
      <!-- <view class="user-info-btns">
        <van-button class="chongzhi" type="primary" @click="goWeb">{{ t('user.chongzhi') }}</van-button>
        <van-button type="primary" plain class="plain-btn" @click="goPage('/subPackages/withdrawal/withdrawal')">{{ t('user.tixian') }}</van-button>
      </view> -->
    </view>

    <view class="page-list-box">
      <view v-for="(item, i) in pageListArr" :key="i" class="page-list-item" @click="goPage(i === 6 ? store.clearState() : goPage(item.url, i == 5 ? true : false))">
        <!-- <van-icon name></van-icon> -->

        <view style="display: flex; align-items: center">
          <image class="page-list-item-icon" :src="item.imgUrl" />
          <view class="name">{{ t(item.name) }}</view>
        </view>
        <img :src="right" style="width: 0.4063rem; height: 0.75rem" />
      </view>
      <!-- <view class="page-list-item"></view> -->
    </view>
  </view>
  <CustomTabbar :id="4" />
</template>

<script lang="ts" setup>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import * as echarts from 'echarts'
import { useI18n } from 'vue-i18n'
import { computed, onMounted, ref } from 'vue'
import { useCounterStore } from '@/store/store'
import { onShow } from '@dcloudio/uni-app'
import { getCzhiurlApi } from '@/api/user'
import { changeMoney } from '@/common/common'
import bg from '@/static/bg.png'
import right from '@/static/rigth.png'
import set from '@/static/image/searchNavigation/set.png'
const store = useCounterStore()
// 基于准备好的dom，初始化echarts实例

const kefu_url = ref('')

const getCzhiurlFn = async () => {
  const res = await getCzhiurlApi()
  if (res.code === 1) {
    kefu_url.value = res.data.kefu_url
  }
}

// 手机号脱敏
const desensitization = (str: string) => {
  return str
    .split('')
    .map((item, i) => {
      if (i >= 3 && i <= 6) {
        return '*'
      }
      return item
    })
    .join('')
}

const goWeb = () => {
  // showToast(t('user.tip1'))
  window.open(kefu_url.value)
}
onMounted(() => {
  const myChart = echarts.init(document.getElementById('zichan-chart'))
  const option = {
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '80%',
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 0
        },
        label: {
          show: false,
          position: 'center'
        },
        color: ['#50AFF0', '#50F0AA'],
        data: [
          { value: store.$state.userInfo?.money || 0, name: t('user.xianjinyue') },
          { value: store.$state.userInfo?.shizhi || 0, name: t('user.beiyongzijin') }
        ]
      }
    ]
  }
  option && myChart.setOption(option)
})
onShow(() => {
  getCzhiurlFn()
  // setInterval(() => {
  store.getUserInfo()
  // }, 50000)
})

const goPage = (url: string, is = false) => {
  if (is) {
    goWeb()
    return
  }
  uni.navigateTo({ url })
}

const { t } = useI18n()
const isShowInfo = ref(false)
const pageListArr = [
  {
    name: 'user.yinhangzhanghu',
    imgUrl: '/static/image/user/2.png',
    url: '/subPackages/bankAccount/bankAccount'
  },
  {
    name: 'user.shouru',
    imgUrl: '/static/image/user/1.png',
    url: '/subPackages/transactionLog/transactionLog'
  },
  {
    name: 'user.benrenqueren',
    imgUrl: '/static/image/user/3.png',
    url: '/subPackages/real_name/real_name'
  },
  {
    name: 'user.rizhisuoyin',
    imgUrl: '/static/image/user/4.png',
    url: '/subPackages/changePassword/changePassword'
  },
  {
    name: 'user.shiwuchuli',
    imgUrl: '/static/image/user/5.png',
    url: '/subPackages/transactionPassions/transactionPassions'
  },
  {
    name: 'user.kefuzhongxin',
    imgUrl: '/static/image/user/6.png',
    url: '/subPackages/customerService/customerService'
  },
  // {
  //   name: 'user.qiehuanyuyan',
  //   imgUrl: '/static/image/user/7.png',
  //   url: '/subPackages/switchLanguage/switchLanguage'
  // },
  {
    name: 'user.zhuxiao',
    imgUrl: '/static/image/user/8.png',
    url: '/subPackages/logout/logout'
  }
]
const money = computed(() => {
  return changeMoney(store.$state.userInfo?.money || 0) || 0
})
const count_market = computed(() => {
  return changeMoney(store.$state.userInfo?.shizhi || 0) || 0
})
const count_losses = computed(() => {
  return changeMoney(store.$state.userInfo?.my_losses?.count_losses || 0) || 0
})

const userAssetsInfo = ref([
  {
    t: 'user.xianjinyue',
    num: money,
    tou: '#50AFF0'
  },
  {
    t: 'user.beiyongzijin',
    num: count_market,
    tou: '#50F0AA'
  },
  {
    t: 'user.fudongsunyi',
    num: count_losses,
    tou: '#C850F0'
  }
])
</script>
<style scoped lang="scss">
::v-deep .van-button--normal {
  padding: 0;
}
uni-view {
  box-sizing: border-box;
}
* {
  font-weight: 500;
}
::v-deep .van-button {
  width: 4.0625rem;
  height: 1.5rem;
  border-radius: 1.5625rem;

  .van-button__text {
    font-size: $uni-font-size-1;
  }
}

.box {
  .page-list-box {
    margin-top: 0.75rem;
    height: 30rem;
    // background: #ffffffb2;
    background: rgba(9, 40, 73, 0.5);
    border-top-left-radius: 1.875rem;
    border-top-right-radius: 1.875rem;

    // fill: rgba(255, 255, 255, 0.7);
    // background: #000;
    // box-shadow: 0px 2px 0px 0px #fff inset;
    // padding-bottom: 4.375rem;
    // margin-bottom: 1.25rem;
    // filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    .page-list-item {
      width: 21.5625rem;
      height: 3.6875rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 1.2813rem;
      // border-bottom: solid #0e0e0e;
      .page-list-item-icon {
        width: 2.125rem;
        height: 2.125rem;
        margin-right: 0.625rem;
      }
      .name {
        color: #fff;
        font-size: 0.875rem;
      }
    }
  }

  .user-info {
    width: 21.5625rem;
    height: 8.9375rem;
    border-radius: 1.25rem;
    background: rgba(9, 40, 73, 0.5);
    // box-shadow: 0px 2px 0px 0px #fff inset;
    margin: 1.6875rem auto 0;
    padding: 1rem 0.9375rem 1.0313rem 0.9375rem;

    .user-info-buttom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.9375rem;
    }

    .user-info-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user-info-top-left {
        .zichan-box {
          display: flex;
          flex-direction: column;
          // margin-top: 0.9375rem;
          // margin-left: 1rem;
          position: relative;
          .showIcon {
            margin-left: 0.625rem;
          }

          .zichan-box-title {
            font-size: 0.8125rem;
            color: #aeb2bb;
          }

          .zichan-box-money {
            font-weight: 500;
            font-size: 1.25rem;
            color: #fff;
          }
        }
      }

      .user-info-top-right {
        .chongzhi {
          background: #08182b;
          color: #fff;
          margin-right: 0.625rem;
        }
        .plain-btn {
          background: $uni-color-primary;
        }
        ::v-deep .van-button--primary .van-button__text {
          color: #fff;
        }
        ::v-deep .van-button--primary.plain-btn .van-button__text {
          color: #fff;
        }
      }
    }
    .user-info-btns {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1.2813rem;
      ::v-deep .van-button--primary .van-button__text {
        color: #6a69e9;
      }
      ::v-deep .van-button--primary.plain-btn .van-button__text {
        color: #0e0c0c;
      }
    }

    .user-info-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: space-between;
      // padding: 0 1.2813rem;
      margin-bottom: 0.5938rem;

      .user-info-item-money {
        line-height: 1rem;
        font-size: 1rem;
        font-weight: 500;
        color: #fff;
        margin-top: 0.3125rem;
      }

      .user-info-item-left {
        // display: flex;
        // align-items: center;
        .user-info-item-t {
          font-size: 0.875rem;
          color: #aeb2bb;
        }

        .user-info-item-tou {
          width: 0.4063rem;
          height: 0.4063rem;
          border-radius: 50%;
          margin-right: 0.4375rem;
        }
      }
    }
  }

  .top {
    width: 100%;
    height: 3.0625rem;

    padding: 0.9375rem;

    .user-info-bottom {
      position: absolute;
      top: 5.9063rem;
      left: 0.6563rem;
      width: 22.125rem;
      height: 3.625rem;
      // background: #f8fafc;
      border-radius: 1.25rem;
      display: flex;
      justify-content: space-between;

      .zichan-chart {
        width: 2.875rem;
        height: 2.875rem;
        // background: #50aff0;
        // border-radius: 50%;
        margin-right: 1.0938rem;
        margin-top: 0.3125rem;
      }
    }

    .user-info-right {
      position: absolute;
      top: 2.0313rem;
      right: 0.9375rem;

      font-weight: 500;
      font-size: $uni-font-size-1;
      color: #50aff0;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-arrow {
        width: 0.375rem;
        height: 0.6563rem;
        margin-top: 0.125rem;
        // position: absolute;
        // right: 0.75rem;
        // top: 0.4375rem;
      }
    }

    .user-info-left {
      // margin: 0.6933rem 0 0 0.56rem;
      display: flex;
      align-items: center;
      .user-info-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        font-weight: 500;
        font-size: 1rem;
        color: #161616;
        // line-height: 2.0625rem;
        span {
          height: 0.625rem;
          margin-bottom: 0.3125rem;
          line-height: 0.625rem;
        }
      }
    }

    .headImg {
      border-radius: 50%;
      height: 2.4375rem;
      width: 2.4375rem;
      margin-right: 0.7813rem;
    }
  }
}
</style>
