<template>
  <view class="container" :style="{ height: pageHeight }">
    <!-- 顶部 -->
    <!-- <view class="nav">
      <view class="header">
        <view class="head">
          <image src="/static/image/user/touxiang.png"></image>
        </view>
        <view class="info">
          <view>{{ desensitization(store.userInfo?.mobile) }}</view>
          <view>{{ store.userInfo?.true_name || t('index.tip1') }}</view>
        </view>
      </view>
      <van-badge :dot="dot" style="display: flex">
        <image src="/static/image/index/icon_9.png" style="margin-right: 0.63rem" class="w-[1.72rem] h-[1.63rem] block" @click="goWeb()"></image>
        <image src="/static/image/index/1.png" class="w-[1.72rem] h-[1.63rem] block" @click="goPage('/subPackages/message/message')"></image>
      </van-badge>
    </view> -->

    <!-- 检索栏 -->
    <view class="search">
      <image src="/static/image/user/touxiang.png" class="touxian"></image>
      <view class="search-box" @click="goPage('/subPackages/search/search')">{{ t('search.tip3') }}</view>
      <image src="/static/image/index/1.png" class="xiaoxi" @click="goPage('/subPackages/message/message')"></image>
      <image src="/static/image/index/icon_9.png" class="kefu" @click="goWeb()"></image>
      <!-- <SearchNavigation /> -->
    </view>

    <!-- 主体 -->
    <view class="content" :style="{ height: `calc(-6.25rem + 100vh)` }">
      <view class="content-cord">
        <view class="select_wrap">
          <view class="flex items-center">
            <view class="t1">
              <view :class="getColor(activeGupiao)">{{ activeGupiao?.zhangdieshu }}{{ `(${activeGupiao?.zhangdiebaifenbi})%` }} </view>
              <view :class="getColor(activeGupiao)" style="font-size: 1.25rem; font-weight: 500">{{ activeGupiao.price }}</view>
            </view>
            <van-icon :color="getColor(activeGupiao) == 'up' ? '#EA3522' : '#31CC43'" name="play" :class="getColor(activeGupiao) == 'up' ? 'rotate2' : 'rotate1'" />
          </view>
          <view class="select" @click="openSelect">
            <view>{{ activeGupiao?.name || '' }}</view>
            <van-icon name="arrow-down" color="#6a69e9" size=".75rem" />
          </view>
        </view>
        <GupiaoChart :value="chartValue" />
        <!-- 功能 -->
        <view class="wrap">
          <view v-for="(item, index) in buttonList" :key="index" class="wrap-item" @click="goToNextPage(item)">
            <view class="img-box">
              <image :src="item.icon"></image>
            </view>
            <view class="text">{{ item.label.value }}</view>
          </view>
        </view>
        <!-- <view class="wrap">
          <view class="button_wrap">
            <view v-for="(item, index) in buttonList" :key="index" class="button" @click="goPage(item.url, index === 1 ? true : false)">
              <image :src="item.icon"></image>
              <view>{{ item.label.value }}</view>
            </view>
          </view>
        </view> -->
      </view>
      <!-- 股票 -->

      <view class="scroll_list">
        <view class="title-top" @click="switchTab('/pages/market/market')">
          <view class="title">{{ t('index.hot') }}</view>
          <view class="title-right">{{ t('index.tip2') }} <img src="@/static/rigth.png" /></view>
        </view>
        <view class="gupiao_wrap">
          <view
            v-for="(item, index) in hotGupiaoList"
            :key="index"
            :class="item.zhangdieshu <= 0 ? 'down-b' : 'up-b'"
            class="gupiao"
            @click="goPage(`/subPackages/index/gupiaoDetail/gupiaoDetail?id=${item.id}`)"
          >
            <view class="flex items-center">
              <view class="name">{{ item.name }}</view
              >&nbsp;&nbsp;
              <view class="daima">{{ item.shuzidaima }}</view>
            </view>

            <view class="flex items-center justify-between mt-[0.28rem]">
              <view>
                <div class="flex2">
                  <view class="text-base text-right" style="font-size: 0.875rem" :class="getColor(item)">{{ item.zhangdieshu }}</view>
                  <span v-if="item.zhangdiebaifenbi === 0"> - </span>
                  <van-icon v-else :class="getColor(item, true)" name="down" size=".75rem" />
                </div>
                <view class="text-base text-right" style="font-size: 0.875rem" :class="getColor(item)">{{ item.zhangdiebaifenbi }}%</view>
              </view>
              <view class="text-primary text-lg">
                <span class="price" :class="getColor(item)">{{ item.price }}</span>
              </view>
            </view>
          </view>
        </view>
        <!-- 热门股票 -->
        <!-- <view class="wrap">
          <view class="title">{{ t('index.hot') }}</view>
          <view class="gupiao_wrap">
            <view v-for="(item, index) in hotGupiaoList" :key="index" class="gupiao" @click="goPage(`/subPackages/index/gupiaoDetail/gupiaoDetail?id=${item.id}`)">
              <view class="flex items-center justify-between">
                <view class="text-primary text-base text_hied">{{ item.name }}</view>
                <view class="text-gray text-sm">{{ item.shuzidaima }}</view>
              </view>

              <view class="flex items-center justify-between mt-[0.28rem]">
                <view class="text-primary text-lg">
                  <text>{{ item.price }}</text>
                  <text v-if="item.zhangdiebaifenbi === 0"> - </text>
                  <van-icon v-else :class="getColor(item, true)" name="down" size=".75rem" />
                </view>
                <view>
                  <view class="text-base text-right" :class="getColor(item)">{{ item.zhangdieshu }}</view>
                  <view class="text-base text-right" :class="getColor(item)">{{ item.zhangdiebaifenbi }}%</view>
                </view>
              </view>
            </view>
          </view>
        </view> -->
      </view>
    </view>

    <van-popup v-model:show="selectShow" class="select_window" v-bind="windowOptions">
      <view v-for="(item, index) in hotGupiaoList.slice(0, 3)" :key="index" class="title" @click="handleSelect(index)">{{ item.name }}</view>
    </van-popup>
  </view>
  <CustomTabbar :id="0" />
