first

zzzz

2024-04-21 3f3e2d5977787b0c6e09cd5cba7b41e5fb7d3fd0

 src/page/TtrendDetails/index.vue

@@ -1,7 +1,7 @@
<template>
    <div class="trend-detail pb-90 mainBackground">
        <!-- 头部 -->
        <!-- <div class="w-full h-88 flex items-center justify-between px-32 box-border">
  <div class="trend-detail pb-90 mainBackground">
    <!-- 头部 -->
    <!-- <div class="w-full h-88 flex items-center justify-between px-32 box-border">
            <div class="flex items-center w-full" @click="onRoute('/quotes?active=3')">
                <img src="@/assets/image/assets-center/convert.png" class="w-38 h-38" />
                <p class="font-38 font-600 ml-10">{{quote.name}}</p>
@@ -13,138 +13,228 @@
                    @click="goHistory" />
            </div>
        </div> -->
        <trade-head @openRecord="openRecord" :backFunc="() => $router.push('/')" :symbol="symbol" :islevel="true"
            @update-coin="onUpdate" @data="quote = $event" :title="$t('永续')" @changeLine="onChangeLine" :isReturn="isReturn"
            :kineType="kineType" :tabIndex="tab" />
        <div class="flex justify-between px-32 pt-40" v-if="!kineType">
            <div class="w-368 h-80 mr-32 flex justify-center items-center rounded box-border tabBtn"
                :class="tab === '1' ? 'activeBtn' : ''" @click="onTab('1')">{{ $t('永续合约') }}</div>
            <div class="w-368 h-80 flex justify-center items-center rounded box-border tabBtn"
                :class="tab === '2' ? 'activeBtn' : ''" @click="onTab('2')">{{ $t('交割合约') }}</div>
    <trade-head
      @openRecord="openRecord"
      :backFunc="() => $router.push('/')"
      :symbol="symbol"
      :islevel="true"
      @update-coin="onUpdate"
      @data="quote = $event"
      :title="$t('永续')"
      @changeLine="onChangeLine"
      :isReturn="isReturn"
      :kineType="kineType"
      :tabIndex="tab"
    />
    <div class="flex justify-between px-32 pt-40" v-if="!kineType">
      <div
        class="w-368 h-80 mr-32 flex justify-center items-center rounded box-border tabBtn"
        :class="tab === '1' ? 'activeBtn' : ''"
        @click="onTab('1')"
      >
        {{ $t("永续合约") }}
      </div>
      <div
        class="w-368 h-80 flex justify-center items-center rounded box-border tabBtn"
        :class="tab === '2' ? 'activeBtn' : ''"
        @click="onTab('2')"
      >
        {{ $t("交割合约") }}
      </div>
    </div>
    <!-- 数据区 -->
    <div :class="{ slide2: animated1, slide1: animated2 }">
      <div>
        <div class="flex flex-1 px-32 mt-40">
          <div class="flex flex-col font-22">
            <p
              class="font-70 font-600"
              :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'"
            >
              {{ quote.close || "--" }}
            </p>
            <p class="font-22 mt-10 textColor">
              ≈ {{ currency.currency_symbol
              }}{{
                quote.close
                  ? (quote.close * currency.rate).toFixed(
                      quote.close.toString().split(".")[1]
                        ? quote.close.toString().split(".")[1].length
                        : 2
                    )
                  : "--"
              }}
              <span :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'"
                >{{
                  quote.change_ratio || (quote.change_ratio === 0 ? 0 : "--")
                }}%</span
              >
            </p>
            <p class="text-grey mt-10">
              {{ $t("标记价格") }} {{ quote.open || "--" }}
            </p>
          </div>
          <div class="flex flex-wrap flex-1 justify-end font-22">
            <div class="flex w-1/2 flex-col justify-between w-177">
              <p class="text-grey">{{ $t("24h最高价") }}</p>
              <p class="textColor">{{ quote.high || "--" }}</p>
            </div>
            <div class="flex w-1/2 flex-col justify-between w-177">
              <p class="text-grey">
                {{ $t("24h成交量") }}( {{ symbol | _symbolName() }})
              </p>
              <p class="textColor">
                {{ fixDate(quote.amount * 1, $i18n) || "--" }}
              </p>
            </div>
            <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
              <p class="text-grey">{{ $t("24h最低价") }}</p>
              <p class="textColor">{{ quote.low || "--" }}</p>
            </div>
            <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
              <p class="text-grey">{{ $t("24h成交额(USDT)") }}</p>
              <p class="textColor">
                {{ (quote.volume * 1).toFixed(2) || "--" }}
              </p>
            </div>
          </div>
        </div>
        <!-- 数据区 -->
        <div :class="{ slide2: animated1, slide1: animated2 }">
            <div>
                <div class="flex flex-1 px-32 mt-40">
                    <div class="flex flex-col font-22">
                        <p class="font-70 font-600" :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'">
                            {{ quote.close || '--' }}</p>
                        <p class="font-22 mt-10 textColor">≈ {{ currency.currency_symbol }}{{ quote.close ? (quote.close *
                            currency.rate).toFixed(quote.close.toString().split('.')[1] ?
                                quote.close.toString().split('.')[1].length : 2) : '--' }}
                            <span :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'">{{ quote.change_ratio
                                || (quote.change_ratio === 0 ? 0 : '--') }}%</span>
                        </p>
                        <p class="text-grey mt-10">{{ $t('标记价格') }} {{ quote.open || '--' }}</p>
                    </div>
                    <div class="flex flex-wrap flex-1 justify-end font-22">
                        <div class="flex w-1/2 flex-col justify-between w-177">
                            <p class="text-grey">{{ $t('24h最高价') }}</p>
                            <p class="textColor">{{ quote.high || '--' }}</p>
                        </div>
                        <div class="flex w-1/2 flex-col justify-between w-177">
                            <p class="text-grey">{{ $t('24h成交量') }}({{ symbol && symbol.toUpperCase() || '--' }})</p>
                            <p class="textColor">{{ fixDate(quote.amount * 1, $i18n) || '--' }}</p>
                        </div>
                        <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
                            <p class="text-grey">{{ $t('24h最低价') }}</p>
                            <p class="textColor">{{ quote.low || '--' }}</p>
                        </div>
                        <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
                            <p class="text-grey">{{ $t('24h成交额(USDT)') }}</p>
                            <p class="textColor">{{ (quote.volume * 1).toFixed(2) || '--' }}</p>
                        </div>
                    </div>
                </div>
      </div>
      <!-- k line-->
      <div class="mt-35 h-482-px">
        <kline-charts
          :update-key="updateKey"
          :update-data="quote"
          :isChangeLine="isChangeLine"
          :symbol="symbol"
          v-if="symbol"
          @updataLine="isChangeLine = false"
        />
      </div>
      <div class="w-full h-20 greyBg"></div>
      <!-- tab 区域-->
      <div class="pb-180 tabContent">
        <van-tabs v-model="active">
          <van-tab :title="$t('委托订单')" name="1">
            <div class="flex px-32 justify-between px-32">
              <ul class="flex flex-col flex-1 mr-20">
                <li class="font-28 text-grey mt-30 mb-15 w-full">
                  <p>{{ $t("买入") }}</p>
                  <p class="flex justify-between items-cener font-22">
                    <span style="margin-right: -10px"
                      >{{ $t("价格") }}(USDT)</span
                    >
                    <span>{{ $t("数量") }}({{ symbol | _symbolName(1) }})</span>
                  </p>
                </li>
                <li
                  v-for="(item, index) in bids"
                  :key="index"
                  class="flex justify-between font-26 py-15"
                  :style="{
                    background:
                      `linear-gradient(to left,${
                        theme == 'dark' ? '#121212' : '#ffffff'
                      } 0% ` +
                      (item.amount / bids[bids.length - 1].amount) * 100 +
                      '%,rgba(94,186,137,.1) ' +
                      (item.amount / bids[bids.length - 1].amount) * 100 +
                      '%,rgba(94,186,137,.1) 100%)',
                  }"
                >
                  <span class="textColor">{{ item.price || "--" }}</span>
                  <span v-if="symbol == 'shib'" class="text-green">{{
                    fixDate(item.amount, $i18n) || "--"
                  }}</span>
                  <span v-else class="text-green">{{
                    item.amount || "--"
                  }}</span>
                </li>
              </ul>
              <ul class="flex-1 flex flex-col ml-20">
                <li class="font-28 text-grey mt-30 mb-15 w-full">
                  <p>{{ $t("卖出") }}</p>
                  <p class="flex justify-between items-center font-22">
                    <span class="-ml-5">{{ $t("价格") }}(USDT)</span>
                    <span>{{ $t("数量") }}({{ symbol | _symbolName() }})</span>
                  </p>
                </li>
                <li
                  v-for="(item, index) in asks"
                  :key="index"
                  class="flex justify-between font-26 py-15"
                  :style="{
                    background:
                      `linear-gradient(to left,${
                        theme == 'dark' ? '#121212' : '#ffffff'
                      } 0% ` +
                      (item.amount / asks[asks.length - 1].amount) * 100 +
                      '%,rgba(246,70,93,.1) ' +
                      (item.amount / asks[asks.length - 1].amount) * 100 +
                      '%,rgba(246,70,93,.1) 100%)',
                  }"
                >
                  <span class="textColor">{{ item.price || "--" }}</span>
                  <span v-if="symbol == 'shib'" class="text-red">{{
                    fixDate(item.amount, $i18n) || "--"
                  }}</span>
                  <span v-else class="text-red">{{ item.amount || "--" }}</span>
                </li>
              </ul>
            </div>
            <!-- k line-->
            <div class="mt-35 h-482-px">
                <kline-charts :update-key="updateKey" :update-data="quote" :isChangeLine="isChangeLine" :symbol="symbol"
                    v-if="symbol" @updataLine="isChangeLine = false" />
          </van-tab>
          <van-tab :title="$t('最新交易')" name="2">
            <ul class="px-32 font-28 text-grey">
              <li class="flex justify-between mt-30">
                <span class="flex-1">{{ $t("时间") }}</span>
                <span class="flex-1">{{ $t("方向") }}</span>
                <span class="flex-1">{{ $t("价格") }}(USDT)</span>
                <span class="flex-1 flex justify-center"
                  >{{ $t("数量") }}({{ symbol.toUpperCase() }})</span
                >
              </li>
              <li
                v-for="(item, index) in deals"
                :key="item.ts + item.price + item.amount || index"
                class="flex justify-between mt-30"
              >
                <span class="flex-1">{{
                  item.current_time ? item.current_time : "--"
                }}</span>
                <span
                  :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
                  class="flex-1"
                  >{{
                    item.direction === "buy" ? $t("买入") : $t("卖出")
                  }}</span
                >
                <span
                  :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
                  class="flex-1 flex-justify-center"
                  >{{ item.price || "--" }}</span
                >
                <span class="flex-1 flex justify-center">{{
                  item.amount || "--"
                }}</span>
              </li>
            </ul>
          </van-tab>
          <van-tab :title="$t('深度图')" name="3">
            <div class="buy-sell-box">
              <div class="buy-item">
                <div class="bg-line"></div>
                {{ $t("买盘") }}
              </div>
              <div class="sell-item">
                <div class="bg-line"></div>
                {{ $t("卖盘") }}
              </div>
            </div>
            <div class="w-full h-20 greyBg"></div>
            <!-- tab 区域-->
            <div class="pb-180 tabContent">
                <van-tabs v-model="active">
                    <van-tab :title="$t('委托订单')" name="1">
                        <div class="flex px-32 justify-between px-32">
                            <ul class="flex flex-col flex-1 mr-20">
                                <li class="font-28 text-grey mt-30 mb-15 w-full">
                                    <p>{{ $t('买入') }}</p>
                                    <p class="flex justify-between items-cener font-22">
                                        <span style="margin-right: -10px;">{{ $t('价格') }}(USDT)</span>
                                        <span>{{ $t('数量') }}({{ symbol.toUpperCase() }})</span>
                                    </p>
                                </li>
                                <li v-for="(item, index) in bids" :key="index" class="flex justify-between font-26 py-15"
                                    :style="{
                                        'background': `linear-gradient(to left,${theme == 'dark' ? '#121212' : '#ffffff'} 0% ` +
                                            (item.amount / bids[bids.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) ' +
                                            (item.amount / bids[bids.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) 100%)'
                                    }">
                                    <span class="textColor">{{ item.price || '--' }}</span>
                                    <span v-if="symbol == 'shib'" class="text-green">{{ fixDate(item.amount, $i18n) ||
                                        '--' }}</span>
                                    <span v-else class="text-green">{{ item.amount || '--' }}</span>
                                </li>
                            </ul>
                            <ul class="flex-1 flex flex-col ml-20">
                                <li class="font-28 text-grey mt-30 mb-15 w-full">
                                    <p>{{ $t('卖出') }}</p>
                                    <p class="flex justify-between items-center font-22">
                                        <span class="-ml-5">{{ $t('价格') }}(USDT)</span>
                                        <span>{{ $t('数量') }}({{ symbol.toUpperCase() }})</span>
                                    </p>
                                </li>
                                <li v-for="(item, index) in asks" :key="index" class="flex justify-between font-26 py-15"
                                    :style="{
                                        'background': `linear-gradient(to left,${theme == 'dark' ? '#121212' : '#ffffff'} 0% ` +
                                            (item.amount / asks[asks.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) ' +
                                            (item.amount / asks[asks.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) 100%)'
                                    }">
                                    <span class="textColor">{{ item.price || '--' }}</span>
                                    <span v-if="symbol == 'shib'" class="text-red">{{ fixDate(item.amount, $i18n) ||
                                        '--' }}</span>
                                    <span v-else class="text-red">{{ item.amount || '--' }}</span>
                                </li>
                            </ul>
                        </div>
                    </van-tab>
                    <van-tab :title="$t('最新交易')" name="2">
                        <ul class="px-32 font-28 text-grey">
                            <li class="flex justify-between mt-30">
                                <span class="flex-1">{{ $t('时间') }}</span>
                                <span class="flex-1">{{ $t('方向') }}</span>
                                <span class="flex-1">{{ $t('价格') }}(USDT)</span>
                                <span class="flex-1 flex justify-center">{{ $t('数量') }}({{ symbol.toUpperCase() }})</span>
                            </li>
                            <li v-for="(item, index) in deals" :key="item.ts + item.price + item.amount || index"
                                class="flex  justify-between mt-30">
                                <span class="flex-1">{{ item.current_time ? item.current_time : '--' }}</span>
                                <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'" class="flex-1">{{
                                    item.direction === 'buy' ? $t('买入') : $t('卖出') }}</span>
                                <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
                                    class="flex-1 flex-justify-center">{{ item.price || '--' }}</span>
                                <span class="flex-1 flex justify-center">{{ item.amount || '--' }}</span>
                            </li>
                        </ul>
                    </van-tab>
                    <van-tab :title="$t('深度图')" name="3">
                        <div class="buy-sell-box">
                            <div class="buy-item">
                                <div class="bg-line"></div>
                                {{ $t('买盘') }}
                            </div>
                            <div class="sell-item">
                                <div class="bg-line"></div>
                                {{ $t('卖盘') }}
                            </div>
                        </div>
                        <div class="deep-chart-box">
                            <deep-chart :deepBuy="deepBuy" :deepSell="deepSell"></deep-chart>
                        </div>
                    </van-tab>
                    <!-- <van-tab :title="$t('数据分析')" name="4">
            <div class="deep-chart-box">
              <deep-chart :deepBuy="deepBuy" :deepSell="deepSell"></deep-chart>
            </div>
          </van-tab>
          <!-- <van-tab :title="$t('数据分析')" name="4">
                        <div class="capital-box">
                            <div class="capital-flows">
                                <span class="title">资金流向分析</span><van-icon name="warning-o" />
