<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="section">
      <div class="title">
        <!-- 1、请选择时间周期与对应费率 -->
        {{ $t('option.l59') }}
      </div>
      <div class="info-box">
        <img class="icon" src="/img/product/info1.png" alt="极度证券">
        <div>
          <!-- 105结构：标的上涨大于5%时开始产生内在价值 -->
          {{ $t('option.l60') }}
        </div>
      </div>
      <div class="table">
        <van-row class="theard">
          <van-col span="8" class="col1">
            <!-- 时间周期 -->
            {{ $t('option.l47') }}
          </van-col>
          <van-col span="8" class="col2">
            <!-- 平值费率 -->
            {{ $t('option.l48') }}
          </van-col>
          <van-col span="8" class="col3">
            <!-- 虚值105费率 -->
            {{ $t('option.l49') }}
          </van-col>
        </van-row>
        <van-row class="row" type="flex" align="center">
          <van-col span="8" class="col1">
            <!-- 1个月 -->
            1M
          </van-col>
          <van-col span="8">
            <div class="td flex" v-if="getPrice(optionInfo.price_1m_list, 0)" @click="changeStandard(100, 1, getPrice1(optionInfo.price_1m_list, 0))">
              <div>{{ getPrice(optionInfo.price_1m_list, 0) }}</div>
              <img v-show="standard == 100 && cycle == 1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard != 100 || cycle != 1" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
          <van-col span="8">
            <div class="td flex" v-if="getPrice(optionInfo.price_1m_list, 1)" @click="changeStandard(105, 1, getPrice1(optionInfo.price_1m_list, 1))">
              <div>{{ getPrice(optionInfo.price_1m_list, 1) }}</div>
              <img v-show="standard == 105 && cycle == 1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard != 105 || cycle != 1" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
        </van-row>
        <van-row class="row" type="flex" align="center">
          <van-col span="8" class="col1">
            <!-- 2个月 -->
            2M
          </van-col>
          <van-col span="8">
            <div class="td flex" v-if="getPrice(optionInfo.price_2m_list, 0)" @click="changeStandard(100, 2, getPrice1(optionInfo.price_2m_list, 0))">
              <div>{{ getPrice(optionInfo.price_2m_list, 0) }}</div>
              <img v-show="standard == 100 && cycle == 2" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard != 100 || cycle != 2" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
          <van-col span="8">
            <div class="td flex" v-if="getPrice(optionInfo.price_2m_list, 1)" @click="changeStandard(105, 2, getPrice1(optionInfo.price_2m_list, 1))">
              <div>{{ getPrice(optionInfo.price_2m_list, 1) }}</div>
              <img v-show="standard == 105 && cycle == 2" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard != 105 || cycle != 2" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
        </van-row>
        <van-row class="row" type="flex" align="center">
          <van-col span="8" class="col1">
            <!-- 3个月 -->
            3M
          </van-col>
          <van-col span="8">
            <div class="td flex" v-if="getPrice(optionInfo.price_3m_list, 0)" @click="changeStandard(100, 3, getPrice1(optionInfo.price_3m_list, 0))">
              <div>{{ getPrice(optionInfo.price_3m_list, 0) }}</div>
              <img v-show="standard == 100 && cycle == 3" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard != 100 || cycle != 3" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
          <van-col span="8">
            <div class="td flex" v-if="getPrice(optionInfo.price_3m_list, 1)" @click="changeStandard(105, 3, getPrice1(optionInfo.price_3m_list, 1))">
              <div>{{ getPrice(optionInfo.price_3m_list, 1) }}</div>
              <img v-show="standard == 105 && cycle == 3" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard != 105 || cycle != 3" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
        </van-row>
        <van-row class="row" type="flex" align="center">
          <van-col span="8" class="col1">
            <!-- 6个月 -->
            6M
          </van-col>
          <van-col span="8">
            <div class="td flex" v-if="getPrice(optionInfo.price_6m_list, 0)" @click="changeStandard(100, 6, getPrice1(optionInfo.price_6m_list, 0))">
              <div>{{ getPrice(optionInfo.price_6m_list, 0) }}</div>
              <img v-show="standard == 100 && cycle == 6" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard != 100 || cycle != 6" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
          <van-col span="8">
            <div class="td flex" v-if="getPrice(optionInfo.price_6m_list, 1)" @click="changeStandard(105, 6, getPrice1(optionInfo.price_6m_list, 1))">
              <div>{{ getPrice(optionInfo.price_6m_list, 1) }}</div>
              <img v-show="standard == 105 && cycle == 6" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard != 105 || cycle != 6" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="section">
      <div class="title">
        <!-- 2、请选择费率波动上限 -->
        {{ $t('option.l61') }}
      </div>
      <div class="info-box">
        <img class="icon" src="/img/product/info1.png" alt="极度证券">
        <div>
          <!-- 期权上限费率 = 期权费率  X  最大波动率 -->
          {{ $t('option.l92') }} = {{ $t('option.l11') }}  X  {{ $t('option.l91') }}
        </div>
      </div>
      <div class="fee-list flex">
        <div class="fee" :class="{active: fee == 5}" @click="fee = 5">5%</div>
        <div class="fee" :class="{active: fee == 10}" @click="fee = 10">10%</div>
        <div class="fee" :class="{active: fee == 20}" @click="fee = 20">20%</div>
      </div>
      <div class="fee-tip" v-if="fee && maxFee">
        <!-- 当前选项对应费率上限： -->
        {{ $t('option.l62') }}<span class="green">{{ maxFee }}%</span></div>
    </div>
    <div class="section1">
      <div class="box">
        <div class="title">
          <!-- 3、请输入名义本金 -->
          {{ $t('option.l63') }}
        </div>
        <div class="info-box">
          <img class="icon" src="/img/product/info1.png" alt="极度证券">
          <div>
            <!-- 注：名义本金额是指您需要认购的合约规模，即要进行交易的资金数额. -->
            {{ $t('option.l64') }}
          </div>
        </div>
      </div>
      <div class="box1 flex">
        <div class="flex">
          <img class="add" src="/img/product/reduce.png" alt="极度证券" @click="reduce">
          <el-input-number v-model="amount" :min="1" :precision="0" :controls="false"></el-input-number>
          <img class="add" src="/img/product/add.png" alt="极度证券" @click="add">
        </div>
        <div>x 1{{ $t('home.l11') }}</div>
      </div>
    </div>
    <div class="section">
      <div class="title">
        <!-- 4、请确认下单价格 -->
        {{ $t('option.l65') }}
      </div>
      <div class="info-box">
        <img class="icon" src="/img/product/info1.png" alt="极度证券">
        <div>
          <!-- 注：市价成交模式下，最终执行的价格以券商报价成交为准 -->
          {{ $t('option.l66') }}
        </div>
      </div>
      <div class="box2">
        <div class="flex price-box">
          <div class="left flex" @click="priceType = 1">
            <img class="check" v-show="priceType == 2" src="/img/icon/check.png" alt="极度证券">
            <img class="check" v-show="priceType == 1" src="/img/icon/radio1.png" alt="极度证券">
            <div>
              <!-- 市价成交 -->
              {{ $t('option.l67') }}
            </div>
          </div>
          <!-- <div class="right flex">
            <div class="ask-box">
              当前市价: <span class="ask">{{ $handleDigits(symbolInfo.ask, symbolInfo.digits) }}</span>
            </div>
            <div class="differ" :class="{'down': symbolInfo.spread < 0}">{{ symbolInfo.percentage > 0 ? '+' : ''  }}{{ symbolInfo.percentage }}%</div>
          </div> -->
        </div>
        <div class="flex price-box" style="opacity: 0.6;">
          <div class="left flex">
            <img class="check" v-show="priceType == 1" src="/img/icon/check.png" alt="极度证券">
            <img class="check" v-show="priceType == 2" src="/img/icon/radio1.png" alt="极度证券">
            <div style="word-break: break-all;">
              <!-- 限价成交 -->
              {{ $t('option.l68') }}
            </div>
          </div>
          <div class="right1 flex" :class="{active: priceType == 2}">
            <van-field :border="false" :disabled="priceType != 2" v-model="price" type="number" />
            <div>{{ symbolInfo.margin_currency }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="title">
        <!-- 5、订单时间设置 -->
        {{ $t('option.l69') }}
      </div>
      <div class="box3">
        <div class="flex price-box" @click="timeType = 1">
          <img class="check" v-show="timeType == 2" src="/img/icon/check.png" alt="极度证券">
          <img class="check" v-show="timeType == 1" src="/img/icon/radio1.png" alt="极度证券">
          <div>
            <!-- 当日无流动性，允许T+1日成交 -->
            {{ $t('option.l70') }}
          </div>
        </div>
        <div class="flex price-box" @click="timeType = 2">
          <img class="check" v-show="timeType == 1" src="/img/icon/check.png" alt="极度证券">
          <img class="check" v-show="timeType == 2" src="/img/icon/radio1.png" alt="极度证券">
          <div>
            <!-- 当日无流动性，取消订单 -->
            {{ $t('option.l71') }}
          </div>
        </div>
      </div>
    </div>
    <div class="section2">
      <div class="detail-box">
        <div class="title1">
          <!-- 您的购买计划 -->
          {{ $t('option.l72') }}
        </div>
        <div class="bg">
          <van-row gutter="5">
            <van-col span="12">
              <div class="flex">
                <div class="label">
                  <!-- 期权标的 -->
                  {{ $t('option.l73') }}
                </div>
                <div class="val" v-if="language == 'zh-CN'">{{ optionInfo.title }}</div>
                <div class="val" v-else-if="language == 'zh-TW'">{{ optionInfo.name_cht || optionInfo.title }}</div>
                <div class="val" v-else>{{ optionInfo.title_en || optionInfo.title }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="flex">
                <div class="label1">
                  <!-- 时间周期 -->
                  {{ $t('option.l47') }}
                </div>
                <!-- 月 -->
                <div class="val" v-if="cycle">{{cycle}}M</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="5">
            <van-col span="12">
              <div class="flex">
                <div class="label">
                  <!-- 名义本金 -->
                  {{ $t('home.l9') }}
                </div>
                <div class="val" v-if="amount">{{ currencyUtil[symbolInfo.margin_currency] }} {{ amount }} {{ $t('home.l11') }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="flex">
                <div class="label1">
                  <!-- 预估期权费 -->
                  {{ $t('option.l43') }}
                </div>
                <div class="val">{{ currencyUtil[symbolInfo.margin_currency] }} {{ $handleDigits2(Number($bigDecimal.multiply((amount || 0) * 100, optionFee))) }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="5">
            <van-col span="12">
              <div class="flex">
                <div class="label">
                  <!-- 咨询费 -->
                  {{ $t('option.l15') }}
                </div>
                <div class="val" v-if="amount">{{ currencyUtil[symbolInfo.margin_currency] }} {{ $handleDigits2(Number($bigDecimal.multiply((amount * 100 || 0), this.consultingFee))) }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="flex">
                <div class="label1">
                  <!-- 费率波动 -->
                  {{ $t('option.l42') }}
                </div>
                <div class="val">{{ fee }}%</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="5">
            <van-col span="12">
              <div class="flex">
                <div class="label">
                  <!-- 最大费用 -->
                  {{ $t('option.l74') }}
                </div>
                <div class="val">{{ currencyUtil[symbolInfo.margin_currency] }} {{ $handleDigits2(totalAmount) }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="flex">
                <div class="label1">
                  <!-- 踢出规则 -->
                  {{ $t('option.l75') }}
                </div>
                <div class="val">{{ getRule(optionInfo.rule_list) }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="5">
            <van-col span="12">
              <div class="flex">
                <div class="label">
                  <!-- 期权类型 -->
                  {{ $t('option.l76') }}
                </div>
                <div class="val">{{ getRule(optionInfo.type_list) }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="flex">
                <div class="label1">
                  <!-- 期权结构 -->
                  {{ $t('option.l5') }}
                </div>
                <!-- 平值  虚值  -->
                <div class="val" v-if="standard">{{ standard == 100 ? $t('download.l42') : ($t('option.l6') + standard) }}</div>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="5">
            <van-col span="12">
              <div class="flex">
                <div class="label">
                  <!-- 期权方向 -->
                  {{ $t('option.l77') }}
                </div>
                <div class="val">{{ getRule1(optionInfo.cmd_list) }}</div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="flex">
                <div class="label1">
                  <!-- 期权结果 -->
                  {{ $t('option.l78') }}
                </div>
                <div class="val">T+1</div>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="case-box" v-if="cashInfo.uid">
        <div>
          <!-- USD钱包可用 -->
          {{ $t('option.l79') }}
        </div>
        <div>
          <div class="balance">{{ $numToThousand(cashInfo.balance) }} USD</div>
          <div class="balance1" v-if="symbolInfo.margin_currency != 'USD'">≈{{ $numToThousand(allAssets) }} {{ symbolInfo.margin_currency }}</div>
        </div>
      </div>
      <div class="case-box" v-if="totalAmount">
        <div>
          <!-- 总费用上限 -->
          {{ $t('option.l80') }}
        </div>
        <div class="total-amount">{{ $numToThousand(totalAmount) }} {{ symbolInfo.margin_currency }}</div>
      </div>
      <div class="btn" @click="submit">
        <!-- 提交下单申请 -->
        {{ $t('option.l81') }}
      </div>
      <div class="btn-box flex">
        <div class="btn1" @click="$router.push('/convert/uid')">
          <!-- 转入资金 -->
          {{ $t('option.l82') }}
        </div>
        <div class="btn1" @click="$router.push('/option-records/1')">
          <!-- 期权持股 -->
          {{ $t('option.l83') }}
        </div>
      </div>
      <div class="tip">
        <!-- 期权服务由 极度证券（美国） 提供 -->
        {{ $t('option.l84') }}
      </div>
    </div>
    <van-popup get-container="body" :close-on-click-overlay="false" v-model="confirmPopup" :style="{ width: '292px' }">
      <confirmBox @submit="insertOptionOrder" :fee="fee" :symbolInfo="symbolInfo" :optionFee="optionFee" :info="targetInfo" @cancel="confirmPopup = false" />
    </van-popup>
    <van-popup get-container="body" v-model="successPopup" :style="{ width: '292px' }">
      <successful @cancel="successPopup = false" />
    </van-popup>
  </div>
</template>
<script>
import { insertOptionOrder, getOptionProductConfigList } from "@/api/option";
import bus from '@/utils/bus'
import { mapGetters } from "vuex";
import confirmBox from "./confirmBox.vue";
import successful from "./successful.vue";
export default {
  components: {
    confirmBox,
    successful
  },
  props: ['symbolInfo', 'optionInfo', 'optionFeeInfo'],
  data () {
    return {
      cycle: '',
      standard: '',
      optionFee: 0,
      fee: 5,
      amount: '1',
      priceType: 1,
      timeType: 1,
      price: '',
      confirmPopup: false,
      successPopup: false,
      targetInfo: {},
      productConfig: {}
    }
  },
  computed: {
    ...mapGetters(['cashInfo', 'currencyList']),
    consultingFee() {
      return this.optionFeeInfo[this.symbolInfo.market]
    },
    maxFee() {
      return Number(this.$bigDecimal.add(this.$bigDecimal.divide(this.$bigDecimal.multiply(this.optionFee, this.fee), 100), this.optionFee))
    },
    totalAmount() {
      return Number(this.$bigDecimal.multiply((this.amount || 0) * 100, this.maxFee))
    },
    allAssets() {
      return Number(this.$bigDecimal.multiply(this.cashInfo.balance, this.currencyList[this.symbolInfo.margin_currency] || 1))
    },
    currencyUtil() {
      return {
        'USD': '$',
        'CNY': '¥',
        'HKD': 'HK$',
      }
    }
  },
  watch: {
    price(val) {
      if (val == '-') {
        this.price = ''
      }
    },
  },
  created () {
    if (this.isLogin) {
      bus.$emit('updateAssets', ['getCash'])
    }
    (this.isLogin && this.getOptionProductConfigList());
  },
  methods: {
    submit() {
      if (!this.isLogin) {
        this.$router.push('/login')
        return
      }
      if (this.userInfo.group == 9999) {
        bus.$emit('abnormalPopSign')
        return
      }
      if (!this.standard) {
        // this.$toast('请选择时间周期');
        this.$toast(this.$t('option.l56'));
        return
      }
      if (!Number(this.amount)) {
        // this.$toast('请输入名义本金');
        this.$toast(this.$t('option.l57'));
        return
      }
      if (this.priceType == 2) {
        if (!Number(this.price)) {
          // this.$toast('请输入下单价格');
          this.$toast(this.$t('option.l85'));
          return
        }
      }
      if (this.totalAmount > this.allAssets) {
        // this.$toast('可用资金不足，请转入');
        this.$toast(this.$t('option.l86'));
        return
      }
      if (this.productConfig.max_amount && (Number(this.amount) * 10000) > this.productConfig.max_amount) {
        // 当前标的最大单笔限额
        this.$toast({
          className: 'van-toast1',
          message: `${this.$t('option.l87')}${(this.productConfig.max_amount / 10000).toFixed()}${this.$t('home.l11')}`,
        })
        return
      }
      this.targetInfo = {
        code: this.optionInfo.code,
        title: this.optionInfo.title,
        title_en: this.optionInfo.title_en,
        name_cht: this.optionInfo.name_cht,
        type: this.optionInfo.type,
        rule: this.optionInfo.rule,
        standard: this.standard,
        cycle: this.cycle,
        max_price: this.maxFee,
        amount: this.amount,
        bak: this.timeType
      }
      this.confirmPopup = true
      // this.insertOptionOrder()
    },
    insertOptionOrder() {
      var data = {
        code: this.optionInfo.code,
        title: this.optionInfo.title,
        type: this.optionInfo.type,
        rule: this.optionInfo.rule,
        standard: this.standard,
        cycle: this.cycle,
        max_price: this.maxFee,
        amount: Number(this.amount) * 10000,
        bak: this.timeType
      }
      if (this.priceType == 1) {
        data.expected_open_price = 0
      } else {
        data.expected_open_price = Number(this.price)
      }
      this.fullscreenLoading = true
      insertOptionOrder(data).then(() => {
        this.confirmPopup = false
        this.successPopup = true
        this.amount = '1'
        this.price = ''
        this.cycle = ''
        this.standard = ''
        this.priceType = 1
        this.timeType = 1
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    getOptionProductConfigList() {
      getOptionProductConfigList({
        num: this.symbolInfo.num,
        market: this.symbolInfo.market
      }).then(res => {
        var list = res.list || []
        this.productConfig = list[0] || {}
      }).catch(() => {})
    },
    changeStandard(standard, cycle, fee) {
      this.standard = standard
      this.cycle = cycle
      this.optionFee = fee
    },
    reduce() {
      var amount = Number(this.amount)
      if (amount <= 1) {
        this.amount = '1'
        return
      }
      this.amount = (amount - 1) + ''
    },
    add() {
      var amount = Number(this.amount)
      this.amount = (amount + 1) + ''
    },
    getPrice(price, index) {
      if (price) {
        var list = price.split(',')
        return list[index] ? (Number(list[index]) + '%') : ''
      }
    },
    getPrice1(price, index) {
      if (price) {
        var list = price.split(',')
        return list[index] ? (Number(list[index])) : 0
      }
    },
    getRule(price) {
      if (price && this.standard) {
        var list = price.split(',')
        var text = list[this.standard == 100 ? 0 : 1]
        var textName = {
          '连续3个涨停板': this.symbolInfo.market != 'CN' ? this.$t('option.l99') : this.$t('option.l97'),
          '单日涨幅30%': this.$t('option.l99'),
          '香草': this.$t('option.l98'),
        }
        return textName[text] || text || ''
      }
    },
    getRule1(price) {
      if (price && this.standard) {
        var list = price.split(',')
        var text = list[this.standard == 100 ? 0 : 1]
        var obj = {
          // '1': '看跌',
          // '0': '看涨',
          // '2': '看跌/看涨',
          '1': this.$t('option.l88'),
          '0': this.$t('option.l89'),
          '2': this.$t('option.l90'),
        }
        return obj[text]
      }
    },
  }
}
</script>
<style lang="less" scoped>
.section {
  padding: 16px 18px 10px;
  background-color: #fff;
  margin-bottom: 5px;
}
.title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-1-);
  line-height: 20px;
  margin-bottom: 7px;
}
.green {
  color: var(--color-);
}
.info-box {
  background-color: #F6FAFE;
  border-radius: 4px;
  padding: 8px 13px 7px 26px;
  font-size: 12px;
  line-height: 18px;
  color: #676767;
  position: relative;
  .tip {
    color: #A6A6A6;
  }
  .icon {
    position: absolute;
    top: 11px;
    left: 9px;
    width: 12px;
  }
}
.theard {
  padding: 13px 0 9px;
  color: #A6A6A6;
  font-size: 13px;
  .col1 {
    padding-left: 15px;
  }
  .col2 {
    text-align: center;
  }
  .col3 {
    padding-right: 20px;
    text-align: right;
  }
}
.table {
  .row {
    border-radius: 6px;
    border: 1px solid #EFEFEF;
    height: 36px;
    font-size: 13px;
    color: var(--color-1-);
    &+.row {
      margin-top: 5px;
    }
    .col1 {
      padding-left: 25px;
    }
  }
  .td {
    justify-content: center;
    cursor: pointer;
    column-gap: 13px;
  }
  
  .check {
    width: 16px;
  }
}
.fee-list {
  padding: 10px 0 9px;
  column-gap: 5px;
  .fee {
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #DBDBDB;
    color: var(--color-1-);
    line-height: 30px;
    width: 47px;
    &.active {
      color: var(--color-);
      border-color: var(--color-);
    }
  }
}
.fee-tip {
  font-size: 12px;
  color: #A6A6A6;
  padding-bottom: 5px;
}
.section1 {
  padding: 16px 0 10px;
  background-color: #fff;
  margin-bottom: 5px;
  .box {
    padding: 0 18px;
  }
  .box1 {
    padding: 11px 13px 0;
    font-size: 16px;
    color: var(--color-1-);
    column-gap: 10px;
  }
  .add {
    cursor: pointer;
    width: 54px;
  }
  .el-input-number {
    display: block;
    width: 55px;
  }
}
.box2 {
  padding-top: 17px;
  padding-bottom: 6px;
  color: var(--color-1-);
  .price-box {
    &+.price-box {
      margin-top: 10px;
    }
    .left {
      column-gap: 7px;
      cursor: pointer;
    }
    .right {
      column-gap: 16px;
    }
  }
  .differ {
    color: var(--red-);
    margin-left: 3px;
    &.down {
      color: var(--green-);
    }
  }
  .ask-box {
    padding-left: 20px;
    color: #A6A6A6;
    .ask {
      color: var(--color-1-);
    }
  }
  .right1 {
    padding-left: 18px;
    color: #A6A6A6;
    column-gap: 6px;
    &.active {
      .van-field {
        background-color: #fff;
      }
    }
  }
  .check {
    width: 16px;
  }
  .van-field {
    padding: 0 0 0 15px;
    font-size: 16px;
    line-height: 32px;
    color: var(--color-1-);
    border-radius: 6px;
    border: 1px solid #EFEFEF;
    background-color: #F5F5F5;
    max-width: 181px;
  }
}
.box3 {
  padding-top: 16px;
  padding-bottom: 7px;
  .price-box {
    column-gap: 7px;
    color: var(--color-1-);
    &+.price-box {
      margin-top: 12px;
    }
    .check {
      width: 16px;
    }
  }
}
.section2 {
  background-color: #fff;
  padding: 6px 18px 24px;
  .btn {
    cursor: pointer;
    background-color: var(--color-);
    text-align: center;
    border-radius: 6px;
    line-height: 44px;
    color: #fff;
    margin-top: 33px;
    font-size: 16px;
  }
  .van-col > .flex {
    align-items: flex-start;
  }
}
.detail-box {
  padding-top: 5.6vw;
  font-size: 12px;
  color: #fff;
  margin-bottom: 32px;
  background-image: url('@/assets/img/insert_bg.png');
  background-size: 100% auto;
  border-radius: 10px;
  background-repeat: no-repeat;
  .title1 {
    text-align: center;
    color: #E4701B;
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 23px;
  }
  .bg {
    background: linear-gradient(223deg, #697CB4 0%, #35447E 100%);
    border-radius: 10px;
    padding: 0 11px 3px;
  }
  .van-row {
    margin-bottom: 14px;
  }
  .label {
    color: rgba(255,255,255,0.39);
    padding-right: 2px;
    // word-break: break-all;
    width: 68px;
    // max-width: 50%;
    padding-right: 3px;
  }
  .label1 {
    color: rgba(255,255,255,0.39);
    width: 68px;
    // max-width: 50%;
    // word-break: break-all;
    padding-right: 3px;
  }
  .val {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    word-break: break-all;
  }
}
.case-box {
  display: flex;
  align-items: flex-start;
  color: #676767;
  line-height: 18px;
  justify-content: space-between;
  text-align: right;
  &+.case-box {
    margin-top: 21px;
  }
  .balance {
    color: var(--color-1-);
    font-size: 15px;
    font-weight: 500;
  }
  .balance1 {
    line-height: 1;
    font-size: 13px;
    margin-top: 5px;
    color: #888888;
  }
  .total-amount {
    color: var(--color-);
    font-size: 15px;
    font-weight: 500;
  }
}
.btn-box {
  padding: 18px 0;
  .btn1 {
    flex: 1;
    border-radius: 6px;
    border: 1px solid #DEDEDE;
    padding: 0 3px;
    line-height: 42px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &+.btn1 {
      margin-left: 16px;
    }
  }
}
.tip {
  padding-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #B1B9C1;
}
::v-deep {
  .section1 .el-input-number.is-without-controls .el-input__inner {
    border: none;
    padding: 0;
    height: 44px;
    line-height: 42px;
    background-color: #F5F5F5;
    color: var(--color-1-);
    border-radius: 6px;
    font-size: 16px;
    border: 1px solid #EFEFEF;
  }
}
</style>