</template>

<script lang="ts" setup>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import GupiaoChart from './components/gupiaoChart.vue'
// import SearchNavigation from '@/components/searchNavigation/searchNavigation.vue'
import { useCounterStore } from '@/store/store'
import { getTickerKApi, getHotGupiaoApi } from '@/api/index/index'
import { getUserMessageApi } from '@/api/message'
import { onHide, onShow } from '@dcloudio/uni-app'
import { ref, watch, computed } from 'vue'
import { getCzhiurlApi } from '@/api/user'
import { useI18n } from 'vue-i18n'
// import kefu from '@/static/image/index/icon_2.png'
import { goPage, getColor, switchTab } from '@/common/common'
const { t } = useI18n()
// 页面基础配置
const store = useCounterStore()
console.log(store)
const dot = ref(false)
// 获取消息
const getUserMessage = async () => {
  const res = await getUserMessageApi()

  if (res.code === 1) {
    dot.value = res.data.data[0]?.is_read === '0'
  }
}

const kefu_url = ref('')

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

const goWeb = () => {
  window.open(kefu_url.value)
}

const goToNextPage = (item) => {
  if (item.url) {
    goPage(item.url)
  } else {
    goWeb()
  }
}

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

const pageHeight = `calc(100vh - ${store.tabbarHeight})`
// const contentHeight = `calc(100vh - ${store.tabbarHeight} - 4.28rem - 2.91rem)`
let inId: any = null
onShow(() => {
  getHotGupiao()
  getUserMessage()
  getCzhiurlFn()
  console.log(button1.value, 'button1')

  inId = setInterval(() => {
    // 获取热门股票
    getHotGupiao()
    getUserMessage()
  }, 10000)
})