@@ -187,7 +277,7 @@
                            </div>
                        </div>
                    </van-tab> -->
                    <!-- <van-tab :title="$t('币种简介')" name="3" class="border-t-color" v-if="this.$te(`${symbol}简介`)">
          <!-- <van-tab :title="$t('币种简介')" name="3" class="border-t-color" v-if="this.$te(`${symbol}简介`)">
                        <div class="px-20 py-20 font-40 text-grey">
                            {{ $t('关于名称', { 'symbol': symbol.toUpperCase() }) }}
                        </div>
@@ -195,662 +285,715 @@
                            {{ $t(`${symbol}简介`, { 'symbol': symbol.toUpperCase() }) }}
                        </div>
                    </van-tab> -->
                </van-tabs>
            </div>
            <!-- 按钮区 -->
            <div class="flex pl-40 pt-11 pb-11 pr-32 text-white justify-between  fixed bottom-108  w-full box-border h-90-px z-10 buttonSafe"
                v-if="!kineType" :class="theme == 'dark' ? 'bg-night1' : 'bg-grey'">
                <div class="flex flex-col mx-30 items-center" @click="onRoute('/exchangeRate')">
                    <img src="@/assets/image/icon-rate.png" class="w-38 h-38" />
                    <p class="font-25 text-grey mt-8 text-center">{{ $t('汇率') }}</p>
                </div>
                <div ref="toBuy" class="w-270 h-88 bg-green flex justify-center items-center rounded-lg"
                    @click="onSubmit('buy')">
                    {{ tab == 1 ? $t('开多') : $t('买多') }}
                </div>
                <div ref="toSell" class="w-270 h-88 bg-red flex justify-center items-center rounded-lg"
                    @click="onSubmit('sell')">
                    {{ tab == 1 ? $t('开空') : $t('买空') }}</div>
            </div>
        </van-tabs>
      </div>
      <!-- 按钮区 -->
      <div
        class="flex pl-40 pt-11 pb-11 pr-32 text-white justify-between fixed bottom-108 w-full box-border h-90-px z-10 buttonSafe"
        v-if="!kineType"
        :class="theme == 'dark' ? 'bg-night1' : 'bg-grey'"
      >
        <div
          class="flex flex-col mx-30 items-center"
          @click="onRoute('/exchangeRate')"
        >
          <img src="@/assets/image/icon-rate.png" class="w-38 h-38" />
          <p class="font-25 text-grey mt-8 text-center">{{ $t("汇率") }}</p>
        </div>
        <van-popup v-model="show" class="rounded-2xl" :key="initFutrue.session_token">
            <popup-confirm-order :paras="initFutrue.para" :symbol="symbol" :direction="direction"
                :balance="initFutrue.amount" :price="quote.close" @close="onClose" @confirm="onOrderConfirm"
                v-if="popType === 'confirm'" />
            <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
                @continueToBuy="order()" @timeEnd="handleTimeEnd" :price="quote.close" v-else />
        </van-popup>
        <div
          ref="toBuy"
          class="w-270 h-88 bg-green flex justify-center items-center rounded-lg"
          @click="onSubmit('buy')"
        >
          {{ tab == 1 ? $t("开多") : $t("买多") }}
        </div>
        <div
          ref="toSell"
          class="w-270 h-88 bg-red flex justify-center items-center rounded-lg"
          @click="onSubmit('sell')"
        >
          {{ tab == 1 ? $t("开空") : $t("买空") }}
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      class="rounded-2xl"
      :key="initFutrue.session_token"
    >
      <popup-confirm-order
        :paras="initFutrue.para"
        :symbol="symbol"
        :direction="direction"
        :balance="initFutrue.amount"
        :price="quote.close"
        @close="onClose"
        @confirm="onOrderConfirm"
        v-if="popType === 'confirm'"
      />
      <popup-delivery
        showBtns
        :detailData="detailData"
        :key="detailData.order_no"
        @close="onClose"
        @continueToBuy="order()"
        @timeEnd="handleTimeEnd"
        :price="quote.close"
        v-else
      />
    </van-popup>
  </div>
