feat

lxf

2025-04-18 66a33e936d39ec4db7fdffed5d646e044ccc43e9

 src/components/perpetual-open/index.vue

@@ -1,108 +1,114 @@
<template>
  <!-- 永续合约开仓页 -->
  <div class="perpetual-open">
    <div class="flex header-open">
      <div class="flex flex-1 pt-34">
        <div class="w-180 h-60 lh-60 text-center rounded inputBackground textColor">
          {{ $t("全仓") }}
        </div>
        <!-- <div class="w-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</div> -->
        <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
          <div @click="showOptions = !showOptions" style="height: 100%; box-sizing: border-box"
            class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center">
            {{ form.lever_rate }}x
            <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
            <div v-if="showOptions" class="options w-140 absolute top-97 left-0 z-10">
              <div class="w-full" @click.stop="handleChoose(item)" :class="{
   <!-- 永续合约开仓页 -->
   <div class="perpetual-open">
      <div class="flex header-open">
         <div class="flex flex-1 pt-34">
            <div class="w-180 h-60 lh-60 text-center rounded inputBackground textColor">
               {{ $t("全仓") }}
            </div>
            <!-- <div class="w-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</div> -->
            <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
               <div @click="showOptions = !showOptions" style="height: 100%; box-sizing: border-box"
                  class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center">
                  {{ form.lever_rate }}x
                  <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
                  <div v-if="showOptions" class="options w-140 absolute top-97 left-0 z-10">
                     <div class="w-full" @click.stop="handleChoose(item)" :class="{
                'option-active': form.lever_rate === item.lever_rate,
              }" :value="item.lever_rate" v-for="item in initData.lever" :key="item.id">
                {{ item.lever_rate }}x
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" />
      </div>
    </div>
    <div class="pt-30 pb-20">
      <div class="flex">
        <div class="w-440 flex flex-col">
          <template v-if="selectIndex == 1">
            <div class="flex items-center h-66 rounded-lg text-grey">
              <p class="font-28 flex-1 flex items-center justify-center h-66 "
                :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
                {{ $t("开多") }}
              </p>
              <p class="font-28 flex-1 flex items-center justify-center h-66"
                :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
                {{ $t("开空") }}
              </p>
            </div>
            <div class="mt-30 mb-30" style="position: relative">
              <div class="inputBackground flex justify-between items-center w-full h-76 rounded-lg textColor"
                @click="selectBtn">
                <img src="../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20" />
                <div class="text-center" style="width: 80%">{{ title }}</div>
                <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
              </div>
              <div class="option-box" v-show="isShow">
                <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </template>
          <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" />
          <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
            v-if="selectIndex == 1">
            <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg"
              :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
            <span class="ml-20">USDT</span>
          </div>
        <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
          v-if="selectIndex == 1">
          <input :placeholder="selectIndex == 1 ? $t('请输入止盈金额'): ''" class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
             v-model="form.stop_price_profit" />
          <span class="font-22 font-400 textColor">{{ $t("止盈") }}</span>
        </div>
        <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
          v-if="selectIndex == 1">
          <input :placeholder="selectIndex == 1 ? $t('请输入止损金额'): ''" class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
            v-model="form.stop_price_loss" />
          <span class="font-22 font-400 textColor">{{ $t("止损") }}</span>
        </div>
          <div class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg">
            <div v-if="selectIndex == 1" class="w-80 flex items-center justify-center" style="height: 100%"
              @click="onReduce">
              <img src="../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
            </div>
            <input :placeholder="selectIndex == 1 ? $t('张数')
                        {{ item.lever_rate }}x
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div>
            <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" />
         </div>
      </div>
      <div class="pt-30 pb-20">
         <div class="flex">
            <div class="w-440 flex flex-col">
               <template v-if="selectIndex == 1">
                  <div class="flex items-center h-66 rounded-lg text-grey">
                     <p class="font-28 flex-1 flex items-center justify-center h-66 "
                        :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
                        {{ $t("开多") }}
                     </p>
                     <p class="font-28 flex-1 flex items-center justify-center h-66"
                        :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
                        {{ $t("开空") }}
                     </p>
                  </div>
                  <div class="mt-30 mb-30" style="position: relative">
                     <div class="inputBackground flex justify-between items-center w-full h-76 rounded-lg textColor"
                        @click="selectBtn">
                        <img src="../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20" />
                        <div class="text-center" style="width: 80%">{{ title }}</div>
                        <img src="../../assets/image/public/grey-select.png" alt="select-icon"
                           class="w-22 h-11 pr-20" />
                     </div>
                     <div class="option-box" v-show="isShow">
                        <div class="font-30" v-for="item in selectData" :key="item.type"
                           @click="selectItem(item)">
                           {{ item.title }}
                        </div>
                     </div>
                  </div>
               </template>
               <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue"
                  @paraId="onParaId" />
               <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
                  v-if="selectIndex == 1">
                  <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg"
                     :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
                  <span class="ml-20">USDT</span>
               </div>
               <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
                  v-if="selectIndex == 1">
                  <input :placeholder="selectIndex == 1 ? $t('请输入止盈金额'): ''"
                     class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
                     v-model="form.stop_price_profit" />
                  <span class="font-22 font-400 textColor">{{ $t("止盈") }}</span>
               </div>
               <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
                  v-if="selectIndex == 1">
                  <input :placeholder="selectIndex == 1 ? $t('请输入止损金额'): ''"
                     class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
                     v-model="form.stop_price_loss" />
                  <span class="font-22 font-400 textColor">{{ $t("止损") }}</span>
               </div>
               <div class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg">
                  <div v-if="selectIndex == 1" class="w-80 flex items-center justify-center" style="height: 100%"
                     @click="onReduce">
                     <img src="../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
                  </div>
                  <input :placeholder="selectIndex == 1 ? $t('张数')
              : $t('最少') + initFutrue && initFutrue.para
                ? $t('最小金额') + initFutrue.para[paraIndex].buy_min
                : ''
              " class="border-none inputBackground text-center textColor" style="width: 156px" v-model="form.amount"
              type="number" @input="onInput" />
            <div class="w-80 flex items-center justify-center" style="height: 100%">
              <template v-if="selectIndex == 1">
                <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
              </template>
              <template v-else>
                <span class="textColor">USDT</span>
              </template>
            </div>
          </div>
          <template v-if="selectIndex == 1">
            <div class="mt-40 mb-30 w-full flex justify-between items-center">
              <span class="font-22 font-400 text-grey">{{ $t("可开张数") }}</span>
              <span class="font-22 font-400 textColor">
                {{ initData.volume }}
                {{ $t("张") }}
              </span>
            </div>
            <!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
            <!-- <vue-slider class="mainBox" v-bind="options" :marks="marks" v-model="form.volume" :hide-label="true"  width="90%"
                     type="number" @input="onInput" />
                  <div class="w-80 flex items-center justify-center" style="height: 100%">
                     <template v-if="selectIndex == 1">
                        <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce"
                           class="w-30 h-30" />
                     </template>
                     <template v-else>
                        <span class="textColor">USDT</span>
                     </template>
                  </div>
               </div>
               <template v-if="selectIndex == 1">
                  <div class="mt-40 mb-30 w-full flex justify-between items-center">
                     <span class="font-22 font-400 text-grey">{{ $t("可开张数") }}</span>
                     <span class="font-22 font-400 textColor">
                        {{ initData.volume }}
                        {{ $t("张") }}
                     </span>
                  </div>
                  <!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
                  <!-- <vue-slider class="mainBox" v-bind="options" :marks="marks" v-model="form.volume" :hide-label="true"  width="90%"
              :railStyle="{ background: '#404040', height: '4px' }"
              :processStyle="{ background: '#266BFF', height: '4px' }">
              <template v-slot:step="{ active }">