onHide(() => {
  console.log(inId, 'iddd')

  clearInterval(inId)
})
const button1 = computed(() => t('index.button1'))
const button2 = computed(() => t('dadan.title'))
const button4 = computed(() => t('index.button4'))
const button6 = computed(() => t('hongli.title'))
const button8 = computed(() => t('rongzi.title'))
const button7 = computed(() => t('index.button2'))
const guajiang = computed(() => t('index.guajiang'))
const buttonList = [
  { label: button1, icon: '/static/image/index/icon_1.png', url: '/subPackages/index/ipo/ipo' },
  { label: button6, icon: '/static/image/index/icon_6.png', url: '/subPackages/index/hongli/hongli' },
  { label: guajiang, icon: '/static/image/index/guajiang2.png', url: '/subPackages/index/scratchLottery/scratchLottery' },
  { label: button2, icon: '/static/image/index/icon_5.png', url: '/subPackages/index/dadan/dadan' },

  // { label: button2, icon: '/static/image/index/icon_2.png', url: '/subPackages/customerService/customerService' },
  // { label: t('index.button3'), icon: '/static/image/index/icon_3.png', url: '/subPackages/index/jiaoyi/jiaoyi' },
  { label: button4, icon: '/static/image/index/icon_4.png', url: '/subPackages/transactionLog/transactionLog?isLs=1' },

  { label: button8, icon: '/static/image/index/icon_8.png', url: '/subPackages/index/rongzi/rongzi' },
  { label: button7, icon: '/static/image/index/icon7.png', url: null }
]

const gupiaoActive = ref(0)
const chartValue = ref({})

// 熱門股票
interface hotGupiaoType {
  name: string
  shuzidaima: string
  price: string
  zhangdiebaifenbi: number | string
  zhangdieshu: number | string
  id: number
}
const hotGupiaoList = ref<Array<hotGupiaoType>>([])
const activeGupiao = computed(() => {
  return hotGupiaoList.value[gupiaoActive.value] || { zhangdiebaifenbi: 0 }
})
const getHotGupiao = async () => {
  const res = await getHotGupiaoApi()
  for (const i in res.data.result) {
    res.data.result[i].zhangdieshu = Number(res.data.result[i].zhangdieshu).toFixed(1)
    res.data.result[i].zhangdiebaifenbi = Number(res.data.result[i].zhangdiebaifenbi).toFixed(1)
    res.data.result[i].price = Number(res.data.result[i].price).toFixed(1)
  }
  hotGupiaoList.value = res.data.result
}

// 股票chart
watch(
  () => hotGupiaoList,
  (newData) => {
    resetChartData(newData.value[gupiaoActive.value])
  },
  { deep: true }
)
const resetChartData = async (data: any) => {
  console.log(111, data)
  const params = {
    id: data.id,
    kline_type: 6,
    type: 1
  }
  const res = await getTickerKApi(params)
  const kLineList = res.data.map((item: any) => {
    return {
      close: item.c,
      high: item.h,
      low: item.l,
      open: item.o,
      timestamp: item.t * 1000,
      volume: item.v
    }
  })
  chartValue.value = kLineList
}

// 打开筛选框
const selectShow = ref(false)
const windowOptions = {
  position: 'bottom',
  'close-on-click-overlay': true,
  'safe-area-inset-bottom': true
}
const openSelect = () => {
  selectShow.value = true
}
const handleSelect = (index: number) => {
  gupiaoActive.value = index
  resetChartData(hotGupiaoList.value[gupiaoActive.value])
  selectShow.value = false
}
</script>
<style scoped lang="scss">
.container {
  background: #124b91;
}
.down-b {
  background: #e8f7ef;
}
.up-b {
  background: #fff3f5;
}

.nav {
  height: 4.28rem;
  display: flex;
  background-color: #fff;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header {
    display: flex;
    font-size: $uni-font-size-base;
    .head {
      width: 2.5rem;
      height: 2.5rem;
      background-color: #d0d0d0;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 0.56rem;
    }
    image {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      display: block;
      margin-right: 0.56rem;
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: bold;
    }
  }
}

.search {
  width: 100%;
  height: 3.125rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.9375rem 0.625rem 0.9375rem;

  .touxian {
    width: 1.7813rem;
    height: 1.7813rem;
    border-radius: 50%;
    margin-right: 0.9375rem;
  }

  .search-box {
    width: 14.375rem;
    height: 2.125rem;
    border-radius: 1.25rem;
    background: #08182b;
    margin-right: 1.5rem;
    color: #fff;
    padding: 0 0.63rem;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
  }

  .kefu {
    width: 1rem;
    height: 1rem;
  }

  .xiaoxi {
    width: 1rem;
    height: 1rem;
    margin-right: 0.9375rem;
  }
}

