boursecu_user/src/views/base/home/index.vue

<template>
  <div class=" mt-20">

    <!--    <div class="flex gap-7 overflow-x-scroll px-5">
          <ProductInventory v-for="item in productInventorys" :ProductItem="item" class="shadow-lg my-5" :key="item.id"></ProductInventory>
        </div>-->
    <div>
      <div
        v-if="userStore.userInfo && !loading"
        class="bg-white w-screen md:w-auto h-fit px-5 m-[-1px]"
      >
        <div
          v-if="limitedPrice !== undefined && userStore?.userInfo.trade_active !== 1"
          class="text-red text-xs flex gap-1 items-center justify-center mb-2"
        >
          <Icon icon="vuesax-linear:info-circle" size="16" />
          حداقل مبلغ اولیه برای ثبت سفارش
          {{ usePriceWithoutType(limitedPrice.value as number ?? 0) }} ریال می باشد.
        </div>

        <!--        <div class="bg-white">
          <MySlider v-if="cardItems.length > 0" :items="cardItems" class=" pb-[20vh] "
                    style="touch-action: none" />
        </div>-->
        <!--        <div class="bg-gradient-to-l mt-3 p-1   shadow-lg  from-primary rounded-lg p-px  to-transparent ">-->
        <div class="mt-3 p-1  shadow-lg from-primary rounded-lg p-px to-transparent">
          <div class=" p-2 py-6  rounded-lg bg-tertiary">
            <div class="flex justify-between ">
              <!--              <div
                                class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
                                style="text-align: -webkit-center"
                                @click="router.push({ name: 'buyProduct', query: { state: 'sell' } })"
                            >
                              <div
                                  class="rounded-full w-[42px] h-[42px] bg-primary flex items-center justify-center"
                                  style="border: solid 1px #000000FF"

                              >
                                <Icon class="text-tertiary" icon="vuesax-linear:money-send" />
                              </div>
                              <div class="text-primary">فروش</div>
                            </div>-->
              <div
                class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
                style="text-align: -webkit-center"
                @click="router.push({ name: 'buyProduct' })"
              >
                <div
                  class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
                  style="border: solid 1px #000000FF"

                >
                  <Icon class="text-tertiary" icon="vuesax-linear:money-receive" />
                </div>
                <div class="text-primary">خرید و فروش</div>
              </div>
              <div
                class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
                style="text-align: -webkit-center"
                @click="router.push({ name: 'wallet', query: { state: 'deposit' } })"
              >
                <div
                  class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
                  style="border: solid 1px #000000FF"

                >
                  <Icon class="text-tertiary" icon="vuesax-linear:card-add" />
                </div>
                <div class="text-primary">واریز نقدی</div>
              </div>
              <div
                class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
                style="text-align: -webkit-center"
                @click="openWholeBalanceVisible()"
              >
                <div
                  class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center "
                  style="border: solid 1px #000000FF"
                >
                  <Icon class="text-tertiary" icon="vuesax-linear:receipt-item" />
                </div>
                <div class="text-primary">موجودی</div>
              </div>
              <div
                class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
                style="text-align: -webkit-center"
                @click="router.push({ name: 'fund' })"
              >
                <div
                  class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
                  style=" border: solid 1px #000000FF"

                >
                  <Icon class="text-tertiary font-bold" icon="vuesax-linear:cup" />
                </div>
                <div class="text-primary">دارایی ها</div>
              </div>
            </div>
          </div>
          <!--            <ADivider></ADivider>-->
          <div>
            <!--            <div @click="router.push({ name: 'fund' })">-->
            <div class="bg-primary rounded-lg p-2 py-6 mt-2">
              <div class="flex justify-center text-tertiary w-full z-20">
                محصولات:
                <div class="text-l mr-2 font-bold">{{ userStore?.userInfo?.wallet?.count_product ?? 0}}عدد</div>
              </div>
              <div class="flex mt-2 justify-center text-tertiary w-full z-20">
                دارایی طلایی:
                <div class="text-l mr-2 font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3)}}گرم</div>
                <BasicIcon @click="openGoldModal" icon="vuesax-linear:info-circle" size="18" color="orange" />
              </div>
              <div class="flex mt-2 justify-center text-tertiary w-full z-20">
                دارایی ریالی:
                <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0) }}ریال</div>
                <BasicIcon @click="openRialModal" icon="vuesax-linear:info-circle" size="18" color="orange" />
              </div>
            </div>
            <!--              <div class="flex  justify-center mt-2 w-full z-20">
                            دارایی ریالی:
                            <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.count_cash ?? 0) }}ریال</div>
                          </div>-->
            <!--              <div class="flex justify-center mt-2 w-full z-20">
                            <BasicInfoItem
                                title="دارایی ریالی"
                                is-line
                                :info="`در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0) }) + معادل ریالی محصولات (${ usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`"
                                infoHead="مجموع کل دارایی ریالی"
                                :value="usePriceWithoutType(walletStore.walletInfo?.count_cash ?? 0) + ' ریال'"
                            />
                          </div>-->
          </div>
          <!--            <div class="flex justify-between">
                        <div class="text-center font-bold">دارایی شما</div>
                        <div class="flex items-center gap-2 mr-4">
                          <span class="text-base font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.cash ?? 0) }}</span>
                          <span class="text-xs text-base">ریال</span>
                        </div>
                        <div class="flex items-center gap-2 ml-4">
                          <span class="text-base font-bold">{{ walletStore.walletInfo?.gold_sum.toFixed(3) }}</span>
                          <span class="text-xs text-base">گرم</span>
                        </div>
                      </div>-->
          <!--            <div class="flex justify-between items-center ">
                        <div class="text-sm">
                          موجودی کیف پول شما:
                        </div>
                        <div class="flex items-center gap-2">
                          <span class="text-base font-bold">{{ usePrice(walletStore.walletInfo?.cash ?? 0) }}</span>
                        </div>
                      </div>
                      <div class="flex justify-between items-center ">
                        <div class="text-sm">
                          موجودی کیف طلای شما:
                        </div>
                        <div class="flex items-center gap-2">
                          <span class="text-base font-bold">{{ walletStore.walletInfo?.gold }}</span>
                          <span class="text-xs text-gray-500">گرم</span>
                        </div>
                      </div>-->
          <!--            <div class="flex justify-between items-center ">
                        <div class="text-sm">
                          ارزش کل طلا های شما:
                        </div>
                        <div class="flex items-center gap-2">
                          <span class="text-base font-bold">{{ walletStore.walletInfo?.gold_sum }}</span>
                          <span class="text-xs text-gray-500">گرم</span>
                        </div>
                      </div>-->
          <!--            <div class="flex justify-between items-center ">
                        <div class="text-sm">
                        </div>
                        <div class="flex  items-center gap-2">
                          <div v-if="walletStore.walletInfo?.gold_sum*goldVal">
                            <Vue3Odometer
                              :value="walletStore.walletInfo?.gold_sum*goldVal"
                              class="o-text !text-base font-bold"
                              style="font-family: iran-sans; direction: ltr"
                              v-if="key % 2 === 0"
                            />
                          </div>

                          <span class="text-xs text-gray-500">ریال</span>
                        </div>
                      </div>-->
        </div>
        <div
          class="w-full relative mt-5 border-gray-200 border-1 rounded-lg h-[88px] flex flex-col justify-center home_appear_fade_in"
        >

          <div class="w-full items-center flex flex-col">
            <div class="text-gray-600">قیمت خرید از بذر طلا</div>
            <div v-if="price" class="flex gap-1 mt-3 text-xs items-center">
              <!--              <div id="odometer" class="font-bold text-2xl odometer animated fadeIn">
                              &lt;!&ndash;                {{ usePriceWithoutType(useCounterAnim(price.price_last) ?? 0) }}&ndash;&gt;
                            </div>-->
              <!--              <div id="odometer" class="odometer animated fadeIn"></div>-->
              <div v-if="percentPriceChanged()!=0"
                   class="bg-green-100 text-green-600 flex flex-row-reverse rounded-lg justify-between items-center gap-2 px-3"
                   :class="percentPriceChanged()>=0?'bg-green-100 text-green-600':'bg-red-100 text-red-600'">
                <div dir="ltr">{{ useTowDecimal(percentPriceChanged()) }}%</div>
                <div>
                  <icon v-if="percentPriceChanged()<0" size="15px" icon="vuesax-linear:received" color="red-600"></icon>
                  <icon v-else size="15px" icon="vuesax-linear:send" color="green-600"></icon>
                </div>
              </div>
              <Vue3Odometer
                :value="goldVal"
                class="o-text !text-2xl font-bold"
                style="font-family: iran-sans; direction: ltr"
                v-if="key % 2 === 0"
              />
              ریال
            </div>
          </div>
        </div>
        <div class="flex mt-5 gap-1 bg-primary text-[#CEA34C] font-bold justify-center rounded-lg py-5"
             @click="router.push({ name: 'buyProduct', query: { cat: 'coin'} })">
          <div>خرید و فروش</div>
        </div>


        <!--        <div class="mt-10 font-bold home_appear_fade_in" @click="update">
                  نوسانات قیمت هر گرم طلای 18 عیار
                </div>-->

        <!--        <a-spin :spinning="chartLoading" class="relative">
                  <div ref="target" class="absolute"></div>
                  <div v-if="!chartLoading" id="chart" class="pb-20 mt-7 overflow-x-auto">
                    &lt;!&ndash;            <apexchart v-if="targetIsVisible" :options="chartOptions" :series="test_series"
                                           :style="`width: ${chartWidth}`"
                                           height="350"
                                           type="candlestick"></apexchart>&ndash;&gt;
                  </div>
                </a-spin>-->
        <!--        <a-spin :spinning="chartLoading" >-->
        <!--          <div ref="target" class="absolute"></div>-->
        <!--          <div id="chart" class="mt-7">-->
        <div class="bg-gray-50 w-full flex justify-evenly rounded-lg py-4 mt-4 h-[15rem]">
          <div class="w-full text-center pt-2">
            <a-radio-group v-model:value="value" button-style="solid">
              <a-radio-button value="a" @click="updateData('DAILY')">24 ساعت اخیر</a-radio-button>
              <a-radio-button value="b" @click="updateData('WEEKLY')">هفته گذشته</a-radio-button>
              <a-radio-button value="c" @click="updateData('MONTHLY')">ماه گذشته</a-radio-button>
            </a-radio-group>
            <div id="chart-timeline">
              <apexchart
                type="area"
                height="200"
                ref="chart"
                :options="priceChartOptions"
                :series="priceChartSeries"
              ></apexchart>
            </div>
          </div>
        </div>
        <div class=" w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in mt-6 pb-25">
          <div class="text-center w-full">
            <div>بالاترین قیمت امروز</div>
            <div v-if="lastPrice" class="flex flex-col items-center mt-3">
              <div class="text-green-600 flex gap-1 text-xs items-center">
                <div class="text-base">{{ usePriceWithoutType(price?.buy ?? 0) }}</div>
                ریال
              </div>
            </div>
          </div>
          <a-divider class="bg-gray-200 !h-auto !my-2" type="vertical" />
          <div class="text-center w-full">
            <div>پایین ترین قیمت امروز</div>
            <div class="flex w-full mt-3 justify-evenly">
              <div v-if="lastPrice" class="flex flex-col items-center">
                <div class="text-red-600 flex gap-1 text-xs items-center">
                  <div class="text-base">{{ usePriceWithoutType(price?.sell ?? 0) }}</div>
                  ریال
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div v-else class="bg-white w-screen md:w-auto h-[80vh] px-5 m-[-1px] flex justify-center ">
        <HomeSkeleton class="w-full" />
      </div>
      <!--      <div class="relative pt-15 overflow-hidden ">-->
      <!--        <div class="absolute left&#45;&#45;12 top-0">-->
      <!--          <img :src="image">-->
      <!--        </div>-->
      <!--        <div class="bg-primary pb-30"-->
      <!--        style="background: linear-gradient(to bottom, #fff,#fff, #000000FF, #000000FF);"-->
      <!--        >-->
      <!--          <div class=" text-tertiary text-2xl pt-6 pr-5 pl-50" style="font-size: 26px;font-weight: 600; color: #000000FF" >ارسال کالا بعد از ثبت سفارش</div>-->
      <!--          <div class="pr-5 pl-8 pt-10  text-tertiary ">میتوانید با خرید محصولات بعد از ثبت سفارش درخواست ارسال را-->
      <!--            ثبت کرده و زیر 24 ساعت خرید خود را دریافت کنید-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <div
      :class="y > 50 ? 'bg-white shadow opacity-95' : ''"
      class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
    >
      <div class="flex justify-between my-2">
        <div class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
          <!--          <img :src="testimg" alt="" class="w-[24px] h-[24px]">-->
          <div
            class="z-100000 rounded-full border-1"
            :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
          >
            <Icon icon="vuesax-linear:user" size="20" />
          </div>
          <div :class="y > 50 ? 'text-primary' : 'text-primary'" class="color-transition font-bold">
            {{ userStore.userInfo?.name }}
          </div>
        </div>
        <Icon
          :color="y > 50 ? '#000000FF' : '#000000FF'"
          class="color-transition"
          icon="vuesax-linear:logout"
          @click="showLogoutConfirm = true"
        />
      </div>
    </div>
    <DialogVant v-model:show="showLogoutConfirm" :closeOnClickOverlay="false" :timeOut="-1">
      <!--      <template v-slot:img>
              <img :src="registerDelayImage" alt="" class="opacity-80">
            </template>-->

      <template v-slot:title>
        <div class="flex flex-col items-center">
          <DotLottieVue
            class="w-11rem h-11rem"
            autoplay
            src="https://lottie.host/129cf3a1-df84-4758-a856-58c133ae6013/R5RqclXA8G.json"
          />
          <div class="p-5 text-sm">آیا از خروج خود اطمینان دارید؟</div>
        </div>
      </template>

      <template v-slot:button>
        <div class="text-center text-red flex items-center justify-center" @click="logout">
          <a-spin :spinning="logoutLoading" size="small"> خروج</a-spin>
        </div>
        <div class="text-center" @click="showLogoutConfirm = false">انصراف</div>
      </template>
    </DialogVant>
  </div>
  <BasicActionSheet v-model:show="wholeBalanceVisible">
    <div class="pb-20">
      <div>
        <div class="w-full text-center font-bold">موجودی ها</div>
        <div class="h-30vh overflow-y-auto">
          <div class="mt-5">
            <BasicInfoItem
              class="flex justify-between"
              title="مجموعه کل دارایی طلایی"
              is-line
              :info="`در این قسمت مجموع کل وزن طلای آبشده (${(walletStore.walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletStore.walletInfo?.treasure_sum ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`"
              infoHead="مجموع کل دارایی طلایی"
              :value="parseFloat((walletStore.walletInfo?.gold_sum ?? 0).toFixed(2)) + ' گرم'"
            />
            <!--            <a-divider class="!my-1" />
                        <BasicInfoItem
                          class="flex justify-between"
                          title="میزان طلای آبشده"
                          is-line
                          :value="parseFloat((walletStore.walletInfo?.gold ?? 0)?.toFixed(3)) + ' گرم'"
                        />
                        <a-divider class="!my-1" />
                        <BasicInfoItem
                          class="flex justify-between"
                          title="ارزش گنج ها"
                          is-line
                          :value="parseFloat((walletStore.walletInfo?.treasure_sum ?? 0)?.toFixed(3)) + ' گرم'"
                        />-->
            <a-divider class="!my-1" />
            <BasicInfoItem
              class="flex justify-between"
              title="دارایی کیف پول ریالی"
              is-line
              :value="usePrice(walletStore.walletInfo?.count_cash ?? 0)"
            />
            <a-divider class="!my-1" />
            <BasicInfoItem
              class="flex justify-between"
              title="دارایی کیف پول طلایی"
              is-line
              :value="(walletStore.walletInfo?.count_gold ?? 0) + ' گرم'"
            />
            <a-divider class="!my-1" />
            <BasicInfoItem
              class="flex justify-between"
              title="دارایی کیف پول نقره"
              is-line
              :value="(walletStore.walletInfo?.count_silver ?? 0) + ' گرم'"
            />
            <a-divider class="!my-1" />
            <!--            <BasicInfoItem class="flex justify-between" title="دارایی کیف پول(به گرم)" is-line
                           :value="((walletStore.walletInfo?.cash?? 0) / (goldVal?? 0)).toFixed(2)+ ' گرم'" />
            <a-divider class="!my-1" />-->
            <!--            <BasicInfoItem
                            class="flex justify-between"
                            title="ارزش کل دارایی شما"
                            is-line
                            :value="
                            usePrice(
                              (
                                (walletStore.walletInfo?.gold_sum ?? 0) * (goldVal ?? 0) +
                                (walletStore.walletInfo?.cash ?? 0)
                              ).toFixed(0)
                            )
                          "
                        />
                        <a-divider class="!my-1" />-->

            <BasicInfoItem
              class="flex justify-between"
              title="ارزش کل دارایی ریالی شما"
              is-line
              :value="
                usePrice(
                  (walletStore.walletInfo?.count_cash_total ?? 0).toFixed(0)
                )
              "
            />
          </div>
        </div>
      </div>
    </div>
  </BasicActionSheet>