@@ -116,34 +122,36 @@
              <span class="flex-1 text-right">75%</span>
              <span class="flex-1 text-right">100%</span>
            </div> -->
            <!-- 张数输入 -->
            <amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()" @getAmount="getAmount"></amount-slider>
          </template>
          <template v-if="selectIndex == 1 && userInfo.token">
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t('合约金额') }}</div>
              <div class="textColor">{{ initData.amount * (form.amount / 1) * form.lever_rate }} USDT</div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("保证金") }}</div>
              <div class="textColor">
                {{ (initData.amount * (form.amount / 1)) | nan }} USDT
              </div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("建仓手续费") }}</div>
              <div class="textColor">{{ userInfo.perpetual_contracts_status === '1' ? initData.fee *
                  <!-- 张数输入 -->
                  <amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()"
                     @getAmount="getAmount"></amount-slider>
               </template>
               <template v-if="selectIndex == 1 && userInfo.token">
                  <div class="flex justify-between mt-30">
                     <div class="text-grey">{{ $t('合约金额') }}</div>
                     <div class="textColor">{{ initData.amount * (form.amount / 1) * form.lever_rate }} USDT
                     </div>
                  </div>
                  <div class="flex justify-between mt-30">
                     <div class="text-grey">{{ $t("保证金") }}</div>
                     <div class="textColor">
                        {{ (initData.amount * (form.amount / 1)) | nan }} USDT
                     </div>
                  </div>
                  <div class="flex justify-between mt-30">
                     <div class="text-grey">{{ $t("建仓手续费") }}</div>
                     <div class="textColor">{{ userInfo.perpetual_contracts_status === '1' ? initData.fee *
                (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate | nan }} USDT</div>
            </div>
          </template>
          <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
            <div>{{ $t("可用USDT") }}</div>
            <div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
          </div>
          <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
            <div>{{ $t("手续费") }}</div>
            <div class="textColor">
              {{
                  </div>
               </template>
               <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
                  <div>{{ $t("可用USDT") }}</div>
                  <div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
               </div>
               <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
                  <div>{{ $t("手续费") }}</div>
                  <div class="textColor">
                     {{
                (
                  form.amount *
                  (initFutrue && initFutrue.para
@@ -151,77 +159,78 @@
                    : "")
                ).toFixed(2) | nan
              }}
              USDT
            </div>
          </div>
          <template v-if="userInfo.token">
            <template v-if="selectIndex == 1">
              <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" v-if="currentType == 'long'"
                @click="order('long')">
                <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                  {{ $t('开多') }}
                  <span class="right-word font-22 text-center">{{ $t('看涨') }}</span>
                </div>
                <div class="font-34 relative text-center" style="flex-grow:1;" v-else>
                  {{ $t('做多买入') }}
                </div>
              </div>
              <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50" v-if="currentType == 'short'"
                @click="order('short')">
                <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                  {{ $t('开空') }}
                  <span class="right-word font-22 text-center">{{ $t('看跌') }}</span>
                </div>
                <div class="relative font-34 text-center" style="flex-grow:1;" v-else>
                  {{ $t('做空买入') }}
                </div>
              </div>
            </template>
            <template v-if="selectIndex == 2">
              <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30 " @click="order('open')"
                v-if="userInfo.token">
                <div class="font-34 relative text-center" style="flex-grow: 1">
                  {{ $t("开多") }}
                  <span class="right-word font-22 text-center">{{
                     USDT
                  </div>
               </div>
               <template v-if="userInfo.token">
                  <template v-if="selectIndex == 1">
                     <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50"
                        v-if="currentType == 'long'" @click="order('long')">
                        <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                           {{ $t('开多') }}
                           <span class="right-word font-22 text-center">{{ $t('看涨') }}</span>
                        </div>
                        <div class="font-34 relative text-center" style="flex-grow:1;" v-else>
                           {{ $t('做多买入') }}
                        </div>
                     </div>
                     <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50"
                        v-if="currentType == 'short'" @click="order('short')">
                        <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                           {{ $t('开空') }}
                           <span class="right-word font-22 text-center">{{ $t('看跌') }}</span>
                        </div>
                        <div class="relative font-34 text-center" style="flex-grow:1;" v-else>
                           {{ $t('做空买入') }}
                        </div>
                     </div>
                  </template>
                  <template v-if="selectIndex == 2">
                     <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30 "
                        @click="order('open')" v-if="userInfo.token">
                        <div class="font-34 relative text-center" style="flex-grow: 1">
                           {{ $t("开多") }}
                           <span class="right-word font-22 text-center">{{
                    $t("看涨")
                  }}</span>
                </div>
              </div>
              <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" style="position: relative;"
                :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token">
                <div class="relative font-34 text-center" style="flex-grow: 1">
                  {{ $t("开空") }}
                  <span class="right-word font-22 text-center">{{
                        </div>
                     </div>
                     <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10"
                        style="position: relative;" :class="{ 'mt-22': selectIndex == 2 }"
                        @click="order('close')" v-if="userInfo.token">
                        <div class="relative font-34 text-center" style="flex-grow: 1">
                           {{ $t("开空") }}
                           <span class="right-word font-22 text-center">{{
                    $t("看跌")
                  }}</span>
                </div>
              </div>
            </template>
          </template>
          <div v-else class="w-full mt-120">
            <div class="textColor">
              <p>{{ $t("套期保值，风险对冲") }}</p>
              <p class="pt-8">{{ $t("登陆后继续") }}</p>
            </div>
            <div class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50"
              @click="$router.push('/login')">
              {{ $t("登录后进行交易") }}
            </div>
          </div>
        </div>
        <div class="ml-30">
          <div class="w-290 flex justify-between text-grey font-22">
            <div>
              <div>{{ $t("价格") }}</div>
              <div class="mt-4">(USDT)</div>
            </div>
            <div class="text-right items-end justify-end">
              <div class="">{{ $t("数量") }}</div>
              <div class="mt-4">({{ symbol.toUpperCase() || "--" }})</div>
            </div>
          </div>
          <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-12 font-26"
            v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
                        </div>
                     </div>
                  </template>
               </template>
               <div v-else class="w-full mt-120">
                  <div class="textColor">
                     <p>{{ $t("套期保值，风险对冲") }}</p>
                     <p class="pt-8">{{ $t("登陆后继续") }}</p>
                  </div>
                  <div class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50"
                     @click="$router.push('/login')">
                     {{ $t("登录后进行交易") }}
                  </div>
               </div>
            </div>
            <div class="ml-30">
               <div class="w-290 flex justify-between text-grey font-22">
                  <div>
                     <div>{{ $t("价格") }}</div>
                     <div class="mt-4">(USDT)</div>
                  </div>
                  <div class="text-right items-end justify-end">
                     <div class="">{{ $t('数量') }}</div>
                     <div class="mt-5">({{ symbolname || '--' }})</div>
                  </div>
               </div>
               <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-12 font-26"
                  v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
              background:
                `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
@@ -232,24 +241,24 @@
                100 +
                '%,rgba(94,186,137,.1) 100%)',
            }">
            <div class="text-green">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib'">
              {{ fixDate(item.amount, $i18n) || "--" }}
            </div>
            <div class="text-right textColor" v-else>
              {{ item.amount || "--" }}
            </div>
          </div>
          <div v-if="showType == 0 || showType == 1 || showType == 2"
            class="w-290 text-red pt-12 font-34 font-700 text-center">
            {{ approximately || "--" }}
          </div>
          <div v-if="showType == 0 || showType == 1 || showType == 2"
            class="approximately-text pb-12 font-20 text-center">
            ≈ {{ price || "--" }}
          </div>
          <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-12 font-26"
            v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
                  <div class="text-green">{{ item.price }}</div>
                  <div class="text-right textColor" v-if="symbol == 'shib'">
                     {{ fixDate(item.amount, $i18n) || "--" }}
                  </div>
                  <div class="text-right textColor" v-else>
                     {{ item.amount || "--" }}
                  </div>
               </div>
               <div v-if="showType == 0 || showType == 1 || showType == 2"
                  class="w-290 text-red pt-12 font-34 font-700 text-center">
                  {{ approximately || "--" }}
               </div>
               <div v-if="showType == 0 || showType == 1 || showType == 2"
                  class="approximately-text pb-12 font-20 text-center">
                  ≈ {{ price || "--" }}
               </div>
               <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-12 font-26"
                  v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
              background:
                `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
@@ -260,936 +269,981 @@
                100 +
                '%,rgba(246,70,93,.1) 100%)',
            }">
            <div class="text-red">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib'">
              {{ fixDate(item.amount, $i18n) || "--" }}
            </div>
            <div class="text-right textColor" v-else>
              {{ item.amount || "--" }}
            </div>
          </div>
          <div class="flex k-select-box">
            <div class="mt-30 mb-30 select-box" style="position: relative">
              <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
                <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
                <div class="pl-16 textColor" style="width: 80%">
                  {{ dataArrTitle }}
                </div>
                <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
              </div>
              <div class="option-box" v-show="arryIsShow">
                <div class="font-30" v-for="(item, index) in selectDataArry" :key="index" @click="selectItemArry(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>
            <div @click="isSelectShow = true">
              <img src="@/assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" class="rounded-2xl">
                  <div class="text-red">{{ item.price }}</div>
                  <div class="text-right textColor" v-if="symbol == 'shib'">
                     {{ fixDate(item.amount, $i18n) || "--" }}
                  </div>
                  <div class="text-right textColor" v-else>
                     {{ item.amount || "--" }}
                  </div>
               </div>
               <div class="flex k-select-box">
                  <div class="mt-30 mb-30 select-box" style="position: relative">
                     <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
                        <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
                        <div class="pl-16 textColor" style="width: 80%">
                           {{ dataArrTitle }}
                        </div>
                        <img src="@/assets/image/public/grey-select.png" alt="select-icon"
                           class="w-22 h-11 pr-20" />
                     </div>
                     <div class="option-box" v-show="arryIsShow">
                        <div class="font-30" v-for="(item, index) in selectDataArry" :key="index"
                           @click="selectItemArry(item)">
                           {{ item.name }}
                        </div>
                     </div>
                  </div>
                  <div @click="isSelectShow = true">
                     <img src="@/assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
                  </div>
               </div>
            </div>
         </div>
      </div>
      <van-popup v-model="show" class="rounded-2xl">

      <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
        @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
    </van-popup>
    <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
      close-on-click-action @cancel="onCancel">
    </van-action-sheet>
  </div>
         <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
            @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" :symbol="symbol" />
      </van-popup>
      <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
         close-on-click-action @cancel="onCancel">
      </van-action-sheet>
   </div>
</template>

<script>
import config from "@/config";
import { Popup, ActionSheet } from "vant";
import { mapGetters } from "vuex";
// import VueSlider from "vue-slider-component";
import AmountSlider from "./amountSlider.vue";
import "vue-slider-component/theme/default.css";
import {
  _orderOpen,
  _orderClose,
  _futrueOrder,
  _futrueOrderDetail,
  _getBalance,
  _futrueOrderInit,
} from "@/API/trade.api";
import ContractFutrue from "@/components/contract-futrue";
import PopupDelivery from "@/components/popup-delivery";
import { fixDate } from "@/utils/utis";
import { _getHomeList } from "@/API/home.api";
import { getStorage } from '@/utils/utis'
// import PopupConfirmOrder from '@/components/popup-confirm-order'
export default {
  name: "perpetualPosition",
  components: {
    // VueSlider,
    AmountSlider,
    ContractFutrue,
    [Popup.name]: Popup,
    PopupDelivery,
    [ActionSheet.name]: ActionSheet,
    // PopupConfirmOrder
  },
  props: {
    greenData: {
      // 买单
      type: Array,
      default() {
        return [];
      },
    },
    redData: {
      // 卖单
      type: Array,
      default() {
        return [];
      },
    },
    symbol: {
      type: String,
      default: "",
    },
    price: {
      type: [Number, String],
      default: "0.00",
    },
    initOpen: {
      type: Object,
      default() {
        return {};
      },
    },
    initClose: {
      type: Object,
      default() {
        return {};
      },
    },
    initFutrue: {
      type: Object,
      default() {
        return {};
      },
    },
    selectIndex: {
      type: [String, Number],
      default: 1,
    },
    currentType: {
      type: String,
      default: "long",
    },
  },
  watch: {
    price(val) {
      if (this.type === "1") {
        // !this.focus &&
        this.form.price = val;
      }
      this.form.para_id =
        this.initFutrue.para && this.initFutrue.para[this.paraIndex].para_id; // 不优雅，不可靠
      // this.form.symbol = this.symbol.toLowerCase()
    },
    initOpen: {
      // 处理滚动条初始值
      deep: true,
      handler(val) {
        this.handleInitSliderOption();
      },
    },
    initClose: {
      // 处理滚动条初始值
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.amount / 1 > 0) {
          this.handleInitSliderOption(true);
        }
      },
    },
    symbol(val) {
      this.getHomeList(val);
    },
    greenData(val) {
      if (this.dataArrValue >= 1) {
        this.greenData.map((item) => {
          item.price = parseFloat(item.price).toFixed(this.dataArrValue);
        });
        this.redData.map((item) => {
          item.price = parseFloat(item.price).toFixed(this.dataArrValue);
        });
      } else {
        if (this.dataArrValue == -1) {
          this.greenData.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf("."));
          });
          this.redData.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf("."));
          });
        }
        if (this.dataArrValue == -2) {
          this.greenData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 1) + "0";
          });
          this.redData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 1) + "0";
          });
        }
        if (this.dataArrValue == -3) {
          this.greenData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 2) + "00";
          });
          this.redData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 2) + "00";
          });
        }
      }
      this.approximately = this.redData[0].price
    },
  },
  mounted() {
    this.getHomeList(this.$route.params.symbol);
    setInterval(() => {
      // 刷新页面
          if (location.href.indexOf("#reloaded") == -1&&location.href.indexOf("perpetualContract")>0) {
            location.href = location.href + "#reloaded";
            location.reload();
          }
    }, 1000); // 1000毫秒 = 1秒
   import config from "@/config";
   import {
      Popup,
      ActionSheet
   } from "vant";
   import {
      mapGetters
   } from "vuex";
   // import VueSlider from "vue-slider-component";
   import AmountSlider from "./amountSlider.vue";
   import "vue-slider-component/theme/default.css";
   import {
      _orderOpen,
      _orderClose,
      _futrueOrder,
      _futrueOrderDetail,
      _getBalance,
      _futrueOrderInit,
   } from "@/API/trade.api";
   import ContractFutrue from "@/components/contract-futrue";
   import PopupDelivery from "@/components/popup-delivery";
   import {
      fixDate
   } from "@/utils/utis";
   import {
      _getHomeList
   } from "@/API/home.api";
   import {
      getStorage
   } from '@/utils/utis'
   // import PopupConfirmOrder from '@/components/popup-confirm-order'
   export default {
      name: "perpetualPosition",
      components: {
         // VueSlider,
         AmountSlider,
         ContractFutrue,
         [Popup.name]: Popup,
         PopupDelivery,
         [ActionSheet.name]: ActionSheet,
         // PopupConfirmOrder
      },
      props: {
         greenData: {
            // 买单
            type: Array,
            default () {
               return [];
            },
         },
         redData: {
            // 卖单
            type: Array,
            default () {
               return [];
            },
         },
         symbol: {
            type: String,
            default: "",
         },
         symbolname: {
              type: String,
              default: '--'
         },
         price: {
            type: [Number, String],
            default: "0.00",
         },
         initOpen: {
            type: Object,
            default () {
               return {};
            },
         },
         initClose: {
            type: Object,
            default () {
               return {};
            },
         },
         initFutrue: {
            type: Object,
            default () {
               return {};
            },
         },
         selectIndex: {
            type: [String, Number],
            default: 1,
         },
         currentType: {
            type: String,
            default: "long",
         },
      },
      watch: {
         price(val) {
            if (this.type === "1") {
               // !this.focus &&
               this.form.price = val;
            }
            this.form.para_id =
               this.initFutrue.para && this.initFutrue.para[this.paraIndex].para_id; // 不优雅，不可靠
            // this.form.symbol = this.symbol.toLowerCase()
         },
         initOpen: {
            // 处理滚动条初始值
            deep: true,
            handler(val) {
               this.handleInitSliderOption();
            },
         },
         initClose: {
            // 处理滚动条初始值
            deep: true,
            handler(newVal, oldVal) {
               if (newVal.amount / 1 > 0) {
                  this.handleInitSliderOption(true);
               }
            },
         },
         symbol(val) {
            this.getHomeList(val);
         },
         greenData(val) {
            if (this.dataArrValue >= 1) {
               this.greenData.map((item) => {
                  item.price = parseFloat(item.price).toFixed(this.dataArrValue);
               });
               this.redData.map((item) => {
                  item.price = parseFloat(item.price).toFixed(this.dataArrValue);
               });
            } else {
               if (this.dataArrValue == -1) {
                  this.greenData.map((item) => {
                     item.price = item.price.substring(0, item.price.indexOf("."));
                  });
                  this.redData.map((item) => {
                     item.price = item.price.substring(0, item.price.indexOf("."));
                  });
               }
               if (this.dataArrValue == -2) {
                  this.greenData.map((item) => {
                     item.price =
                        item.price.substring(0, item.price.indexOf(".") - 1) + "0";
                  });
                  this.redData.map((item) => {
                     item.price =
                        item.price.substring(0, item.price.indexOf(".") - 1) + "0";
                  });
               }
               if (this.dataArrValue == -3) {
                  this.greenData.map((item) => {
                     item.price =
                        item.price.substring(0, item.price.indexOf(".") - 2) + "00";
                  });
                  this.redData.map((item) => {
                     item.price =
                        item.price.substring(0, item.price.indexOf(".") - 2) + "00";
                  });
               }
            }
            this.approximately = this.redData[0].price
         },
      },
      mounted() {
         this.getHomeList(this.$route.params.symbol);
         this.symbolname = getStorage('symbolname')
         setInterval(() => {
            // 刷新页面
            if (location.href.indexOf("#reloaded") == -1 && location.href.indexOf("perpetualContract") > 0) {
               location.href = location.href + "#reloaded";
               location.reload();
            }
         }, 1000); // 1000毫秒 = 1秒


  },
  computed: {
    ...mapGetters({
      userInfo: 'user/userInfo',
      theme: 'home/theme'
    }),
    initData() {
      let obj = null
      if (this.selectIndex / 1 === 1) {
      },
      computed: {
         ...mapGetters({
            userInfo: 'user/userInfo',
            theme: 'home/theme'
         }),
         initData() {
            let obj = null
            if (this.selectIndex / 1 === 1) {

        obj = this.initOpen
        if (!obj.lever || !obj.lever.length) { // 倍数
          obj.lever = [{ id: 1, lever_rate: 1 }]
        }
        return obj
      }
      return this.initFutrue
    },
    coudBuyVolume() {
      // 可买数量
      return Math.floor(this.initOpen.volume / 1 / this.form.lever_rate);
    },
  },
  filters: {
    nan(val) {
      return isNaN(val) ? "--" : val;
    },
  },
  data() {
    return {
      fixDate,
      currentBuyType: "", // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
      timeout2: null,
      timeout: null,
      detailData: {}, // 交割合约订单详情数据
      show: false,
      popType: "confirm", // 弹框类型 confirm / counting
      showOptions: false,
      options: config.sliderOptions,
      value: 0,
      isShow: false,
      title: this.$t("市价"),
      paraIndex: 0,
      selectData: [
        { title: this.$t("市价"), type: "1" },
        { title: this.$t("限价"), type: "2" },
      ],
      form: {
        symbol: "", // 币种
        session_token: "",
        direction: "buy", // 买or卖
        price_type: "opponent", // 市价or限价
        lever_rate: 1, // 杠杆
      stop_price_profit:'',
      stop_price_loss:'',
        price: "",
        amount: "", // 数量
        para_id: "", // 交割周琦id
      },
      focus: false,
      type: "1", //选中市价或限价类型
      // currentType:"open", //开仓类型
      // action: _orderOpen // 开仓or
      isShow: false,
      selectDataArry: [],
      isSelectShow: false,
      actions: [
        { name: this.$t("默认"), value: 0, className: 'actions-active' },
        { name: this.$t("展示买单"), value: 1, className: '' },
        { name: this.$t("展示卖单"), value: 2, className: '' },
      ],
      showType: 0,
      dataArrTitle: 0,
      dataArrValue: 0,
      arryIsShow: false,
      marks: (val) => val % 50 === 0,
      approximately: ''
    };
  },
  beforeDestroy() {
    this.clearTimeout();
  },
  activated() {
    this.selectData = [
      { title: this.$t("市价"), type: "1" },
      { title: this.$t("限价"), type: "2" },
    ];
    this.title = this.selectData[0].title;
    this.type = this.selectData[0].type
  },
               obj = this.initOpen
               if (!obj.lever || !obj.lever.length) { // 倍数
                  obj.lever = [{
                     id: 1,
                     lever_rate: 1
                  }]
               }
               return obj
            }
            return this.initFutrue
         },
         coudBuyVolume() {
            // 可买数量
            return Math.floor(this.initOpen.volume / 1 / this.form.lever_rate);
         },
      },
      filters: {
         nan(val) {
            return isNaN(val) ? "--" : val;
         },
      },
      data() {
         return {
            fixDate,
            currentBuyType: "", // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
            timeout2: null,
            timeout: null,
            detailData: {}, // 交割合约订单详情数据
            show: false,
            popType: "confirm", // 弹框类型 confirm / counting
            showOptions: false,
            options: config.sliderOptions,
            value: 0,
            isShow: false,
            title: this.$t("市价"),
            paraIndex: 0,
            selectData: [{
                  title: this.$t("市价"),
                  type: "1"
               },
               {
                  title: this.$t("限价"),
                  type: "2"
               },
            ],
            form: {
               symbol: "", // 币种
               session_token: "",
               direction: "buy", // 买or卖
               price_type: "opponent", // 市价or限价
               lever_rate: 1, // 杠杆
               stop_price_profit: '',
               stop_price_loss: '',
               price: "",
               amount: "", // 数量
               para_id: "", // 交割周琦id
            },
            focus: false,
            type: "1", //选中市价或限价类型
            // currentType:"open", //开仓类型
            // action: _orderOpen // 开仓or
            isShow: false,
            selectDataArry: [],
            isSelectShow: false,
            actions: [{
                  name: this.$t("默认"),
                  value: 0,
                  className: 'actions-active'
               },
               {
                  name: this.$t("展示买单"),
                  value: 1,
                  className: ''
               },
               {
                  name: this.$t("展示卖单"),
                  value: 2,
                  className: ''
               },
            ],
            showType: 0,
            dataArrTitle: 0,
            dataArrValue: 0,
            arryIsShow: false,
            marks: (val) => val % 50 === 0,
            approximately: ''
         };
      },
      beforeDestroy() {
         this.clearTimeout();
      },
      activated() {
         this.selectData = [{
               title: this.$t("市价"),
               type: "1"
            },
            {
               title: this.$t("限价"),
               type: "2"
            },
         ];
         this.title = this.selectData[0].title;
         this.type = this.selectData[0].type
      },

  methods: {
    //获取张数
    getAmount(val) {
      this.form.amount = val;
    },
    // 获取张数,数据转换
    getVolumnByLever() {
      let vol;
      vol = this.initOpen.volume / 1;
      return Math.floor(vol);
    },
      methods: {
         //获取张数
         getAmount(val) {
            this.form.amount = val;
         },
         // 获取张数,数据转换
         getVolumnByLever() {
            let vol;
            vol = this.initOpen.volume / 1;
            return Math.floor(vol);
         },

    getHomeList(symbol) {
      _getHomeList(symbol).then((res) => {
        let numberText = res[0].close;
        let numberLength = numberText.substring(
          numberText.indexOf(".") + 1,
          numberText.length
        ).length;
        let arry = [];
        let str = "0.";
        for (let j = 0; j < numberLength - 1; j++) {
          str = str + "0";
          arry.push(str);
        }
        let newArry = [];
        arry.map((item) => {
          let obj = {
            name: item + "1",
            value:
              item.substring(item.indexOf(".") + 1, item.length).length + 1,
          };
          newArry.push(obj);
        });
        if (numberLength <= 2) {
          let obj = [
            {
              name: "0.1",
              value: 1,
            },
            {
              name: "1",
              value: -1,
            },
            {
              name: "10",
              value: -2,
            },
            // {
            //   name: '100',
            //   value: -3,
            // }
          ];
          let arryItem = {
            name: "100",
            value: -3,
          };
          if (numberText.substring(0, numberText.indexOf(".")).length > 2) {
            obj.push(arryItem);
          }
          newArry = newArry.concat(obj);
        }
        if (this.symbol == "shib") {
          newArry = newArry.slice(-4);
        }
        let dataObj = {
          arry: newArry,
          numberLength: numberLength,
        };
        this.selectDataArry = dataObj.arry;
        if (numberLength >= 2) {
          this.dataArrTitle = this.selectDataArry[0].name;
        } else {
          this.dataArrTitle =
            this.selectDataArry[this.selectDataArry.length - 1].name;
        }
      });
    },
    continueTobuy(detailData) {
      this.show = false;
      setTimeout(() => {
        this.$router.push(
          `/trendDetails/${detailData.symbol}?direction=${detailData.direction}`
        );
      }, 300);
    },
    onQuickPrice(price) {
      // 点击金额变化
      if (this.type === "2") {
        this.form.price = price;
      }
    },
    clearTimeout() {
      clearTimeout(this.timeout);
      this.timeout = null;
    },
    handleTimeEnd(order) {
      if (this.selectIndex / 1 === 2) {
        // 交割合约需要弹出详情框
        _futrueOrderDetail(order).then((data) => {
          this.clearTimeout();
          this.detailData = data;
          if (data.state !== "created") {
            this.timeout = setTimeout(() => {
              this.handleTimeEnd(order);
            }, 1000);
          }
        });
      }
    },
    handleInitSliderOption(amount) {
      if (!amount) {
        // 金额是否需要变动
        this.form.amount = "";
      }
      console.log(this.initOpen.volume, this.form.lever_rate);
      let vol;
      vol = this.initOpen.volume / 1;
      this.options.max = Math.floor(vol);
      console.log("this.options.max", this.options.max);
      if (this.options.max > 0) {
        this.options.disabled = false;
      } else {
        this.options.disabled = true;
      }
    },
    handleChoose(item) {
      this.showOptions = !this.showOptions;
      this.form.lever_rate = item.lever_rate;
      console.log("handleChoose");
      this.handleInitSliderOption();
    },
    onAdd() {
      // +
      if (this.options.max === 0) {
        return;
      }
      if (this.form.amount === this.options.max) {
        return;
      }
      console.log(this.options.max)
      this.form.amount++;
    },
    onReduce() {
      // -
      if (this.form.amount > 1) {
        this.form.amount--;
      }
    },
    jump() {
      this.$router.push(`/trendDetails/${this.symbol}`);
    },
    onParaId({ id, index }) {
      // 交割日期
      // console.log(evt)
      this.form.para_id = id;
      this.form.amount = ''
      this.paraIndex = index;
    },
    onInput() {
      // 数量变化
      // console.log(1111111, this.form.amount, this.selectIndex)
      if (this.selectIndex == 1 && this.options.max == 0) {
        this.form.amount = this.form.amount / 1;
      } else if (
        this.selectIndex == 1 &&
        this.form.amount / 1 > this.options.max / 1
      ) {
        this.form.amount = this.options.max / 1;
      }
      if (this.selectIndex / 1 === 1) {
        this.$refs.sliderRef.amountChange(this.form.amount);
      }
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    //选择价格类型
    selectItem(item) {
      if (item.type == 1) {
        this.form.price = this.price
      }
      this.form.price_type = item.type === "1" ? "opponent" : "limit";
      this.title = item.title;
      this.type = item.type;
      this.isShow = false;
    },
    //选择开仓类型
    changeTab(type) {
      // 开仓和
      console.log("changeTab", type);
         getHomeList(symbol) {
            _getHomeList(symbol).then((res) => {
               let numberText = res[0].close;
               let numberLength = numberText.substring(
                  numberText.indexOf(".") + 1,
                  numberText.length
               ).length;
               let arry = [];
               let str = "0.";
               for (let j = 0; j < numberLength - 1; j++) {
                  str = str + "0";
                  arry.push(str);
               }
               let newArry = [];
               arry.map((item) => {
                  let obj = {
                     name: item + "1",
                     value: item.substring(item.indexOf(".") + 1, item.length).length + 1,
                  };
                  newArry.push(obj);
               });
               if (numberLength <= 2) {
                  let obj = [{
                        name: "0.1",
                        value: 1,
                     },
                     {
                        name: "1",
                        value: -1,
                     },
                     {
                        name: "10",
                        value: -2,
                     },
                     // {
                     //   name: '100',
                     //   value: -3,
                     // }
                  ];
                  let arryItem = {
                     name: "100",
                     value: -3,
                  };
                  if (numberText.substring(0, numberText.indexOf(".")).length > 2) {
                     obj.push(arryItem);
                  }
                  newArry = newArry.concat(obj);
               }
               if (this.symbol == "shib") {
                  newArry = newArry.slice(-4);
               }
               let dataObj = {
                  arry: newArry,
                  numberLength: numberLength,
               };
               this.selectDataArry = dataObj.arry;
               if (numberLength >= 2) {
                  this.dataArrTitle = this.selectDataArry[0].name;
               } else {
                  this.dataArrTitle =
                     this.selectDataArry[this.selectDataArry.length - 1].name;
               }
            });
         },
         continueTobuy(detailData) {
            this.show = false;
            setTimeout(() => {
               this.$router.push(
                  `/trendDetails/${detailData.symbol}?direction=${detailData.direction}`
               );
            }, 300);
         },
         onQuickPrice(price) {
            // 点击金额变化
            if (this.type === "2") {
               this.form.price = price;
            }
         },
         clearTimeout() {
            clearTimeout(this.timeout);
            this.timeout = null;
         },
         handleTimeEnd(order) {
            if (this.selectIndex / 1 === 2) {
               // 交割合约需要弹出详情框
               _futrueOrderDetail(order).then((data) => {
                  this.clearTimeout();
                  this.detailData = data;
                  if (data.state !== "created") {
                     this.timeout = setTimeout(() => {
                        this.handleTimeEnd(order);
                     }, 1000);
                  }
               });
            }
         },
         handleInitSliderOption(amount) {
            if (!amount) {
               // 金额是否需要变动
               this.form.amount = "";
            }
            console.log(this.initOpen.volume, this.form.lever_rate);
            let vol;
            vol = this.initOpen.volume / 1;
            this.options.max = Math.floor(vol);
            console.log("this.options.max", this.options.max);
            if (this.options.max > 0) {
               this.options.disabled = false;
            } else {
               this.options.disabled = true;
            }
         },
         handleChoose(item) {
            this.showOptions = !this.showOptions;
            this.form.lever_rate = item.lever_rate;
            console.log("handleChoose");
            this.handleInitSliderOption();
         },
         onAdd() {
            // +
            if (this.options.max === 0) {
               return;
            }
            if (this.form.amount === this.options.max) {
               return;
            }
            console.log(this.options.max)
            this.form.amount++;
         },
         onReduce() {
            // -
            if (this.form.amount > 1) {
               this.form.amount--;
            }
         },
         jump() {
            this.$router.push(`/trendDetails/${this.symbol}`);
         },
         onParaId({
            id,
            index
         }) {
            // 交割日期
            // console.log(evt)
            this.form.para_id = id;
            this.form.amount = ''
            this.paraIndex = index;
         },
         onInput() {
            // 数量变化
            // console.log(1111111, this.form.amount, this.selectIndex)
            if (this.selectIndex == 1 && this.options.max == 0) {
               this.form.amount = this.form.amount / 1;
            } else if (
               this.selectIndex == 1 &&
               this.form.amount / 1 > this.options.max / 1
            ) {
               this.form.amount = this.options.max / 1;
            }
            if (this.selectIndex / 1 === 1) {
               this.$refs.sliderRef.amountChange(this.form.amount);
            }
         },
         //价格类型下拉框切换
         selectBtn() {
            this.isShow = !this.isShow;
         },
         //选择价格类型
         selectItem(item) {
            if (item.type == 1) {
               this.form.price = this.price
            }
            this.form.price_type = item.type === "1" ? "opponent" : "limit";
            this.title = item.title;
            this.type = item.type;
            this.isShow = false;
         },
         //选择开仓类型
         changeTab(type) {
            // 开仓和
            console.log("changeTab", type);

      if (this.currentType === type) {
        return;
      }
      this.$emit("changeCurrentType", type);
      // this.currentType = type;
            if (this.currentType === type) {
               return;
            }
            this.$emit("changeCurrentType", type);
            // this.currentType = type;

      this.$refs.sliderRef.emptyValue()
      this.handleInitSliderOption();
    },
    onClose() {
      // 关闭
      this.show = false;
      setTimeout(() => {
        this.popType = "confirm";
      }, 500);
    },
    // onOrderConfirm() {
    //   /// 交割合约确认
    //   this.show = false;
    //   this.popType = "counting";
    //   this.order(this.form.direction === "buy" ? "open" : "close");
    // },
    order(type) {
      if (!this.userInfo.token) {
        this.$router.push("/login");
        return false;
      }
    //  if (!this.form.stop_price_profit) {
    //     this.$toast.fail(this.$t("请输入止盈金额"));
    //      return false;
    //     }
      // if (!this.form.stop_price_loss) {
      //    this.$toast.fail(this.$t("请输入止损金额"));
      //     return false;
      //    }
      if (!this.form.amount) {
        if (this.selectIndex == 1) {
          this.$toast.fail(this.$t("请输入合约张数"));
        } else {
          this.$toast.fail(this.$t("请输入金额"));
        }
        return;
      }
            this.$refs.sliderRef.emptyValue()
            this.handleInitSliderOption();
         },
         onClose() {
            // 关闭
            this.show = false;
            setTimeout(() => {
               this.popType = "confirm";
            }, 500);
         },
         // onOrderConfirm() {
         //   /// 交割合约确认
         //   this.show = false;
         //   this.popType = "counting";
         //   this.order(this.form.direction === "buy" ? "open" : "close");
         // },
         order(type) {
            if (!this.userInfo.token) {
               this.$router.push("/login");
               return false;
            }
            //  if (!this.form.stop_price_profit) {
            //     this.$toast.fail(this.$t("请输入止盈金额"));
            //      return false;
            //     }
            // if (!this.form.stop_price_loss) {
            //    this.$toast.fail(this.$t("请输入止损金额"));
            //     return false;
            //    }
            if (!this.form.amount) {
               if (this.selectIndex == 1) {
                  this.$toast.fail(this.$t("请输入合约张数"));
               } else {
                  this.$toast.fail(this.$t("请输入金额"));
               }
               return;
            }


      // this.form.direction = type
      this.form.symbol = this.$route.params.symbol;
      if (type == 'long' || type == 'open') {
        this.form.direction = 'buy'
      } else {
        this.form.direction = 'sell'
      }
      let _order = null; // api
      let emitFunc = null; // 触发函数
      if (this.selectIndex / 1 === 1) {
        // 永续合约
        this.form.session_token = this.initOpen.session_token
        _order = _orderOpen
        emitFunc = this.currentType
        this.openOrder(_order, emitFunc);
      } else {
        // 交割合约
        this.form.session_token = this.initFutrue.session_token;
        _order = _futrueOrder;
        emitFunc = "futrue";
        if (
          this.initFutrue.session_token == undefined ||
          this.initFutrue.session_token == ""
        ) {
          _futrueOrderInit(this.symbol)
            .then((data) => {
              this.form.session_token = data.session_token;
              this.openOrder(_order, emitFunc);
            })
            .catch((err) => {
              if (err.code == "ECONNABORTED") {
                this.$toast(this.$t("网络超时！"));
              } else if (err.msg != undefined) {
                this.$toast(this.$t(err.msg));
              }
            });
        } else {
          this.form.session_token = this.initFutrue.session_token;
          this.openOrder(_order, emitFunc);
        }
      }
    },
    openOrder(_order, emitFunc) {
      _order(this.form)
        .then((res) => {
          if (this.selectIndex / 1 === 1) {
            this.$refs.sliderRef.emptyValue()
          }
          this.$toast(this.$t("操作成功"));
          _getBalance().then((data) => {
            // 刷新余额
            this.$store.commit("user/SET_USERINFO", { balance: data.money });
          });
          this.$emit("ordered", emitFunc);
          if (this.selectIndex / 1 === 2) {
            // 交割合约需要弹出详情框
            _futrueOrderDetail(res.order_no).then((data) => {
              this.detailData = data;
              this.show = true;
            });
          }
        })
        .catch(() => {
          // 也需要重新初始化
          this.$emit("ordered", emitFunc);
          if (this.selectIndex / 1 === 1) {
            this.$refs.sliderRef.emptyValue()
          }
        });
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    selectArryBtn() {
      this.arryIsShow = !this.arryIsShow;
    },
    onSelect(item) {
      this.actions.map((item) => {
        item.className = ''
      })
      item.className = 'actions-active'
      this.showType = item.value;
      this.$emit("changeValueBack", this.showType);
    },
    onCancel() {
      this.isSelectShow = false;
    },
    selectItemArry(item) {
      this.dataArrValue = item.value;
      this.arryIsShow = false;
      this.dataArrTitle = item.name;
    },
  },
};
            // this.form.direction = type
            this.form.symbol = this.$route.params.symbol;
            if (type == 'long' || type == 'open') {
               this.form.direction = 'buy'
            } else {
               this.form.direction = 'sell'
            }
            let _order = null; // api
            let emitFunc = null; // 触发函数
            if (this.selectIndex / 1 === 1) {
               // 永续合约
               this.form.session_token = this.initOpen.session_token
               _order = _orderOpen
               emitFunc = this.currentType
               this.openOrder(_order, emitFunc);
            } else {
               // 交割合约
               this.form.session_token = this.initFutrue.session_token;
               _order = _futrueOrder;
               emitFunc = "futrue";
               if (
                  this.initFutrue.session_token == undefined ||
                  this.initFutrue.session_token == ""
               ) {
                  _futrueOrderInit(this.symbol)
                     .then((data) => {
                        this.form.session_token = data.session_token;
                        this.openOrder(_order, emitFunc);
                     })
                     .catch((err) => {
                        if (err.code == "ECONNABORTED") {
                           this.$toast(this.$t("网络超时！"));
                        } else if (err.msg != undefined) {
                           this.$toast(this.$t(err.msg));
                        }
                     });
               } else {
                  this.form.session_token = this.initFutrue.session_token;
                  this.openOrder(_order, emitFunc);
               }
            }
         },
         openOrder(_order, emitFunc) {
            _order(this.form)
               .then((res) => {
                  if (this.selectIndex / 1 === 1) {
                     this.$refs.sliderRef.emptyValue()
                  }
                  this.$toast(this.$t("操作成功"));
                  _getBalance().then((data) => {
                     // 刷新余额
                     this.$store.commit("user/SET_USERINFO", {
                        balance: data.money
                     });
                  });
                  this.$emit("ordered", emitFunc);
                  if (this.selectIndex / 1 === 2) {
                     // 交割合约需要弹出详情框
                     _futrueOrderDetail(res.order_no).then((data) => {
                        this.detailData = data;
                        this.show = true;
                     });
                  }
               })
               .catch(() => {
                  // 也需要重新初始化
                  this.$emit("ordered", emitFunc);
                  if (this.selectIndex / 1 === 1) {
                     this.$refs.sliderRef.emptyValue()
                  }
               });
         },
         //价格类型下拉框切换
         selectBtn() {
            this.isShow = !this.isShow;
         },
         selectArryBtn() {
            this.arryIsShow = !this.arryIsShow;
         },
         onSelect(item) {
            this.actions.map((item) => {
               item.className = ''
            })
            item.className = 'actions-active'
            this.showType = item.value;
            this.$emit("changeValueBack", this.showType);
         },
         onCancel() {
            this.isSelectShow = false;
         },
         selectItemArry(item) {
            this.dataArrValue = item.value;
            this.arryIsShow = false;
            this.dataArrTitle = item.name;
         },
      },
   };
</script>

<style lang="scss" scoped>
.perpetual-open {
  font-size: 26px;
}
   .perpetual-open {
      font-size: 26px;
   }

.options {
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
   .options {
      box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
      border-radius: 6px;

  @include themify() {
    background: themed("tab_background");
  }
      @include themify() {
         background: themed("tab_background");
      }

  div {
    font-size: 22px;
    text-align: center;
    width: 140px;
    height: 50px;
    line-height: 50px;
      div {
         font-size: 22px;
         text-align: center;
         width: 140px;
         height: 50px;
         line-height: 50px;

    &.option-active {
      @include themify() {
        background: themed("tab_background");
      }
    }
  }
}
         &.option-active {
            @include themify() {
               background: themed("tab_background");
            }
         }
      }
   }

.right-word {
  top: 50%;
  transform: translateY(-50%);
  right: 19px;
  position: absolute;
  border-radius: 6px;
}
   .right-word {
      top: 50%;
      transform: translateY(-50%);
      right: 19px;
      position: absolute;
      border-radius: 6px;
   }

.vue-slider {
  height: 3px !important;
  padding: 0 20px !important;
}
   .vue-slider {
      height: 3px !important;
      padding: 0 20px !important;
   }

.vue-slider-dot {
  width: 32px !important;
  height: 32px !important;
}
   .vue-slider-dot {
      width: 32px !important;
      height: 32px !important;
   }

.vue-slider-mark-label {
  font-size: 16px;
  margin-top: 14px !important;
}
   .vue-slider-mark-label {
      font-size: 16px;
      margin-top: 14px !important;
   }

.vue-slider-mark-label-active {
  color: #868d9a !important;
}
   .vue-slider-mark-label-active {
      color: #868d9a !important;
   }

.vue-slider-dot-handle {
  border: 3px solid #2c78f8;
}
   .vue-slider-dot-handle {
      border: 3px solid #2c78f8;
   }

.vue-slider-mark {
  width: 20px !important;
  height: 20px !important;
   .vue-slider-mark {
      width: 20px !important;
      height: 20px !important;

  &:nth-child(1) {
    .vue-slider-mark-label {
      transform: translateX(-14px) !important;
    }
  }
      &:nth-child(1) {
         .vue-slider-mark-label {
            transform: translateX(-14px) !important;
         }
      }

  &:nth-child(5) {
    .vue-slider-mark-label {
      transform: translateX(-60px) !important;
    }
  }
}
      &:nth-child(5) {
         .vue-slider-mark-label {
            transform: translateX(-60px) !important;
         }
      }
   }

// 开仓样式
.tabcon {
  // padding-bottom: 16%;
  position: relative;
  height: 80px;
}
   // 开仓样式
   .tabcon {
      // padding-bottom: 16%;
      position: relative;
      height: 80px;
   }

.tab {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  border-radius: 5px;
  overflow: hidden;
}
   .tab {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      display: flex;
      align-items: center;
      background-color: #f3f3f3;
      border-radius: 5px;
      overflow: hidden;
   }

.tab>* {
  height: 100%;
}
   .tab>* {
      height: 100%;
   }

.tab>img {
  margin-left: -2px;
  margin-right: -2px;
}
   .tab>img {
      margin-left: -2px;
      margin-right: -2px;
   }

.tab>a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
   .tab>a {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
   }

.open,
.long {
  background-color: #12b298;
  color: white;
}
   .open,
   .long {
      background-color: #12b298;
      color: white;
   }

// 下拉
.option-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  width: 100%;
   // 下拉
   .option-box {
      position: absolute;
      left: 0;
      right: 0;
      top: 90px;
      width: 100%;

  @include themify() {
    background: themed("grey_bg");
  }
      @include themify() {
         background: themed("grey_bg");
      }

  text-align: center;
      text-align: center;

  @include themify() {
    box-shadow: 0px 0px 3px 3px themed("grey_bg");
  }
      @include themify() {
         box-shadow: 0px 0px 3px 3px themed("grey_bg");
      }

  border-radius: 4px;
      border-radius: 4px;

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

.option-box>div {
  padding: 30px 0;
}
   .option-box>div {
      padding: 30px 0;
   }

.option-box>div:hover {
  // background-color: #f5f5f5;
}
   .option-box>div:hover {
      // background-color: #f5f5f5;
   }

.num-text-color {
  color: #4c4a54;
}
   .num-text-color {
      color: #4c4a54;
   }

select {
  appearance: none;
  /* 去掉默认图标 */
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  padding: 0 20px 0 20px;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
  /* 自己的图*/
  background-size: 20px 11px;
}
   select {
      appearance: none;
      /* 去掉默认图标 */
      -moz-appearance: none;
      /* Firefox */
      -webkit-appearance: none;
      /* Safari and Chrome */
      padding: 0 20px 0 20px;
      background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
      /* 自己的图*/
      background-size: 20px 11px;
   }

.with100 {
  width: 100%;
}
   .with100 {
      width: 100%;
   }

.height100 {
  height: 100%;
}
   .height100 {
      height: 100%;
   }

.open {
  background-color: #12b298;
  // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
  // background-size: 100% 100%;
  color: white;
}
   .open {
      background-color: #12b298;
      // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
      // background-size: 100% 100%;
      color: white;
   }

.close,
.short {
  background-color: #f6465d;
  // background: url(@/assets/image/public/close-bg.png) no-repeat left center;
  // background-size: 100% 100%;
  color: white;
}
   .close,
   .short {
      background-color: #f6465d;
      // background: url(@/assets/image/public/close-bg.png) no-repeat left center;
      // background-size: 100% 100%;
      color: white;
   }

// .custom-step {
//   width: 10px;
//   height: 10px;
//   border-radius: 50%;
//   background: fff;
//   border: solid 1px #1d91ff;
//   background: #fff;
// }
   // .custom-step {
   //   width: 10px;
   //   height: 10px;
   //   border-radius: 50%;
   //   background: fff;
   //   border: solid 1px #1d91ff;
   //   background: #fff;
   // }

// .custom-step.active {
//   box-shadow: 0 0 0 2px #1d91ff;
//   background-color: #1d91ff;
// }
   // .custom-step.active {
   //   box-shadow: 0 0 0 2px #1d91ff;
   //   background-color: #1d91ff;
   // }

.all-div {
  @include themify() {
    background: themed("input_background1");
  }
}
   .all-div {
      @include themify() {
         background: themed("input_background1");
      }
   }

.select-wrap {
  @include themify() {
    background: themed("input_background1");
  }
   .select-wrap {
      @include themify() {
         background: themed("input_background1");
      }

  border: none;
}
      border: none;
   }

.greyBg {
  @include themify() {
    border: 1px solid themed("input_background1");
  }
   .greyBg {
      @include themify() {
         border: 1px solid themed("input_background1");
      }

  @include themify() {
    background: themed("input_background1");
  }
}
      @include themify() {
         background: themed("input_background1");
      }
   }

.usdt-bg {
  @include themify() {
    background: themed("input_background1");
  }
}
   .usdt-bg {
      @include themify() {
         background: themed("input_background1");
      }
   }

.header-open {
  align-items: center;
}
   .header-open {
      align-items: center;
   }

.k-select-box {
  justify-content: flex-end;
  padding-right: 40px;
  align-items: center;
   .k-select-box {
      justify-content: flex-end;
      padding-right: 40px;
      align-items: center;

  .select-box {
    width: 220px;
      .select-box {
         width: 220px;

    @include themify() {
      background: themed("input_background");
    }
         @include themify() {
            background: themed("input_background");
         }

    margin-right: 20px;
  }
}
         margin-right: 20px;
      }
   }

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

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

.actions-active {
  @include themify() {
    background: themed("color_main") !important;
  }
   .actions-active {
      @include themify() {
         background: themed("color_main") !important;
      }

  color: #fff !important;
}
      color: #fff !important;
   }

.perpetual-open {
   .perpetual-open {

  ::v-deep .van-action-sheet__item,
  ::v-deep .van-action-sheet__cancel {
      ::v-deep .van-action-sheet__item,
      ::v-deep .van-action-sheet__cancel {

    @include themify() {
      background: themed("input_background1");
    }
         @include themify() {
            background: themed("input_background1");
         }

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

  ::v-deep .van-action-sheet__gap {
    @include themify() {
      background: themed("cont_background");
    }
  }
}
      ::v-deep .van-action-sheet__gap {
         @include themify() {
            background: themed("cont_background");
         }
      }
   }

.approximately-text {
  @include themify() {
    color: themed("text_color1");
  }
}
</style>
   .approximately-text {
      @include themify() {
         color: themed("text_color1");
      }
   }
</style>