.content {
  // background-color: #fff;
  overflow-y: auto;

  .content-cord {
    width: 21.5625rem;
    // height: 23.5313rem;
    border-radius: 1.25rem;
    background: rgba(13, 40, 71, 0.7);
    margin: 0.625rem auto 0;
    padding: 0.9375rem 0.9375rem 1.5rem 0.9375rem;

    .wrap {
      display: flex;
      flex-flow: wrap;
      // padding-left: 1.25rem;
      .wrap-item {
        width: calc((100%) / 3);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 0.875rem;
        // margin-right: 2.6875rem;
        .text {
          color: #fff;
          font-size: 0.6875rem;
          font-weight: 400;
          margin-top: 0.3438rem;
        }
        .img-box {
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 50%;
          background: rgb(10, 32, 58, 0.7);
          display: flex;
          align-items: center;
          justify-content: center;
          image {
            width: 1.5rem;
            height: 1.375rem;

            // margin-right: 0.47rem;
          }
        }
      }
    }
  }

  .scroll_list {
    width: 100%;
    background: rgba(14, 46, 82, 0.7);
    border-top-left-radius: 1.5625rem;
    border-top-right-radius: 1.5625rem;
    margin-top: 2.5rem;

    padding: 1.3125rem 0.9375rem;

    .gupiao_wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 0.625rem;

      .gupiao {
        width: 10.4688rem;
        height: 6.1875rem;
        border-radius: 0.625rem;
        padding: 1rem 0.9375rem 1.0625rem 0.9375rem;
        margin-bottom: 0.625rem;

        .price {
          font-size: 1.0625rem;
          font-weight: 500;
        }

        .name {
          color: #23262b;
          font-size: 0.875rem;
          font-weight: 500;
          max-height: 6.25rem;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          word-break: break-all;
        }
        .daima {
          color: #23262b;
          font-size: 0.875rem;
          font-weight: 500;
        }
      }

      .flex2 {
        display: flex;
        align-items: center;
      }
    }

    .title-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .title {
      color: #fff;
      font-size: 0.875rem;
      font-weight: 400;
    }

    .title-right {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 0.875rem;
      font-weight: 400;
      img {
        height: 0.7383rem;
        width: 0.4375rem;
        margin-left: 0.4063rem;
      }
    }
  }

  .wrap {
    margin-top: 1.4063rem;
    > .title {
      height: 2.38rem;
      padding-top: 1.06rem;
      font-size: $uni-font-size-1;
      font-weight: bold;
      margin-left: 0.47rem;
    }
    .button_wrap {
      // height: 8.4375rem;
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: 2.69rem 2.69rem 2.69rem 2.69rem;
      row-gap: 0.25rem;
      column-gap: 0.44rem;
      .button {
        background-color: #638daa;
        border-radius: 0.56rem;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 0.94rem;
          height: 0.94rem;

          margin-right: 0.47rem;
        }
        view {
          color: #fff;
          width: 6.75rem;
          font-size: 0.63rem;
        }
      }
    }
    .gupiao_wrap {
      display: flex;
      flex-wrap: wrap;
      .gupiao {
        width: calc((100% - 0.38rem) / 2);
        height: 3.88rem;
        background-color: #638daa;
        border-radius: 0.56rem;
        margin-bottom: 0.5rem;
        padding: 0.75rem 0.56rem;
      }
      > :nth-of-type(2n) {
        margin-left: 0.38rem;
      }
    }
  }
  .select_wrap {
    padding: 1.13rem 0.56rem 0.56rem;
    display: flex;
    justify-content: space-between;
    .t1 {
      color: #aeb2bb;
      font-size: 0.8125rem;
      font-weight: 400;
    }
    .select {
      width: 7.375rem;
      height: 1.5625rem;
      line-height: 1.5625rem;
      background-color: #08182b;
      border-radius: 0.56rem;
      padding: 0 0.33rem;

      font-size: 0.8125rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      view {
        flex: 1;
        text-align: center;
        color: #ee2560;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .rotate1 {
    transform: rotate(90deg);
  }
  .rotate2 {
    transform: rotate(270deg);
  }
}
.select_window {
  padding: 0.51rem 1rem 0.9rem;
  .title {
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: $uni-font-size-lg;
    padding: 0 1rem;
    text-align: center;
    border-bottom: 0.03rem solid #ccc;
  }
}
</style>