</template>

<script lang="tsx" setup>
import img from '@/assets/img/home_ly1.svg'
import img1 from '@/assets/img/home_ly2.svg'
import Icon from '@/components/BasicPacks/BasicIcon.vue'
import { usePrice, usePriceWithoutType, useTowDecimal } from '../../../utils/usePrice'
import {computed, createVNode, onMounted, onUnmounted, ref, watch, watchEffect} from 'vue'
import router from '@/router'
import * as echarts from 'echarts'

import { useIntersectionObserver, useWindowScroll } from '@vueuse/core'
import { loading, removeToken } from '@/utils'
import { useUserStore } from '@/store/userStore'
import { useWalletStore } from '@/store/walletStore'
import DialogVant from '@/components/DialogVant.vue'
import type { Price } from '@/models/home'
import { getAllPrices, getChart, getLastPrice, getPrice } from '@/api/home'
// import odometer from 'odometer/odometer'
import Vue3Odometer from 'vue3-odometer'
import 'odometer/themes/odometer-theme-default.css'
import HomeSkeleton from '@/views/base/home/components/HomeSkeleton.vue'
import { toJalaliNotime } from '@/utils/useDateTime'
import {
  getLastPrices,
  getUpPrice,
  lastPrice,
  percentPriceChanged,
  price,
  setIntervalGetAllPrice,
  stopPriceInterval
} from '@/utils/price'
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
import MySlider from '@/views/base/wallet/components/mySlider/MySlider.vue'
import type { Card, PWallet, Wallet } from '@/models/wallet'
import { getActivatedCards } from '@/api/wallet'
import banner1 from '@/assets/img/banner/banner1.png'
import banner2 from '@/assets/img/banner/banner2.png'
import image from '@/assets/img/image.svg'

