boursecu_admin/src/pages/dashboard/index.vue

<template>
  <div class="dashboard-page box-border h-full min-h-0 w-full max-w-full overflow-x-hidden overflow-y-auto p-3 md:p-4 lg:p-5">
    <a-spin size="large" :spinning="loading" class="block min-w-0">
      <div
          class="dashboard-price-banner grid w-full min-w-0 gap-2 rounded-lg bg-[#0A1B37] p-3 shadow-lg sm:grid-cols-2 lg:flex lg:justify-evenly"
      >
        <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-white sm:col-span-2 lg:col-span-1">
          <span class="shrink-0">مظنه روز:</span>
          <span class="break-all font-bold">
            {{ usePrice(parseInt(dashboardInf?.price ?? '0'), true, '') }}
          </span>
          <span class="text-xs">ریال</span>
        </div>
        <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-white">
          <span>آخرین تاریخ به روز رسانی:</span>
        </div>
        <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-white">
          <span class="shrink-0">هر مثقال طلا:</span>
          <span class="break-all font-bold"></span>
          <span class="text-xs">ریال</span>
        </div>
      </div>
      <div class="mt-3 flex w-full min-w-0 flex-col gap-3 md:gap-4 lg:grid lg:grid-cols-7 lg:items-start">
        <BaseCard class="w-full min-w-0 lg:col-span-7">
          <div class="text-lg font-bold">مشتری</div>
          <div
              class="items-dashboard mt-3 flex h-full flex-col gap-2 lg:mt-5 lg:flex-row lg:justify-between lg:gap-0"
          >
            <DashboardItem
                class="lg:w-1/3"
                color="blue"
                title="مشتری جدید"
                unit="نفر"
                :count="dashboardInf?.new_customer_single"
            />
            <div class="hidden h-[60%] w-[1px] bg-gray-200 lg:block" />
            <DashboardItem
                class="lg:w-1/3"
                color="green"
                title="کل مشتریان"
                unit="نفر"
                :count="dashboardInf?.all_customer_single"
            />
            <div class="hidden h-[60%] w-[1px] bg-gray-200 lg:block" />
            <DashboardItem
                class="lg:w-1/3"
                color="orange"
                title="مشتریان بایگانی شده"
                unit="نفر"
                :count="dashboardInf?.archive_customer_single"
            />
          </div>
        </BaseCard>
        <BaseCard class="w-full min-w-0 lg:hidden">
          <div class="grid grid-cols-3 gap-1 text-xs">
            <div class="bg-blue-600 text-white rounded p-1">مجموع</div>
            <div class="bg-blue-600 text-white rounded p-1">ریال</div>
            <div class="bg-blue-600 text-white rounded p-1">گرم</div>
            <div class="bg-blue-600 text-white rounded p-1">کیف طلا</div>
            <div
                class="text-white rounded p-1"
                :class="
                sums?.goldToCash >= 0
                  ? sums?.goldToCash === 0
                    ? 'bg-amber-600'
                    : 'bg-green-600'
                  : 'bg-red-600'
              "
            >
              {{ usePrice(sums?.goldToCash ?? 0, true, '') }}
            </div>
            <div
                class="text-white rounded p-1"
                :class="
                sums?.gold >= 0
                  ? sums?.gold === 0
                    ? 'bg-amber-600'
                    : 'bg-green-600'
                  : 'bg-red-600'
              "
            >
              {{ usePrice(sums?.gold ?? 0, true, '') }}
            </div>
            <div class="bg-blue-600 text-white rounded p-1">کیف پول</div>
            <div
                class="text-white rounded p-1"
                :class="
                sums?.cash >= 0
                  ? sums?.cash === 0
                    ? 'bg-amber-600'
                    : 'bg-green-600'
                  : 'bg-red-600'
              "
            >
              {{ usePrice(sums?.cash ?? 0, true, '') }}
            </div>
            <div
                class="text-white rounded p-1"
                :class="
                sums?.cashToGold >= 0
                  ? sums?.cashToGold === 0
                    ? 'bg-amber-600'
                    : 'bg-green-600'
                  : 'bg-red-600'
              "
            >
              {{ usePrice(sums?.cashToGold ?? 0, true, '') }}
            </div>
          </div>
        </BaseCard>
        <BaseCard class="h-full w-full min-w-0 lg:col-span-7">
          <ASpin :spinning="tarazLoading">
            <div class="mt-2 grid min-w-0 gap-3 lg:grid-cols-3">
              <div class="min-w-0">
                <div class="flex w-full min-w-0 flex-col gap-3 rounded-lg bg-gray-100 p-3 lg:flex-row lg:items-end lg:p-2">
                  <p class="shrink-0 font-bold lg:mr-2">تاریخ تراز</p>
                  <div class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-3">
                    <p class="shrink-0 font-bold">از:</p>
                    <BaseDatePicker
                        v-model:value="startTaraz"
                        format="YYYY-MM-DD HH:mm:ss"
                        class="min-w-0 w-full flex-1"
                    />
                  </div>
                  <div class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-3">
                    <p class="shrink-0 font-bold">تا:</p>
                    <BaseDatePicker
                        v-model:value="endTaraz"
                        format="YYYY-MM-DD HH:mm:ss"
                        class="min-w-0 w-full flex-1"
                    />
                  </div>
                  <BaseButton class="w-full shrink-0 sm:w-auto" @click="getTaraz()">ثبت تاریخ</BaseButton>
                </div>

                <div class="flex flex-wrap items-center gap-2 p-2 font-bold">
                  <span>جمع واریزی : </span>
                  <div>{{ usePrice(balance_?.income_money ?? 0) }}</div>
                </div>
              </div>
              <div
                  class="flex flex-col gap-3 bg-yellow-100 p-2 rounded-lg w-full cursor-pointer"
                  @click="openNewTabBalance"
              >
                <span class="text-center text-base font-700 bg-yellow text-white rounded-lg">
                  تراز طلایی
                </span>
                <div class="flex flex-col items-stretch justify-between gap-3 lg:flex-row lg:items-center lg:gap-15">
                  <div class="flex w-full flex-col gap-3">
                    <div class="flex justify-between gap-2 px-2 lg:mx-5">
                      <span class="font-600">تراز اصلی:</span>
                      <span
                          class="text-base"
                          :class="
                          (balance_?.goldBalance ?? 0) > 0
                            ? 'text-green-600'
                            : (balance_?.goldBalance ?? 0) === 0
                            ? 'text-yellow-600'
                            : 'text-red'
                        "
                      >
                        {{ balance_?.goldBalance?.toFixed(3) }} گرم
                      </span>
                    </div>
                  </div>
                  <div></div>
                </div>
              </div>
              <div
                  class="flex flex-col gap-3 bg-blue-100 p-2 rounded-lg w-full cursor-pointer"
                  @click="openNewTabBalance"
              >
                <span class="text-center text-base font-700 bg-blue-6 rounded-lg text-white">
                  تراز ریالی
                </span>
                <div class="flex flex-col items-stretch justify-between gap-3 lg:flex-row lg:items-center lg:gap-15">
                  <div class="flex w-full flex-col gap-3">
                    <div class="flex justify-between gap-2 px-2 lg:mx-5">
                      <span class="font-600">تراز اصلی:</span>
                      <span
                          class="text-base"
                          :class="
                          (balance_?.cashBalance ?? 0) > 0
                            ? 'text-green-600'
                            : (balance_?.cashBalance ?? 0) === 0
                            ? 'text-yellow-600'
                            : 'text-red'
                        "
                      >
                        {{ usePrice(balance_?.cashBalance ?? 0) }}</span
                      >
                    </div>
                  </div>
                  <div></div>
                </div>
              </div>
            </div>
          </ASpin>
        </BaseCard>
        <!--        <BaseCard class="w-full md:w-none md:col-span-2">
                  <div class="text-lg font-bold">تراز بدهی</div>
                  <div ref="main" class="w-full aspect-square"></div>
                </BaseCard>-->

        <!--        <BaseCard class="md:col-span-5">
                  <div id="chart">
                    <div class="font-bold text-lg mt-2 text-center md:text-right mb-2">مقایسه قیمت ها</div>
                    <apexchart
                      type="bar"
                      height="350"
                      :options="otherPricesOptions"
                      :series="otherPricesSeries"
                    />
                  </div>
                  <div>
                    <div class="md:grid grid-cols-4 gap-4 mt-4 justify-between text-center">
                      <div class="grid-cols-1 grid gap-2 bg-blue-100 rounded-lg shadow-lg">
                        <div class="flex items-center text-right p-2">
                          <img src="/src/assets/img/garosyLogo_.png" class="w-2rem h-2rem" />
                          <div class="mr-4">
                            <div>قیمت گروسی</div>
                            <div>
                              {{ usePrice(othersPrices?.price_last ? othersPrices?.price_last : 0) }}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="grid-cols-1 grid gap-2 bg-red-100 rounded-lg shadow-lg">
                        <div class="flex items-center text-right p-2">
                          <img src="/src/assets/img/milliLogo.png" class="w-2rem h-2rem" />
                          <div class="mr-4">
                            <div>قیمت سایت میلی</div>
                            <div>{{ usePrice(othersPrices?.milli ? othersPrices?.milli : 0) }}</div>
                          </div>
                        </div>
                      </div>
                      <div class="grid-cols-1 grid gap-2 bg-green-100 rounded-lg shadow-lg">
                        <div class="flex items-center text-right p-2">
                          <img src="/src/assets/img/henzaLogo.png" class="w-2rem h-2rem" />
                          <div class="mr-4">
                            <div>قیمت سایت هنزا</div>
                            <div>{{ usePrice(othersPrices?.henzagold ? othersPrices?.henzagold : 0) }}</div>
                          </div>
                        </div>
                      </div>
                      <div class="grid-cols-1 grid gap-2 bg-orange-100 rounded-lg shadow-lg">
                        <div class="flex items-center text-right p-2">
                          <img src="/src/assets/img/talaLogo.png" class="w-2rem h-2rem" />
                          <div class="mr-4">
                            <div>قیمت سایت طلا</div>
                            <div>{{ usePrice(othersPrices?.tala_ir ? othersPrices?.tala_ir : 0) }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </BaseCard>-->

        <!--        <div class="md:col-span-7 md:grid gap-4">-->
        <!--          <BaseCard>
                    <div class=" ">
                      <div class="flex flex-col md:flex-row justify-between items-center">
                        <div class="flex items-end">
                          <div class="text-2xl font-bold ml-2">{{ usePrice(123456789123, true, '') }}</div>
                          <div class="text-lg">تومان</div>
                        </div>
                        <div>
                          <div
                            class="flex bg-gray-50 px-1 py-1 dashboard-tabs-class border-size-[1px] border-gray-200 border-solid rounded-lg"
                          >
                            <div :class="type === 'week' ? 'selected_item' : ''" @click="setType('week')">
                              هفتگی
                            </div>
                            <div :class="type === 'month' ? 'selected_item' : ''" @click="setType('month')">
                              ماهانه
                            </div>
                            <div :class="type === 'year' ? 'selected_item' : ''" @click="setType('year')">
                              سالانه
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="mb-10">جمع فروش به مشتری</div>
                    <apexchart
                      type="area"
                      height="350"
                      ref="chart"
                      :options="sumOfSellCoworkerOption"
                      :series="sumOfSellCoworkerSeries"
                    ></apexchart>
                  </BaseCard>-->
        <BaseCard class="w-full min-w-0 lg:col-span-7">
          <div class="mt-2 text-center text-lg font-bold lg:text-right">
            حسابداری گلد در یک نگاه
          </div>
          <div class="mt-4 flex flex-col gap-3 lg:mt-6 lg:flex-row">
            <div class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-3">
              <p class="shrink-0">از:</p>
              <BaseDatePicker
                  v-model:value="startDate"
                  @on-change="getTaraz"
                  format="YYYY-MM-DD HH:mm:ss"
                  class="min-w-0 w-full flex-1"
              />
            </div>
            <div class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-baseline sm:gap-3">
              <p class="shrink-0 lg:mr-6">تا:</p>
              <BaseDatePicker
                  v-model:value="endDate"
                  @on-change="getTaraz"
                  format="YYYY-MM-DD HH:mm:ss"
                  class="min-w-0 w-full flex-1"
              />
            </div>
          </div>
          <div class="grid-cols-1 grid gap-2 rounded-lg bg-green-100 shadow-lg">
            <div class="p-3 lg:p-4">
              <div class="text-lg font-bold">دریافتی</div>
              <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5 lg:gap-2">
                <div>
                  <div>کل سود دریافت شده</div>
                  <div class="font-bold">{{ usePrice(balance?.fullPriceSood ?? 0) }}</div>
                </div>
                <div>
                  <div>کل کارمزد</div>
                  <div class="font-bold">{{ usePrice(balance?.fullPriceKaermozd ?? 0) }}</div>
                </div>
                <div>
                  <div>تعداد سفارشات</div>
                  <div class="font-bold">{{ balance?.orderCount }}</div>
                </div>
                <div>
                  <div class="ml-2">قیمت نهایی محاسبه شده با روش اول</div>
                  <div class="font-bold">{{ usePrice(balance?.fullPriceM1 ?? 0) }}</div>
                </div>
                <div>
                  <div class="ml-2">قیمت نهایی محاسبه شده با روش دوم</div>
                  <div class="font-bold">{{ usePrice(balance?.fullPriceM2 ?? 0) }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="mt-4 flex-col rounded-lg bg-red-100 p-3 shadow-lg lg:flex-row lg:p-4">
            <div class="text-lg font-bold">خروجی</div>
            <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:gap-4">
              <div>
                <div>پاداش معرفی به گرم</div>
                <div class="font-bold">{{ balance?.Gifts }}</div>
              </div>
              <div>
                <div>پاداش معرفی به ریال</div>
                <div class="font-bold">{{ usePrice(balance?.GiftsPrise ?? 0) }}</div>
              </div>
            </div>
          </div>
          <div
              class="mt-4 flex-col rounded-lg bg-blue-100 p-3 shadow-lg lg:flex-row lg:justify-evenly lg:p-4"
          >
            <div>
              <div class="font-bold text-lg">قیمت کل</div>
              <div class="flex mt-4">
                <div class="ml-4">کل درآمد :</div>
                <div class="font-bold">{{ usePrice(balance?.sumAll ?? 0) }}</div>
              </div>
            </div>
          </div>
        </BaseCard>
        <BaseCard class="w-full min-w-0 lg:col-span-7">
          <div>
            <div class="mt-2 text-center text-lg font-bold lg:text-right">نوسانات قیمت</div>
            <div id="chart" class="min-w-0">
              <div class="dashboard-chart-toolbar mt-2 mb-2 text-center lg:text-right">
                <button
                    id="DAILY"
                    @click="updateData('DAILY')"
                    :class="{ active: selection === 'DAILY' }"
                >
                  24 ساعت اخیر
                </button>

                <button
                    id="WEEKLY"
                    @click="updateData('WEEKLY')"
                    :class="{ active: selection === 'WEEKLY' }"
                >
                  هفته گذشته
                </button>

                <button
                    id="MONTHLY"
                    @click="updateData('MONTHLY')"
                    :class="{ active: selection === 'MONTHLY' }"
                >
                  ماه گذشته
                </button>
              </div>

              <div id="chart-timeline" class="min-w-0 overflow-hidden">
                <apexchart
                    type="area"
                    :height="chartHeight"
                    ref="chart"
                    :options="priceChartOptions"
                    :series="priceChartSeries"
                ></apexchart>
              </div>
            </div>
          </div>
        </BaseCard>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { openNewTabBalance} from '@/core/composable/appInfo'
import nothing from './assets/svgs/nothing.svg'
import { usePrice } from '../../core/utils/usePrice'
import DashboardItem from '@/pages/dashboard/components/dashboardItem.vue'
import * as echarts from 'echarts'
import { getAllPrices, getDashboard } from '@/api/dashboard'
import { getOthersPrices } from '@/api/othersPrices'
import type { Charts, Dashboard } from '@/model/dashboard'
import { getWalletTable } from '@/api/wallet'
import type { Accounting } from '@/model/accounting'
import { getAccountingTable } from '@/api/accounting'
import { ref } from 'vue'
import type { OthersPrices } from '@/model/othersPrices'
import { getNow, toJalaliNoTime } from '@core/utils/useDataTime'
import type { Balance } from '@/model/product'
import { getBalance } from "@/api/product";
import { isLargeScreen } from '@core/utils/responsive'

const chartHeight = computed(() => (isLargeScreen.value ? 350 : 280))
const tarazLoading = ref<boolean>(false)
const main = ref(null)
const type = ref<string>('week')
const dashboardInf = ref<Dashboard>()
const othersPrices = ref<OthersPrices>()
const chartDataWeekInf = reactive<Charts>({})
const chartDataMonthInf = reactive<Charts>({})
const chartDataYearInf = reactive<Charts>({})
const loading = ref<boolean>(false)
const sums = ref()
const startDate = ref<string>('')
const endDate = ref<string>('')
const balance = ref<Accounting>()
const startTaraz = ref<string>('')
const endTaraz = ref<string>('')
const balance_ = ref<Balance>()

onMounted(() => {
  startDate.value = ''
  endDate.value = ''
  startTaraz.value = getNow('YYYY-MM-DD HH:mm:ss')
  endTaraz.value = getNow('YYYY-MM-DD HH:mm:ss')
  getDate()
  getTaraz()
})

async function getDate() {
  try {
    loading.value = true
    balance.value = await getAccountingTable(startDate.value, endDate.value)
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}



async function getTaraz() {
  try {
    loading.value = true
    balance.value = await getAccountingTable(startDate.value, endDate.value)
    balance_.value = await getBalance(startTaraz.value, endTaraz.value)
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

//chart other prices
function setType(val: string) {
  type.value = val
}

//chart 1
onMounted(async () => {
  try {
    loading.value = true
    dashboardInf.value = await getDashboard()
    const data = await getWalletTable()
    sums.value = data?.sums
    // chartDataWeekInf.buySellChart =
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
  if (main.value !== null) {
    //circle
    const echart = echarts.init(main.value, null, {
      renderer: 'canvas'
    })
    echart.setOption({
      tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
      },
      textStyle: {
        fontFamily: 'iran-sans'
      },
      series: [
        {
          name: 'تراز',
          type: 'gauge',
          detail: {
            formatter: '{value}',
            offsetCenter: [0, '60%'],
            fontSize: 40,
            color: '#EF4444',
            valueAnimation: true
          },
          min: -50,
          max: 50,
          data: [
            {
              value: 10.25,
              name: 'گرم'
            }
          ],
          axisLine: {
            roundCap: true,
            lineStyle: {
              color: [[1, '#2563EB']],
              width: 10
            }
          },
          axisLabel: {
            fontSize: 16
          },
          title: {
            color: '#000000',
            offsetCenter: [0, '75%']
          }
        }
      ]
    })
  }
})

//chart 4
const sumOfSellCoworkerSeries = [
  {
    name: 'series1',
    data: [31, 40, 28, 51, 42, 109, 100]
  }
]

const sumOfSellCoworkerOption = {
  chart: {
    height: 350,
    type: 'area'
  },
  colors: ['#2563EB'],
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'smooth'
  },
  xaxis: {
    type: 'datetime',
    categories: [
      '2018-09-19T00:00:00.000Z',
      '2018-09-19T01:30:00.000Z',
      '2018-09-19T02:30:00.000Z',
      '2018-09-19T03:30:00.000Z',
      '2018-09-19T04:30:00.000Z',
      '2018-09-19T05:30:00.000Z',
      '2018-09-19T06:30:00.000Z'
    ]
  },
  tooltip: {
    x: {
      format: 'dd/MM/yy HH:mm'
    }
  },
  fill: {
    type: 'gradient',
    colors: ['#765DFF'],
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      stops: [0, 100]
    }
  }
}
// const priceChartSeries = ref([{name: 'قیمت', data: []}])
// const priceChartOptions = ref({
//   chart: {
//     type: 'line',
//     height: 350,
//     zoom: {enabled: true}
//   },
//   dataLabels: {enabled: false},
//   stroke: {curve: 'smooth'},
//   title: {text: 'نمودار قیمت بر اساس تاریخ', align: 'left'},
//   xaxis: {
//     categories: [],
//     title: {text: 'تاریخ'}
//   },
//   yaxis: {
//     title: {text: 'قیمت'},
//     min: 0
//   }
// })

const otherPricesSeries = ref([])
const otherPricesOptions = ref({
  chart: {
    height: 350,
    type: 'bar',
    fontFamily: "'IranSans', sans-serif"
  },
  plotOptions: {
    bar: {
      borderRadius: 10,
      dataLabels: {
        position: 'top'
      }
    }
  },
  dataLabels: {
    enabled: true,
    formatter: (val) => `${usePrice(val)} `,
    style: {
      fontFamily: "'IranSans', sans-serif",
      fontWeight: 'bold'
    }
  },
  yaxis: {
    title: {
      text: 'قیمت',
      style: {
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    },
    labels: {
      formatter: (val) => `${usePrice(val)} `,

      style: {
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    }
  },
  xaxis: {
    categories: ['henzagold.com', 'milli.gold', 'tala.ir', 'gold.ir'],
    labels: {
      style: {
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    }
  },
  tooltip: {
    y: {
      formatter: (val) => `${usePrice(val)} `,
      style: {
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    }
  }
})

onMounted(async () => {
  try {
    loading.value = true
    othersPrices.value = await getOthersPrices()

    const prices = [
      othersPrices.value?.henzagold ?? 0,
      othersPrices.value?.milli ?? 0,
      othersPrices.value?.tala_ir ?? 0,
      othersPrices.value?.price_last ?? 0
    ]

    otherPricesSeries.value = [
      {
        name: 'Prices',
        data: prices
      }
    ]
    const minPrice = Math.min(...prices)
    const maxPrice = Math.max(...prices)
    const offset = (maxPrice - minPrice) * 0.05

    otherPricesOptions.value = {
      ...otherPricesOptions.value,
      yaxis: {
        ...otherPricesOptions.value.yaxis,
        min: minPrice - offset,
        max: maxPrice + offset
      }
    }
  } catch (e) {
    console.error('Error fetching prices:', e)
  } finally {
    loading.value = false
  }
})
const selection = ref('DAILY')
const chartRef = ref<ApexCharts | null>(null)
const priceChartSeries = ref<{ data: [number, number][] }[]>([{ data: [] }])

const toPersianNumber = (num) => {
  return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
}

const priceChartOptions = ref({
  chart: {
    id: 'نوسانات قیمت',
    type: 'area',
    height: 350,
    zoom: {
      autoScaleYaxis: true
    },
    events: {
      mounted(chart) {
        chartRef.value = chart
      }
    }
  },
  dataLabels: {
    enabled: false,
    formatter: (val) => toPersianNumber(usePrice(val)),
    style: {
      fontSize: '13px',
      fontFamily: "'IranSans', sans-serif",
      fontWeight: 'bold'
    }
  },
  yaxis: {
    title: {
      style: {
        fontSize: '13px',
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    },
    labels: {
      formatter: (val) => toPersianNumber(usePrice(val)),
      style: {
        fontSize: '13px',
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    }
  },
  xaxis: {
    type: 'datetime',
    labels: {
      rotate: -45,
      style: {
        fontSize: '13px',
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      },
      formatter: (val) => {
        return toPersianNumber(toJalaliNoTime(new Date(val).toString()))
      }
    }
  },
  tooltip: {
    x: {
      formatter: (val) => {
        return toPersianNumber(toJalaliNoTime(new Date(val).toString()))
      }
    },
    formatter: (val) => toPersianNumber(`${usePrice(val)} `),
    style: {
      fontFamily: "'IranSans', sans-serif",
      fontWeight: 'bold'
    }
  },
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      stops: [0, 100]
    }
  }
})

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])

    chartRef.value?.updateOptions({ series: priceChartSeries.value })
  } catch (error) {
    console.error('خطا در دریافت داده‌ها', error)
  }
}

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

onMounted(() => {
  fetchPrices()
})
</script>

<style lang="less">
/*.items-dashboard > div:not(:last-child) {
  border-left: 1px solid black;
}*/
.single-border {
  border-right: 1px solid black !important;
}

@keyframes swingParent {
  from {
    transform: translateX(0);
    left: 0;
  }
  to {
    left: 100%;
    transform: translateX(-100%);
  }
}

.animate.right {
  right: 0;
}

.animate.right.move {
  right: 100%;
  transform: translate(100%, 0);
}

.dashboard-tabs-class div {
@apply text-gray-400 w-25 text-center py-2 cursor-pointer;
}

.selected_item {
  background: #2563eb !important;
  color: #fff !important;
  border-radius: 0.5rem;
}

.dashboard-chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;

  button {
    border: 1px solid var(--admin-border-strong);
    border-radius: 0.5rem;
    background: var(--admin-bg-elevated);
    color: var(--admin-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;

    &.active,
    &:hover {
      background: #2563eb;
      border-color: #2563eb;
      color: #fff;
    }
  }
}

@media (min-width: 1024px) {
  .dashboard-chart-toolbar {
    justify-content: flex-start;

    button {
      font-size: 0.875rem;
    }
  }
}

.dashboard-page :deep(.ant-card) {
  min-width: 0;
}

.dashboard-page :deep(.ant-picker) {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

//chart
</style>