</template>
<script>
import { Tab, Tabs, Popup } from 'vant';
import TradeHead from '@/components/trade-head/index.vue'
import KlineCharts from '@/components/kline-charts'
import deepChart from '@/components/deepChart'
import pieChart from '@/components/pieChart'
import inflowKline from '@/components/inflow-kline'
import cylinderChart from '@/components/cylinderChart'
import { _getHomeList, _collect, _deleteCollect } from '@/API/home.api'
import { _getBalance, _futrueOrder, _futrueOrderInit, _futrueOrderDetail } from '@/API/trade.api'
import { mapGetters } from 'vuex';
import { Tab, Tabs, Popup } from "vant";
import TradeHead from "@/components/trade-head/index.vue";
import KlineCharts from "@/components/kline-charts";
import deepChart from "@/components/deepChart";
import pieChart from "@/components/pieChart";
import inflowKline from "@/components/inflow-kline";
import cylinderChart from "@/components/cylinderChart";
import { _getHomeList, _collect, _deleteCollect } from "@/API/home.api";
import {
  _getBalance,
  _futrueOrder,
  _futrueOrderInit,
  _futrueOrderDetail,
} from "@/API/trade.api";
import { mapGetters } from "vuex";
import { fixDate } from "@/utils/utis";
import { WS_URL } from '@/config';
import { WS_URL } from "@/config";
import PopupDelivery from "@/components/popup-delivery";
import PopupConfirmOrder from '@/components/popup-confirm-order'
import PopupConfirmOrder from "@/components/popup-confirm-order";
export default {
    name: 'TrendDetails',
    components: {
        [Tabs.name]: Tabs,
        [Tab.name]: Tab,
        [Popup.name]: Popup,
        KlineCharts,
        PopupDelivery,
        PopupConfirmOrder,
        TradeHead,
        deepChart,
        pieChart,
        inflowKline,
        cylinderChart
    },
    data() {
        const arr = []
        for (let i = 0; i < 17; i++) {
            arr.push({
                id: i
            })
        }
        return {
            show: false,
            direction: 'buy',
            initFutrue: {},
            detailData: {},
            price: '',
            popType: 'confirm', // confirm / counting
            fixDate,
            tab: '1', // 顶部标签
            symbol: '',
            quoteData: [],
            quote: {},
            active: 1,
            asks: arr, // 卖
            bids: arr, // 买
            deals: arr, // 交易
            sockets: {
                quote: null,
                deals: null,
                askBid: null
            },
            animated1: false,
            animated2: false,
            updateKey: 1,
            collected: '0',  // 是否自选
            maxSell: 0, // 卖单最大
            maxBuy: 0, // 买单最大
            order_no: '',
            timer: null,
            isChangeLine: false,
            isReturn: true, //是否有返回
            kineType: '',
            // updateData: {}
            deepBuy: [],
            deepSell: [],
            fromPath: ''
        }
    },
    computed: {
        ...mapGetters({
            currency: 'home/currency',
            userInfo: 'user/userInfo',
            theme: 'home/theme'
        })
    },
    mounted() {
        //this.continueOrder()
        this.kineType = this.$route.query.kineType;

    },
    created() {

    },
    watch: {
        active(val) { // tab切换
            if (val / 1 === 1 || val / 1 === 3) {
                this.sockets.deals && this.sockets.deals.close()
                this.sockets.deals = null
                if (this.symbol) { // 刚进来可能是null
                    this.startAskBidSocket()
                }
            } else {
                this.sockets.askBid && this.sockets.askBid.close()
                this.sockets.askBid = null
                this.startDealsSocket()
            }
        },
        symbol() {
            this.closeSocket()
        }


    },
    methods: {
        onChangeLine() {
            this.isChangeLine = true
        },
        continueOrder() {
            let direction = this.$route.query.direction
            if (direction) {
                this.symbol = this.$route.params.symbol
                this.tab = '2'
                console.log(this.tab)
                this.onSubmit(direction);
            }
        },
        order() {
            this.onSubmit(this.direction);
        },
        onTab(e) {
            this.tab = e
            // this.$router.go()
            if (e == 1) {
                this.animated1 = true
                this.timer = setTimeout(() => {
                    this.animated1 = false
                    clearTimeout(this.timer)
                }, 200)
            } else {
                this.animated2 = true
                this.timer = setTimeout(() => {
                    this.animated2 = false
                    clearTimeout(this.timer)
                }, 200)
            }
        },

        onCollect() { // 收藏，取消收藏
            let _api = _collect
            if (this.collected === '1') {
                _api = _deleteCollect
            }
            _api(this.symbol).then(() => {
                this.collected = this.collected === '1' ? '0' : '1'
                if (this.collected === '1') {
                    this.$toast.success(this.$t('收藏成功'))
                } else {
                    this.$toast.success(this.$t('取消收藏'))
                }
            })
        },
        goHistory() {
            const url = this.topIndex / 1 === 1 ? 'perpetualHistory' : 'deliveryContractHistory'
            this.$router.push({
                path: `/${url}?symbol=${this.symbol}`
            });
        },
        fetchData() {
            this.closeSocket()
            _getHomeList(this.symbol).then(data => {
                // console.log(data[0])
                this.quote = data[0]
                this.$nextTick(() => {
                    if (!this.sockets.quote && this.symbol) {
                        this.startQuoteScoket()
                    }

                    if ((this.tab === '1' || this.tab === '3') && !this.sockets.askBid && this.symbol) {
                        this.startAskBidSocket()
                    }
                })
                // this.startDealsSocket()
            })
        },
        startQuoteScoket() {
            this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`)
            this.sockets.quote.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    this.quote = _data[0]
                    let str = _data[0] ? _data[0].close.toString() : ''
                    if (str.indexOf('.') != -1) {
                        this.coinLength = str.split('.')[1].length
                    }
                    this.updateKey++
                }
            }
        },
        startAskBidSocket() { // 委托
            this.sockets.askBid = new WebSocket(`${WS_URL}/3/${this.symbol}`)
            this.sockets.askBid.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    let { asks, bids } = _data
                    this.deepBuy = bids
                    this.deepSell = asks
                    asks = asks.sort((prev, next) => prev.price - next.price)
                    bids = bids.sort((prev, next) => prev.price - next.price)
                    this.asks = asks.slice(0, 17)
                    this.bids = bids.reverse().slice(0, 17)
                }
            }
        },
        startDealsSocket() { // 交易
            this.sockets.deals = new WebSocket(`${WS_URL}/2/${this.symbol}`)
            this.sockets.deals.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    this.deals = _data.data.slice(0, 17)
                }
            }
        },
        onRoute(path) { // 跳转汇率页面
            this.$router.push(path)
        },
        onSubmit(direction) { // TODO: 返回
            if (this.tab === '2') {
                this.popType = 'confirm'
                this.direction = direction
                _futrueOrderInit(this.symbol).then(data => {
                    this.initFutrue = data
                    this.show = true
                })
                return
            } else {
                let currentType = direction == 'buy' ? 'long' : 'short'
                this.$router.push(`/perpetualContract/${this.symbol}?currentType=${currentType}`)
            }
        },
        onClose() {
            this.show = false
        },
        handleTimeEnd() {
            _futrueOrderDetail(this.order_no).then(data => {
                clearTimeout(this.timeout)
                this.detailData = data
                if (data.state !== 'created') {
                    this.timeout = setTimeout(() => {
                        this.handleTimeEnd()
                    }, 1000)
                }
            })
        },
        onOrderConfirm(e) { // 确认订单
            _futrueOrder({ ...e, symbol: this.symbol, direction: this.direction, session_token: this.initFutrue.session_token }).then(data => {
                // console.log(data)
                this.order_no = data.order_no
                _getBalance().then(data => { // 刷新余额
                    this.$store.commit('user/SET_USERINFO', { balance: data.money })
                })
                _futrueOrderDetail(data.order_no).then(data => {
                    this.detailData = data
                    this.popType = ''
                })
            }).catch(() => {
                setTimeout(() => {
                    _futrueOrderInit(this.symbol).then(data => {
                        this.order_no = ''
                        this.initFutrue = data
                    })
                }, 1000);
            })
        },
        closeSocket() {
            this.sockets.quote && this.sockets.quote.close()
            this.sockets.deals && this.sockets.deals.close()
            this.sockets.askBid && this.sockets.askBid.close()
            this.sockets.quote = null
            this.sockets.deals = null
            this.sockets.askBid = null
        },
        onUpdate(symbol) { // 更新
            this.closeSocket()
            this.symbol = symbol;
            this.fetchData()
        },
        openRecord() {
            if (this.fromPath == 'Trade') {
                this.$router.push('/tradeRecord/' + this.symbol)
            } else {
                this.$router.push('/perpetualHistory?symbol=' + this.symbol)
            }
            console.log(this.fromPath)
        }
    },
    activated() {
        // if (!this.sockets.quote && this.symbol) {
        //     this.startQuoteScoket()
        // }
        // if (this.tab === '1' && !this.sockets.askBid && this.symbol) {
        //     this.startAskBidSocket()
        // }
        if (!this.symbol) {
            this.symbol = this.$route.params.symbol
            this.fetchData()
            this.closeSocket()
        }
        if (this.tab === '2' && !this.sockets.deals && this.symbol) {
            this.startDealsSocket()
        }
        this.continueOrder()
        this.kineType = this.$route.query.kineType
    },
    deactivated() {
        this.closeSocket()
    },
    beforeDestroy() {
        this.sockets.quote && this.sockets.quote.close()
        this.sockets.deals && this.sockets.deals.close()
        this.sockets.askBid && this.sockets.askBid.close()
        this.sockets.quote = null
        this.sockets.deals = null
        this.sockets.askBid = null
    },
    beforeRouteEnter(to, from, next) {
        const { params: { symbol } } = to
        console.log(symbol)
        next(vm => {
            vm.fromPath = from.name
            vm.symbol = symbol
            vm.closeSocket()
            vm.fetchData()
        })
  name: "TrendDetails",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Popup.name]: Popup,
    KlineCharts,
    PopupDelivery,
    PopupConfirmOrder,
    TradeHead,
    deepChart,
    pieChart,
    inflowKline,
    cylinderChart,
  },
  data() {
    const arr = [];
    for (let i = 0; i < 17; i++) {
      arr.push({
        id: i,
      });
    }
}
    return {
      show: false,
      direction: "buy",
      initFutrue: {},
      detailData: {},
      price: "",
      popType: "confirm", // confirm / counting
      fixDate,
      tab: "1", // 顶部标签
      symbol: "",
      quoteData: [],
      quote: {},
      active: 1,
      asks: arr, // 卖
      bids: arr, // 买
      deals: arr, // 交易
      sockets: {
        quote: null,
        deals: null,
        askBid: null,
      },
      animated1: false,
      animated2: false,
      updateKey: 1,
      collected: "0", // 是否自选
      maxSell: 0, // 卖单最大
      maxBuy: 0, // 买单最大
      order_no: "",
      timer: null,
      isChangeLine: false,
      isReturn: true, //是否有返回
      kineType: "",
      // updateData: {}
      deepBuy: [],
      deepSell: [],
      fromPath: "",
    };
  },
  computed: {
    ...mapGetters({
      currency: "home/currency",
      userInfo: "user/userInfo",
      theme: "home/theme",
    }),
  },
  mounted() {
    //this.continueOrder()
    this.kineType = this.$route.query.kineType;
  },
  created() {},
  watch: {
    active(val) {
      // tab切换
      if (val / 1 === 1 || val / 1 === 3) {
        this.sockets.deals && this.sockets.deals.close();
        this.sockets.deals = null;
        if (this.symbol) {
          // 刚进来可能是null
          this.startAskBidSocket();
        }
      } else {
        this.sockets.askBid && this.sockets.askBid.close();
        this.sockets.askBid = null;
        this.startDealsSocket();
      }
    },
    symbol() {
      this.closeSocket();
    },
  },
  methods: {
    onChangeLine() {
      this.isChangeLine = true;
    },
    continueOrder() {
      let direction = this.$route.query.direction;
      if (direction) {
        this.symbol = this.$route.params.symbol;
        this.tab = "2";
        console.log(this.tab);
        this.onSubmit(direction);
      }
    },
    order() {
      this.onSubmit(this.direction);
    },
    onTab(e) {
      this.tab = e;
      // this.$router.go()
      if (e == 1) {
        this.animated1 = true;
        this.timer = setTimeout(() => {
          this.animated1 = false;
          clearTimeout(this.timer);
        }, 200);
      } else {
        this.animated2 = true;
        this.timer = setTimeout(() => {
          this.animated2 = false;
          clearTimeout(this.timer);
        }, 200);
      }
    },

    onCollect() {
      // 收藏，取消收藏
      let _api = _collect;
      if (this.collected === "1") {
        _api = _deleteCollect;
      }
      _api(this.symbol).then(() => {
        this.collected = this.collected === "1" ? "0" : "1";
        if (this.collected === "1") {
          this.$toast.success(this.$t("收藏成功"));
        } else {
          this.$toast.success(this.$t("取消收藏"));
        }
      });
    },
    goHistory() {
      const url =
        this.topIndex / 1 === 1
          ? "perpetualHistory"
          : "deliveryContractHistory";
      this.$router.push({
        path: `/${url}?symbol=${this.symbol}`,
      });
    },
    fetchData() {
      this.closeSocket();
      _getHomeList(this.symbol).then((data) => {
        // console.log(data[0])
        this.quote = data[0];
        this.$nextTick(() => {
          if (!this.sockets.quote && this.symbol) {
            this.startQuoteScoket();
          }

          if (
            (this.tab === "1" || this.tab === "3") &&
            !this.sockets.askBid &&
            this.symbol
          ) {
            this.startAskBidSocket();
          }
        });
        // this.startDealsSocket()
      });
    },
    startQuoteScoket() {
      this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`);
      this.sockets.quote.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          this.quote = _data[0];
          let str = _data[0] ? _data[0].close.toString() : "";
          if (str.indexOf(".") != -1) {
            this.coinLength = str.split(".")[1].length;
          }
          this.updateKey++;
        }
      };
    },
    startAskBidSocket() {
      // 委托
      this.sockets.askBid = new WebSocket(`${WS_URL}/3/${this.symbol}`);
      this.sockets.askBid.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          let { asks, bids } = _data;
          this.deepBuy = bids;
          this.deepSell = asks;
          asks = asks.sort((prev, next) => prev.price - next.price);
          bids = bids.sort((prev, next) => prev.price - next.price);
          this.asks = asks.slice(0, 17);
          this.bids = bids.reverse().slice(0, 17);
        }
      };
    },
    startDealsSocket() {
      // 交易
      this.sockets.deals = new WebSocket(`${WS_URL}/2/${this.symbol}`);
      this.sockets.deals.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          this.deals = _data.data.slice(0, 17);
        }
      };
    },
    onRoute(path) {
      // 跳转汇率页面
      this.$router.push(path);
    },
    onSubmit(direction) {
      // TODO: 返回
      if (this.tab === "2") {
        this.popType = "confirm";
        this.direction = direction;
        _futrueOrderInit(this.symbol).then((data) => {
          this.initFutrue = data;
          this.show = true;
        });
        return;
      } else {
        let currentType = direction == "buy" ? "long" : "short";
        this.$router.push(
          `/perpetualContract/${this.symbol}?currentType=${currentType}`
        );
      }
    },
    onClose() {
      this.show = false;
    },
    handleTimeEnd() {
      _futrueOrderDetail(this.order_no).then((data) => {
        clearTimeout(this.timeout);
        this.detailData = data;
        if (data.state !== "created") {
          this.timeout = setTimeout(() => {
            this.handleTimeEnd();
          }, 1000);
        }
      });
    },
    onOrderConfirm(e) {
      // 确认订单
      _futrueOrder({
        ...e,
        symbol: this.symbol,
        direction: this.direction,
        session_token: this.initFutrue.session_token,
      })
        .then((data) => {
          // console.log(data)
          this.order_no = data.order_no;
          _getBalance().then((data) => {
            // 刷新余额
            this.$store.commit("user/SET_USERINFO", { balance: data.money });
          });
          _futrueOrderDetail(data.order_no).then((data) => {
            this.detailData = data;
            this.popType = "";
          });
        })
        .catch(() => {
          setTimeout(() => {
            _futrueOrderInit(this.symbol).then((data) => {
              this.order_no = "";
              this.initFutrue = data;
            });
          }, 1000);
        });
    },
    closeSocket() {
      this.sockets.quote && this.sockets.quote.close();
      this.sockets.deals && this.sockets.deals.close();
      this.sockets.askBid && this.sockets.askBid.close();
      this.sockets.quote = null;
      this.sockets.deals = null;
      this.sockets.askBid = null;
    },
    onUpdate(symbol) {
      // 更新
      this.closeSocket();
      this.symbol = symbol;
      this.fetchData();
    },
    openRecord() {
      if (this.fromPath == "Trade") {
        this.$router.push("/tradeRecord/" + this.symbol);
      } else {
        this.$router.push("/perpetualHistory?symbol=" + this.symbol);
      }
      console.log(this.fromPath);
    },
  },
  activated() {
    // if (!this.sockets.quote && this.symbol) {
    //     this.startQuoteScoket()
    // }
    // if (this.tab === '1' && !this.sockets.askBid && this.symbol) {
    //     this.startAskBidSocket()
    // }
    if (!this.symbol) {
      this.symbol = this.$route.params.symbol;
      this.fetchData();
      this.closeSocket();
    }
    if (this.tab === "2" && !this.sockets.deals && this.symbol) {
      this.startDealsSocket();
    }
    this.continueOrder();
    this.kineType = this.$route.query.kineType;
  },
  deactivated() {
    this.closeSocket();
  },
  beforeDestroy() {
    this.sockets.quote && this.sockets.quote.close();
    this.sockets.deals && this.sockets.deals.close();
    this.sockets.askBid && this.sockets.askBid.close();
    this.sockets.quote = null;
    this.sockets.deals = null;
    this.sockets.askBid = null;
  },
  beforeRouteEnter(to, from, next) {
    const {
      params: { symbol },
    } = to;
    console.log(symbol);
    next((vm) => {
      vm.fromPath = from.name;
      vm.symbol = symbol;
      vm.closeSocket();
      vm.fetchData();
    });
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/init.scss";


@keyframes animate1 {
    0% {
        opacity: 1;
        transform: translate3d(100%, 0, 0);
    }
  0% {
    opacity: 1;
    transform: translate3d(100%, 0, 0);
  }

    //   40% {
    //      opacity: 1;
    //     transform: translate3d(50%, 0, 0);
    //   }
    100% {
        opacity: 1;
        transform: translate3d(0%, 0, 0);
    }
  //   40% {
  //      opacity: 1;
  //     transform: translate3d(50%, 0, 0);
  //   }
  100% {
    opacity: 1;
    transform: translate3d(0%, 0, 0);
  }
}

@keyframes animate2 {
    0% {
        opacity: 1;
        transform: translate3d(-100%, 0, 0);
    }
  0% {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
  }

    //   40% {
    //      opacity: 1;
    //     transform: translate3d(50%, 0, 0);
    //   }
    100% {
        opacity: 1;
        transform: translate3d(0%, 0, 0);
    }
  //   40% {
  //      opacity: 1;
  //     transform: translate3d(50%, 0, 0);
  //   }
  100% {
    opacity: 1;
    transform: translate3d(0%, 0, 0);
  }
}

.slide1 {
    animation: animate1 200ms linear;
  animation: animate1 200ms linear;
}

.slide2 {
    animation: animate2 200ms linear;
  animation: animate2 200ms linear;
}

.tabBtn {
    border: 2px solid #EAEDF2;
    border-radius: 9px;
    color: #868D9A;
    ;
  border: 2px solid #eaedf2;
  border-radius: 9px;
  color: #868d9a;
}

.activeBtn {
    @include themify() {
        background: themed("btn_main");
    }
  @include themify() {
    background: themed("btn_main");
  }

    color: #fff;
    border: none;
  color: #fff;
  border: none;
}

.pb-180 {
    ::v-deep .van-tab {
        flex: initial;
        padding: 0 32px;
    }
  ::v-deep .van-tab {
    flex: initial;
    padding: 0 32px;
  }

    ::v-deep .van-tab__text--ellipsis {
        padding: 14px 0;
    }
  ::v-deep .van-tab__text--ellipsis {
    padding: 14px 0;
  }

    ::v-deep .van-tabs__line {
        width: 160px;
    }
  ::v-deep .van-tabs__line {
    width: 160px;
  }
}

.buttonSafe {
    bottom: calc(constant(safe-area-inset-bottom));
    bottom: calc(env(safe-area-inset-bottom));
  bottom: calc(constant(safe-area-inset-bottom));
  bottom: calc(env(safe-area-inset-bottom));
}


.trend-detail {
    .tabBtn {
        @include themify() {
            border: 2px solid themed("border_color");
        }
  .tabBtn {
    @include themify() {
      border: 2px solid themed("border_color");
    }
  }

    ::v-deep .van-tabs__nav {
        @include themify() {
            background: themed("main_background") !important;
        }
  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("main_background") !important;
    }
  }

    ::v-deep .van-tab--active {
        @include themify() {
            color: themed("text_color");
        }
  ::v-deep .van-tab--active {
    @include themify() {
      color: themed("text_color");
    }
  }

    ul li {
        @include themify() {
            background: themed("main_background");
        }
  ul li {
    @include themify() {
      background: themed("main_background");
    }
  }

    .activeBtn {
        border: none !important;
    }

  .activeBtn {
    border: none !important;
  }
}


.deep-chart-box {
    padding-left: 30px;
    overflow: hidden;
  padding-left: 30px;
  overflow: hidden;
}

.capital-box {
    padding: 30px 30px;
  padding: 30px 30px;

    .capital-flows {
        display: flex;
        align-items: center;
  .capital-flows {
    display: flex;
    align-items: center;

        .title {
            color: #ECF0F8;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
            display: flex;
        }
    .title {
      color: #ecf0f8;
      font-size: 16px;
      font-weight: bold;
      margin-right: 10px;
      display: flex;
    }
  }

  .tab-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;

    .tab-item {
      padding: 15px 22px;
      background: #171a27;
      border-radius: 2px;
      color: #ffffff;
      font-size: 30px;
      margin-right: 30px;
      margin-bottom: 20px;
      font-size: 14px;
    }
  }

  .pie-box {
    background: #161d2b;
    padding: 50px 0;
  }

  .order-box {
    border: 1px dashed #3c3f55;
    border-radius: 3px;
    margin-top: 20px;
    color: #c5cbd8;

    .order-header {
      display: flex;
    }

    .tab-box {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
    .flex-item {
      flex: 1;
      text-align: center;
      padding: 20px 0;
    }
  }

        .tab-item {
            padding: 15px 22px;
            background: #171A27;
            border-radius: 2px;
            color: #FFFFFF;
            font-size: 30px;
            margin-right: 30px;
            margin-bottom: 20px;
            font-size: 14px;
        }
  .capital-title {
    padding-top: 30px;

    .title {
      color: #ecf0f8;
      font-size: 30px;
      font-weight: bold;
      margin-right: 10px;
    }

    .pie-box {
        background: #161D2B;
        padding: 50px 0;
    .text {
      color: #c5cbd8;
      font-size: 14px;
      margin-top: 10px;
    }

    .order-box {
        border: 1px dashed #3C3F55;
        border-radius: 3px;
        margin-top: 20px;
        color: #C5CBD8;

        .order-header {
            display: flex;
        }

        .flex-item {
            flex: 1;
            text-align: center;
            padding: 20px 0;

        }
    }

    .capital-title {
        padding-top: 30px;

        .title {
            color: #ECF0F8;
            font-size: 30px;
            font-weight: bold;
            margin-right: 10px;
        }

        .text {
            color: #C5CBD8;
            font-size: 14px;
            margin-top: 10px;
        }
    }
  }
}

.buy-sell-box {
  display: flex;
  justify-content: center;
  margin: 30px 0px;

  .buy-item {
    display: flex;
    justify-content: center;
    margin: 30px 0px;

    .buy-item {
        display: flex;

        @include themify() {
            color: themed("text_color");
        }

        .bg-line {
            width: 40px;
            height: 40px;
            background: #D9001B;
            border-radius: 5px;
            margin-right: 10px;
        }
    @include themify() {
      color: themed("text_color");
    }

    .sell-item {
        margin-left: 30px;
        display: flex;

        @include themify() {
            color: themed("text_color");
        }

        .bg-line {
            width: 40px;
            height: 40px;
            background: #2EBD85;
            border-radius: 5px;
            margin-right: 10px;
        }
    .bg-line {
      width: 40px;
      height: 40px;
      background: #d9001b;
      border-radius: 5px;
      margin-right: 10px;
    }
  }

  .sell-item {
    margin-left: 30px;
    display: flex;

    @include themify() {
      color: themed("text_color");
    }

    .bg-line {
      width: 40px;
      height: 40px;
      background: #2ebd85;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
}

.bg-white {
    .capital-flows {
        display: flex;
        align-items: center;
  .capital-flows {
    display: flex;
    align-items: center;

        .title {
            color: #000;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
            display: flex;
        }
    .title {
      color: #000;
      font-size: 16px;
      font-weight: bold;
      margin-right: 10px;
      display: flex;
    }
  }

  .tab-box {
    .tab-item {
      background: #f7f8fa;
      color: #000;
      font-size: 14px;
    }
  }

  .pie-box {
    background: #fff;
    padding: 50px 0;
  }

  .order-box {
    border: 1px dashed #000;
    border-radius: 3px;
    margin-top: 20px;
    color: #000;
  }

  .capital-title {
    padding-top: 30px;

    .title {
      color: #000;
      font-size: 30px;
      font-weight: bold;
      margin-right: 10px;
    }


    .tab-box {
        .tab-item {
            background: #f7f8fa;
            color: #000;
            font-size: 14px;
        }
    .text {
      color: #000;
      font-size: 14px;
      margin-top: 10px;
    }

    .pie-box {
        background: #fff;
        padding: 50px 0;
    }

    .order-box {
        border: 1px dashed #000;
        border-radius: 3px;
        margin-top: 20px;
        color: #000;
    }

    .capital-title {
        padding-top: 30px;

        .title {
            color: #000;
            font-size: 30px;
            font-weight: bold;
            margin-right: 10px;
        }

        .text {
            color: #000;
            font-size: 14px;
            margin-top: 10px;
        }
    }
  }
}

::v-deep .van-popup {
    @include themify() {
        background: themed("main_background");
    }
  @include themify() {
    background: themed("main_background");
  }
}

.tabContent {
    ::v-deep .van-tabs__wrap {
        height: 100% !important;
    }
  ::v-deep .van-tabs__wrap {
    height: 100% !important;
  }
}
</style>