import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import ProductInventory from '@/views/base/home/components/ProductInventory.vue'
import type { PInventory, Product } from '@/models/products'
import { getProductInventory } from '@/api/products'
import type { Fund } from '@/models/fund'
import type { TableOutput } from '@/models/table'
import { useFundUserStore } from '@/store/fundStore'
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue/es";

const userStore = useUserStore()
const walletStore = useWalletStore()
const chartLoading = ref<boolean>(false)
const wholeBalanceVisible = ref<boolean>(false)
const { x, y } = useWindowScroll()
const series = ref<Chart[]>([{ data: [] }])
const key = ref<number>(0)
const cardItems = [banner1, banner2]
const main = ref(null)
const logoutLoading = ref(false)
const productInventorys = ref<PInventory[] | undefined>()
const value = ref<string>('a')
const items = ref<Fund[]>([])
const tableOutput = ref<TableOutput<Fund> | null>(null)
const inventory = ref<number>(0)
const sumGold = ref<number>(0)
const fundStore = useFundUserStore()

async function initTable() {
  try {
    loading.value = true
    tableOutput.value = fundStore.myFunds ?? await fundStore.getMyFund() ?? null
    items.value.push(...tableOutput.value?.rows ?? [])
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

onUnmounted(() => {
  stopPriceInterval()
})

/*
onMounted(() => {
  animateNum(2)
})
*/

const goldVal = ref<number | undefined>()

function openWholeBalanceVisible() {
  items.value.forEach(x => {
    if (x.title !== 'آبشده نقدی')
      inventory.value += x?.wallet?.gold ?? 0
  })
  wholeBalanceVisible.value = true
}

function sumOfGold() {
  items.value.forEach(x => {
    if (x.title !== 'آبشده نقدی')
      return sumGold.value += x?.wallet?.gold ?? 0
  })
}

function update() {
  setInterval(() => {
    goldVal.value = lastPrice?.value.price_last
  }, 500)
}

const target = ref(null)
const targetIsVisible = ref(false)

const isHidden = ref<boolean>(false)

const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
  targetIsVisible.value = isIntersecting
  console.log('saaaaa', targetIsVisible.value)
})

