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

<template>
  <div class="">
    <!--    <div class="bg-primary h-30 mt-[-3rem] z-100000000000"></div>-->
    <div class="fixed h-[60vh] bg-[#0A1B37] w-screen">
      <div class="flex w-full justify-around mt-18">
        <div class="text-center">
          <div class="text-[#E5D7CE] text-xs ">موجودی کیف طلا</div>
          <div class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs">
            <div class="text-white text-lg">{{ walletStore?.walletInfo?.gold ?? 0 }}</div>
            گرم
          </div>
        </div>
        <div class="text-center">
          <div class="text-[#E5D7CE] text-xs ">سقف اعتبار خرید طلا</div>
          <div class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs">
            <div class="text-white text-lg">{{ userStore?.userInfo?.gram ?? 0 }}</div>
            گرم
          </div>
        </div>
        <div class="text-center">
          <div class="text-[#E5D7CE] text-xs ">موجودی کیف پول</div>
          <div class="flex justify-center mt-1 text-[#B79379] gap-1 items-center text-xs">
            <div class="text-white text-lg">
              {{ walletStore?.walletInfo?.cash === undefined ? 0 : usePriceWithoutType(walletStore.walletInfo?.cash) }}
            </div>
            ریال
          </div>
        </div>
      </div>
    </div>
    <div class="pt-[9rem] relative">
      <img :src="img" alt="" class="w-screen h-[8rem]">
      <!--      <div class="w-screen bg-white w-screen h-[calc(100vh-16rem-70px)] px-5">-->
      <div v-if="userStore.userInfo && !loading" class="bg-white w-screen h-fit px-5 m-[-1px]">
        <!--        <a-alert :message="``" type="warning" show-icon/>-->
        <!--        {{limitedPrice === undefined}}-->
        <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-gray-50 w-full flex justify-evenly rounded-lg py-2">
          <div class="text-center w-full">
            <div>قیمت خرید از گلد دات آی آر</div>
            <div class="text-[10px] text-gray-500">(هر گرم طلای 18 عیار)</div>
            <div class="flex w-full mt-3 justify-evenly">
              <!--              <div class="text-[10px] gap-1 flex bg-green-100 rounded-xl px-1 text-green-600 items-center">
                              <Icon icon="vuesax-linear:received" size="10"/>
                              <div>2%</div>
                            </div>-->
              <div v-if="price" class="flex text-gray-500 text-xs items-center gap-1">
                <div class="text-primary font-bold 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="text-[10px] text-gray-500">(هر گرم طلای 18 عیار)</div>
            <div class="flex w-full mt-3 justify-evenly">
              <!--              <div class="text-[10px] gap-1 flex bg-red-100 rounded-xl px-1 text-red-600 items-center">
                              <Icon icon="vuesax-linear:send" size="10"/>
                              <div>3%</div>
                            </div>-->
              <div v-if="price" class="flex text-gray-500 text-xs items-center gap-1">
                <div class="text-primary font-bold text-base">{{ usePriceWithoutType(price.sell ?? 0) }}</div>
                ریال
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-between mt-8">
          <div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
               @click="router.push({name:'gold', query:{state: 'sell'}})">
            <div class="rounded-full w-[42px] h-[42px] bg-orange-100 flex items-center justify-center">
              <Icon class="text-orange-600" icon="vuesax-linear:money-send"/>
            </div>
            <div class="text-primary">فروش</div>
          </div>
          <div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
               @click="router.push({name:'wallet', query:{state: 'deposit'}})">
            <div class="rounded-full w-[42px] h-[42px] bg-green-100 flex items-center justify-center">
              <Icon class="text-green-600" icon="vuesax-linear:card-add"/>
            </div>
            <div class="text-primary">واریز نقدی</div>
          </div>
          <div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
               @click="router.push({name:'gold', query:{state: 'buy'}})">
            <div class="rounded-full w-[42px] h-[42px] bg-blue-100 flex items-center justify-center">
              <Icon class="text-blue-600" icon="vuesax-linear:money-receive"/>
            </div>
            <div class="text-primary">خرید</div>
          </div>
          <div class="text-center w-full flex-flex-col items-center" style="text-align: -webkit-center"
               @click="router.push({name: 'fund'})">
            <div class="rounded-full w-[42px] h-[42px] bg-yellow-100 flex items-center justify-center">
              <Icon class="text-yellow-600" icon="vuesax-linear:archive-1"/>
            </div>
            <div class="text-primary">صندوق</div>
          </div>
        </div>
        <div class="mt-10 font-bold">نمودار نوسانات قیمت هر گرم طلای 18 عیار</div>
        <div class="w-full mt-2 relative bg-gray-100 rounded-lg h-[88px] flex flex-col justify-center">
          <img :src="img1" alt="" class="h-[88px] absolute">
          <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 class="font-bold text-2xl">{{ usePriceWithoutType(price.price_last ?? 0) }}</div>
              ریال
            </div>
          </div>
        </div>
        <div class="flex justify-around mt-8">
          <div v-if="lastPrice" class="flex flex-col items-center">
            <div class="text-xs">بالاترین قیمت خرید امروز</div>
            <div class="text-green-600 flex gap-1 text-xs items-center">
              <div class="text-base">{{ usePriceWithoutType(lastPrice.buy ?? 0) }}</div>
              ریال
            </div>
          </div>
          <div v-if="lastPrice" class="flex flex-col items-center">
            <div class="text-xs">بالاترین قیمت فروش امروز</div>
            <div class="text-red-600 flex gap-1 text-xs items-center">
              <div class="text-base">{{ usePriceWithoutType(lastPrice.sell ?? 0) }}</div>
              ریال
            </div>
          </div>

        </div>
        <a-spin :spinning="chartLoading">
          <!--          <div id="chart" class="pb-20 mt-7 overflow-x-auto">
                      &lt;!&ndash;            <apexchart :options="chartOptions" :series="series" :style="`width: ${chartWidth}`" height="350"
                                             type="candlestick"></apexchart>&ndash;&gt;
                      <div ref="main" class="w-full aspect-square"></div>
                    </div>-->
          <div class="overflow-x-auto pb-10">
            <div ref="main" :style="`width: ${chartWidth}`" class="h-[20rem]"></div>
          </div>
        </a-spin>
      </div>
      <div v-else class="bg-white w-screen h-[40vh] px-5 m-[-1px] flex justify-center">
        <a-spin :spinning="true"/>
      </div>
    </div>
    <div :class="y>130? 'bg-white shadow opacity-95': ''"
         class=" px-4 py-2 top-0 fixed w-screen 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="y>130? 'text-primary': 'text-white'" class="color-transition font-bold">
            {{ userStore.userInfo?.mobile }}
          </div>
        </div>
        <Icon :color="y>130? 'primary': 'white'" 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="p-5 text-sm">
          آیا از خروج خود اطمینان دارید؟
        </div>
      </template>

      <template v-slot:button>
        <div class="text-center text-red" @click="logout">
          خروج
        </div>
        <div class="text-center" @click="showLogoutConfirm = false">
          انصراف
        </div>
      </template>

    </DialogVant>
  </div>