watch(main, (n) => {
  if (main.value !== null) {
    // console.log('saaaa')
    const echart = echarts.init(main.value, null, {
      renderer: 'candlestick'
    })
    echart.setOption({
      xAxis: {
        data: dates.value.values,
        show: true
      },
      yAxis: {
        show: false,
        scale: true
      },
      series: [
        {
          type: 'candlestick',
          data: series.value
        }
      ]
    })
  }
})

//whole prices
const priceChartSeries = ref<{ data: [number, number][] }[]>([
  {
    name: 'قیمت',
    data: []
  }
])
const selection = ref('DAILY')
const chartRef = ref<ApexCharts | null>(null)
const priceChartOptions = ref({
  chart: {
    id: 'نوسانات قیمت',
    type: 'candlestick',
    height: 200,
    toolbar: {
      show: false  // Disable the toolbar to remove download and other options
    },
    zoom: {
      autoScaleYaxis: true
    },
    events: {
      mounted(chart) {
        chartRef.value = chart
      }
    }
  },
  grid: {
    padding: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    yaxis: {
      lines: {
        show: false
      }
    }
  },
  stroke: {
    width: 2
  },
  dataLabels: {
    enabled: false,
    // formatter: (val) => toPersianNumber(val),
    style: {
      fontFamily: '\'IranSans\', sans-serif'
    }
  },
  yaxis: {
    tickAmount: 8,
    show: false,
    title: {
      style: {
        fontSize: '13px',
        fontFamily: '\'IranSans\', sans-serif',
        fontWeight: 'bold'
      }
    },
    labels: {
      formatter: (val) => toPersianNumber(usePrice(val)),
      style: {
        fontSize: '13px',
        fontFamily: '\'IranSans\', sans-serif'
      }
    }
  },
  xaxis: {
    show: false,
    type: 'datetime',
    axisTicks: {
      show: false
    },
    tooltip: {
      enabled: false
    },
    labels: {
      show: false,
      rotate: -45,
      style: {
        fontFamily: '\'IranSans\', sans-serif'
      }
      // formatter: (val) => toPersianNumber(toJalaliNotime(new Date(val).toString()))
    },
    axisBorder: {
      show: false
    }
  },
  tooltip: {
    x: {
      // formatter: (val) => toPersianNumber(toJalaliNotime(new Date(val).toString()))
      formatter: (value) => {
        const date = new Date(value)
        return `${date.toLocaleDateString('fa-IR')} - ${date.toLocaleTimeString('fa-IR', {
          hour: '2-digit',
          minute: '2-digit'
        })}`
      }
    },
    formatter: (val) => toPersianNumber(usePrice(val)),
    style: {
      fontFamily: '\'IranSans\', sans-serif'
      // fontWeight: 'bold'
    },
    markers: {
      show: false
    }
  },
  colors: ['#000000FF'],
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      stops: [0, 100]
    }
  }

})
const toPersianNumber = (num) => {
  return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
}
const fetchPrices = async () => {
  try {
    const response = await getAllPrices()
    const data = response.data?.prices
    const selectedData = data[selection.value] || []
    priceChartSeries.value[0].data = selectedData.map((item) => [item.timestamp, item.value - 1])
    // console.log(priceChartSeries.value[0].data)
    chartRef.value?.updateOptions({
      series: priceChartSeries.value
    })
  } catch (error) {
    console.error('خطا در دریافت داده‌ها', error)
  }
}

const updateData = (timeline) => {
  selection.value = timeline
  fetchPrices()
}

const limitedPrice = computed(() => {
  if (walletStore.limitedPrice) return walletStore?.limitedPrice[0]
})

const test_series = [
  {
    name: 'candle',
    data: []
  }
]

async function initChart() {
  try {
    // chartLoading.value = true
    const data = await getChart()
    /*    data.forEach(item => {
          test_series[0].data.push({
            x: toJalali(item[0]),
            y: item[1]
          })
          // console.log(x)
        })*/
    data.forEach((item) => {
      test_series[0].data.push({
        x: item[0],
        y: item[1]
      })
      // console.log(x)
    })
    // console.log(test_series)
  } catch (e) {
    console.log(e)
  } finally {
    // chartLoading.value = false
  }
}

async function initPrice() {
  try {
    // loading.value = true
    const val = price?.value?.price_last
    await getLastPrices()
    await getUpPrice()
    await setIntervalGetAllPrice()
    // console.log('runhome')
    if (val !== price?.value?.price_last) {
      update()
      /*      key.value++
            key.value++*/
    }
    /*    price.value = data
        lastPrice.value = dataLast*/
    goldVal.value = 0
    // console.log(price?.value.price_last)
    if (userStore.isFirst) {
      const timer = setInterval(function() {
        update()
        // if (current == end) {
        userStore.isFirst = false
        clearInterval(timer)
        // }
      }, 100)
    } else {
      goldVal.value = price.value?.price_last
    }
    // console.log(series.value)
  } catch (e) {
    console.log(e)
  } finally {
    // loading.value = false
  }
}