</template>

<script lang="ts" 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 {usePriceWithoutType} from "../../../utils/usePrice";
import {computed, onMounted, ref, watch} from "vue";
import router from "@/router";
import * as echarts from 'echarts'

import {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 {getChart, getLastPrice, getPrice} from "@/api/home";


const userStore = useUserStore()
const walletStore = useWalletStore()
const chartLoading = ref<boolean>(false)
const {x, y} = useWindowScroll()
const series = ref<Array<Array<number>>>([])
const dates = ref<Array<string>>([])
const price = ref<Price>()
const lastPrice = ref<Price>()
const main = ref(null)

const upColor = '#ec0000';
const upBorderColor = '#8A0000';
const downColor = '#00da3c';
const downBorderColor = '#008F28';

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

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

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

const chartWidth = computed(() => {
  if (series.value.length < 30)
    return '100vw'
  else if (series.value.length < 60)
    return '200vw'
  else if (series.value.length < 90)
    return '300vw'
  else if (series.value.length < 120)
    return '400vw'
  else if (series.value.length < 160)
    return '500vw'
  else if (series.value.length < 190)
    return '600vw'
  else if (series.value.length < 210)
    return '700vw'
  else if (series.value.length < 240)
    return '800vw'
  else if (series.value.length < 270)
    return '900vw'
  else if (series.value.length < 300)
    return '1000vw'
  else if (series.value.length < 330)
    return '1100vw'
  else if (series.value.length < 360)
    return '1200vw'
  else if (series.value.length < 390)
    return '1300vw'
})

function splitData(rawData) {
  const categoryData = [];
  const values = [];
  for (var i = 0; i < rawData.length; i++) {
    categoryData.push(rawData[i].splice(0, 1)[0]);
    values.push(rawData[i]);
  }
  return {
    categoryData: categoryData,
    values: values
  };
}

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

async function initPrice() {
  try {
    loading.value = true
    const data = await getPrice()
    const dataLast = await getLastPrice()
    price.value = data
    lastPrice.value = dataLast
    console.log(series.value)
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  initChart()
  initPrice()
})

const chartOptions = ref(
    {
      chart: {
        type: 'candlestick',
        height: 600,
        toolbar: {
          autoSelected: 'pan',
          show: false
        },
      },
      title: {
        // text: 'CandleStick Chart',
        align: 'left'
      },
      xaxis: {
        type: 'datetime',
        labels: {
          show: false
        }
      },
      yaxis: {
        show: false,
        showAlways: false,
        showForNullSeries: false,
        tooltip: {
          enabled: true
        }
      }
    }
)


const showLogoutConfirm = ref<boolean>()

async function logout() {
  // baseConfirm('آیا از حساب کاربری خارج می شوید؟',async () => {
  removeToken()
  await router.push({name: 'login'})
  window.location.reload()
  // console.log('salam')
  // })
}

</script>

<style scoped>

</style>