async function initProductInventory() {
  try {
    // loading.value = true

    // let { rows } = await getProductInventory()
    // fundStore.myFunds
    // productInventorys.value = fundStore.myFunds?.rows
    productInventorys.value = items.value.sort((a, b) => {
      if (a.wallet?.gold ?? 0 < b.wallet?.gold ?? 0)
        return -1
      if (a.wallet?.gold ?? 0 > b.wallet?.gold ?? 0)
        return 1
      return 0
    })
    // console.log(productInventorys.value)
  } catch (e) {
    console.log(e)
  } finally {
    // loading.value = false
  }
}

onMounted(async () => {
  try {
    loading.value = true
    await initTable()
    await initProductInventory()
    // await initChart()
    await initPrice()
    await fetchPrices()
    update()
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
})

onUnmounted(() => {
  stopPriceInterval()
  // console.log('okhome')
})


const showLogoutConfirm = ref<boolean>()

async function logout() {
  logoutLoading.value = true
  // baseConfirm('آیا از حساب کاربری خارج می شوید؟',async () => {
  userStore.userInfo = undefined
  walletStore.walletInfo = undefined
  /*  userStore.$reset()
  walletStore.$reset()*/
  removeToken()
  await router.push({ name: 'login' })
  logoutLoading.value = true
  window.location.reload()
  // console.log('salam')
  // })
}

async function openGoldModal() {
  Modal.confirm({
    title: `در این قسمت مجموع کل وزن طلای آبشده (${(walletStore.walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletStore.walletInfo?.count_gold_wallets ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`,
    okText: 'متوجه شدم',
    centered: true,
    cancelButtonProps: { style: { display: 'none' } },
  })
}

async function openRialModal() {
  Modal.confirm({
    title: `در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0) }) + معادل ریالی محصولات (${ usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`,
    okText: 'متوجه شدم',
    centered: true,
    cancelButtonProps: { style: { display: 'none' } },
  })
}
</script>

<style lang="less">

.odometer {
  font-size: 60px;
  //margin: 200px 0;
  text-align: center;
  width: 100%;
  animation-duration: 3s;
}

label:focus-within {
  box-shadow: none !important
}

.chart-container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
}

apexchart {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
</style>

<script setup lang="ts">
</script>