<template>
  <div>
    <div class="box2 flex">
      <div class="label">
        <!-- 类型 -->
        {{ $t('exchange.l41') }}
        <!-- <i class="el-icon-warning-outline"></i> -->
      </div>
      <div class="right flex" @click="typeShow = true">
        <div class="type">
          <!-- 限价单   市价单-->
          {{ type == 1 ? $t('exchange.l42') : $t('exchange.l43') }}
        </div>
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="box2 flex" v-if="type == 1">
      <div class="label">
        <!-- 价格 -->
        {{ $t('market.l4') }}
      </div>
      <div class="right flex">
        <div class="flex input-box">
          <div class="tip2" v-if="tip3Show">
            <div class="text">
              <!-- 至少与当前价相差0.50或5% -->
              {{ $t('exchange.l102').replace('{p}', $handleDigits(point, symbolInfo.digits)).replace('{p1}', percentage) }}
            </div>
            <div class="border"></div>
          </div>
          <van-field :border="false" v-model="price" type="number" />
        </div>
        <div class="icon-box flex">
          <i class="el-icon-minus" @click="addPrice(1)"></i>
          <i class="el-icon-plus" @click="addPrice(2)"></i>
        </div>
      </div>
    </div>
    <div class="box2 flex">
      <div class="label">
        <van-popover placement="bottom-start" v-model="showPopover" trigger="click">
          <div class="popover-ul">
            <div class="li" :class="{active: inputType == 1}" @click="selectInputType(1)">
              <!-- 数量 -->
              {{ $t('common.l25') }}
            </div>
            <div class="li" :class="{active: inputType == 2}" @click="selectInputType(2)">
              <!-- 金额 -->
              {{ $t('account.l40') }}
            </div>
          </div>
          <template #reference>
            <div>
              {{ inputType == 1 ? $t('common.l25') : $t('account.l40') }}<van-icon name="arrow-down" />
            </div>
          </template>
        </van-popover>
      </div>
      <div class="right flex" v-if="inputType == 1">
        <div class="flex input-box">
          <div class="tip1" v-if="tip1Show">
            <div class="text">
              <!-- 非整手数, 请输入500的倍数 -->
              {{ $t('exchange.l100').replace('{p}', symbolInfo.contract_size) }}
            </div>
            <div class="border"></div>
          </div>
          <!-- 请输入数量 -->
          <van-field :border="false" :placeholder="$t('exchange.l53')" v-model="volume" type="digit" />
        </div>
        <div class="icon-box flex">
          <i class="el-icon-minus" @click="addVolume(1)"></i>
          <i class="el-icon-plus" @click="addVolume(2)"></i>
        </div>
      </div>
      <div class="right flex" v-if="inputType == 2">
        <div class="flex">
          <!-- 请输入金额 -->
          <van-field :border="false" :placeholder="$t('exchange.l99')" v-model="amount" type="number" />
        </div>
        <div class="icon-box flex">
          <i class="el-icon-minus" @click="addAmount(1)"></i>
          <i class="el-icon-plus" @click="addAmount(2)"></i>
        </div>
      </div>
    </div>
    <div class="box2 flex">
      <div class="label">
        {{ inputType == 2 ? $t('common.l25') : $t('account.l40') }}
      </div>
      <div class="right flex" v-if="inputType == 1">
        {{ $numToThousand(sumMoney) }}
      </div>
      <div class="right" v-if="inputType == 2">
        <div class="input-box">
          <div class="tip2" v-if="tip2Show && sumVolume1">
            <div class="text">
              <!-- 已向下取整 -->
              {{ $t('exchange.l101') }}
            </div>
            <div class="border"></div>
          </div>
          {{ sumVolume1 }}
        </div>
      </div>
    </div>
    <div class="box4">
      <van-row gutter="20">
        <van-col span="12">
          <div class="flex">
            <!-- 保证金说明 进行合约交易时，用于保证合约能顺利履行的最小金额。-->
            <div class="label lab1" @click="descriptionPopShow($t('exchange.l90'), $t('exchange.l91'))">
              <!-- 保证金 -->
              {{ $t('exchange.l89') }}
            </div>
            <div class="val" v-if="inputType == 1 && symbolCopy.symbol">{{ $numToThousand(this.$bigDecimal.divide(sumMoney, symbolInfo.margin_divider1 || symbolCopy.margin_divider))}}</div>
            <div class="val" v-if="inputType == 2 && symbolCopy.symbol">{{ $numToThousand(this.$bigDecimal.divide(amount, symbolInfo.margin_divider1 || symbolCopy.margin_divider))}}</div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="flex">
            <!-- 可用现金说明：可用现金是客户账号中可以用于交易的资金。 -->
            <div class="label lab1" @click="descriptionPopShow($t('account.l88'), $t('account.l89'))">
              <!-- 可用资金 -->
              {{ $t('exchange.l46') }}
            </div>
            <div class="val" v-if="accountInfo.account">{{ $numToThousand(accountInfo.margin_free) }}</div>
            <div class="val" v-else>0.00</div>
          </div>
        </van-col>
      </van-row>
      <van-row gutter="20">
        <van-col span="12">
          <div class="flex">
            <div class="label lab1" @click="maxLeverPop = true">
              <!-- 最大杠杆 -->
              {{ $t('exchange.l86') }}
            </div>
            <div class="val" v-if="symbolCopy.symbol">{{ (symbolInfo.margin_divider1 || symbolCopy.margin_divider).toFixed(0) }}</div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="flex">
            <div class="label">
              <!-- 最大可买 -->
              {{ $t('exchange.l87') }}
            </div>
            <div class="val" v-if="accountInfo.account">{{ maxBuy }}</div>
            <div class="val" v-else>0</div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="box2 flex">
      <div class="label">
        <!-- 止损 -->
        {{ $t('exchange.l4') }}
        <!-- <i class="el-icon-warning-outline"></i> -->
      </div>
      <div class="right flex input-box">
        <div class="tip3 flex" v-if="slTipText">
          <div class="text">
            {{ slTipText }}
            <div class="border"></div>
          </div>
        </div>
        <van-field :border="false" @input="slTipText = ''" input-align="center" v-model="sl" type="number" />
        <div class="icon-box flex">
          <i class="el-icon-minus" @click="addsl(1)"></i>
          <i class="el-icon-plus" @click="addsl(2)"></i>
        </div>
      </div>
    </div>
    <div class="box2 flex">
      <div class="label">
        <!-- 止盈 -->
        {{ $t('exchange.l5') }}
        <!-- <i class="el-icon-warning-outline"></i> -->
      </div>
      <div class="right flex input-box">
        <div class="tip3 flex" v-if="tpTipText">
          <div class="text">
            {{ tpTipText }}
            <div class="border"></div>
          </div>
        </div>
        <van-field :border="false" @input="tpTipText = ''" input-align="center" v-model="tp" type="number" />
        <div class="icon-box flex">
          <i class="el-icon-minus" @click="addtp(1)"></i>
          <i class="el-icon-plus" @click="addtp(2)"></i>
        </div>
      </div>
    </div>
    <div class="box2 flex" v-if="type == 1">
      <div class="label">
        <!-- 期限 -->
        {{ $t('exchange.l47') }}
        <!-- <i class="el-icon-warning-outline"></i> -->
      </div>
      <div class="right flex" @click="termShow = true">
        <div class="type">
          <!-- 当日有效   撤单前有效-->
          {{ term == 1 ? $t('exchange.l48') : $t('exchange.l49') }}
        </div>
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="box3" v-if="symbolCopy.enable == 1">
      <div class="btn-box flex">
        <div class="btn buy" @click="submitClick(0)">
          <!-- 买入 -->
          {{ $t('exchange.l50') }}
        </div>
        <div class="btn sell" @click="submitClick(1)">
          <!-- 卖出 -->
          {{ $t('exchange.l51') }}
        </div>
      </div>
    </div>
    <div class="box3" v-else>
      <div class="btn-box">
        <div class="btn dis">
          <!-- 该标的暂不支持交易 -->
          {{ $t('product.l92') }}
        </div>
      </div>
    </div>
    <van-popup v-model="typeShow" round position="bottom">
      <priceType :type="type" @success="selectTypeBack"/>
    </van-popup>
    <van-popup v-model="termShow" round position="bottom">
      <termType :term="term" @success="selectTermBack"/>
    </van-popup>
    <van-popup v-model="openShow" round position="bottom">
      <openPop :type="type" @cancel="openShow = false" @success="openPosition" v-if="openShow"/>
    </van-popup>
    <van-popup v-model="textDescriptionPop" round position="bottom">
      <textDescription :title="title" :text="text"/>
    </van-popup>
    <van-popup v-model="maxLeverPop" round position="bottom">
      <maxLever/>
    </van-popup>
  </div>
</template>
<script>
import priceType from "./priceType.vue";
import termType from "./termType.vue";
import openPop from "./openPop.vue";
import textDescription from "@/components/textDescription";
import maxLever from "@/components/textDescription/maxLever.vue";
import bus from '@/utils/bus'
import { openPosition, openEntrust } from "@/api/exchange";
import { marketPoint } from "@/utils/config";
import { getStorage, setStorage } from '@/utils/localStorage'
export default {
  props: ['symbol', 'accountInfo', 'symbolCopy'],
  components: {
    priceType,
    termType,
    openPop,
    textDescription,
    maxLever
  },
  data () {
    return {
      price: '',
      volume: '1',
      amount: '',
      tp: '0',
      sl: '0',
      type: 2,
      term: 1,
      openCmd: 0,
      openShow: false,
      openPopShowSign: false,
      termShow: false,
      typeShow: false,
      textDescriptionPop: false,
      maxLeverPop: false,
      title: '',
      text: '',
      showPopover: false,
      inputType: 1,
      tpTipText: '',
      slTipText: '',
      percentage: 5,
    }
  },
  inject: ['getproductDataObj'],
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
    symbolInfo() {
      return this.productDataObj[this.symbol] || {}
    },
    maxBuy() {
      if (this.type == 1 && !Number(this.price)) {
        return '--'
      }
      var a = (this.type == 1 ? (Number(this.price)) : this.productDataObj[this.symbol].ask)
      return Number(this.$bigDecimal.divide(this.$bigDecimal.multiply(this.accountInfo.margin_free, this.symbolCopy.margin_divider || 1), a)).toFixed(0)
    },
    sumVolume() {
      if (!Number(this.amount)) {
        return 0
      }
      return Number(this.$bigDecimal.divide(this.$bigDecimal.divide(this.amount, this.type == 1 ? this.price : this.productDataObj[this.symbol].ask), this.symbolInfo.contract_size))
    },
    sumVolume1() {
      if (!Number(this.sumVolume)) {
        return 0
      }
      return Number(this.$bigDecimal.multiply(Math.floor(this.sumVolume), this.symbolInfo.contract_size))
    },
    sumMoney() {
      if (this.type == 1 && !Number(this.price)) {
        return 0
      }
      return Number(this.$bigDecimal.multiply(this.type == 1 ? this.price : this.productDataObj[this.symbol].ask, this.volume))
    },
    point() {
      var point1 = Number(this.$bigDecimal.multiply(this.symbolInfo.point, marketPoint[this.symbolInfo.market]))
      var point2 = Number(this.$bigDecimal.divide(this.$bigDecimal.multiply(this.percentage, this.productDataObj[this.symbol].ask), 100))
      return point1 > point2 ? point2 : point1
    },
    tip1Show() {
      return this.volume && !(Number.isInteger(Number(this.$bigDecimal.divide(this.volume, this.symbolInfo.contract_size))))
    },
    tip2Show() {
      return !(Number.isInteger(this.sumVolume))
    },
    tip3Show() {
      var price = Number(this.price)
      return price <= (this.productDataObj[this.symbol].ask + this.point) && price >= (this.productDataObj[this.symbol].ask - this.point)
    }
  },
  created () {
    this.openPopShowSign = getStorage('openPopShowSign') || false;
    this.volume = this.symbolInfo.contract_size
  },
  methods: {
    submitClick(cmd) {
      if (!this.isLogin) {
        this.$router.push('/login?rejectUrl=' + this.$route.path)
        return
      }
      if (this.userInfo.group == 9999) {
        bus.$emit('abnormalPopSign')
        return
      }
      // if (cmd === 0 && this.buyDisable) {
      //   return
      // }
      // if (cmd === 1 && this.sellDisable) {
      //   return
      // }
      var trade_protocol = this.userInfo.trade_protocol ? JSON.parse(this.userInfo.trade_protocol) : [];
      var sign = 0
      trade_protocol.forEach(item => {
        if (['user', 'tradeconfirm', 'risk', 'legal'].indexOf(item.code) !== -1 && item.status == 1) {
          sign += 1
        }
      })
      if (sign !== 4) {
        this.$emit('serviceTipsPopshow')
        return
      }
      if (this.type == 1) {
        if (!Number(this.price)) {
          this.$notify({
            // message: '请输入价格',
            message: this.$t('exchange.l52'),
            type: 'danger'
          })
          return
        }
      }
      if (!Number(this.volume)) {
        this.$notify({
          // message: '请输入数量',
          message: this.$t('exchange.l53'),
          type: 'danger'
        })
        return
      }
      if (this.inputType == 1) {
        if (!Number(this.volume)) {
          this.$notify({
            // message: '请输入数量',
            message: this.$t('exchange.l53'),
            type: 'danger'
          })
          return
        }
        if (this.tip1Show) {
          return
        }
      } else {
        if (!Number(this.amount)) {
          this.$notify({
            // message: '请输入金额',
            message: this.$t('exchange.l99'),
            type: 'danger'
          })
          return
        }
        if (this.sumVolume1 < this.symbolInfo.contract_size) {
          this.$notify({
            // message: '非整手数, 请输入500的倍数',
            message: this.$t('exchange.l100').replace('{p}', this.symbolInfo.contract_size),
            type: 'danger'
          })
          return
        }
      }
      var tp = Number(this.tp)
      var sl = Number(this.sl)
      if (tp) {
        if (cmd == 0) {
          if (tp <= Number(this.productDataObj[this.symbol].ask + this.point)) {
            // message: '高于当前价 0.50或5%'
            this.tpTipText = this.$t('exchange.l103').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)).replace('{p1}', this.percentage)
            return
          }
        } else {
          if (tp >= Number(this.productDataObj[this.symbol].ask - this.point)) {
            // message: '低于当前价 0.50或5%'
            this.tpTipText = this.$t('exchange.l104').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)).replace('{p1}', this.percentage)
            return
          }
        }
        this.tpTipText = ''
      } else {
        this.tpTipText = ''
      }
      if (sl) {
        if (cmd == 0) {
          if (sl >= Number(this.productDataObj[this.symbol].ask - this.point)) {
            // message: '低于当前价 0.50或5%'
            this.slTipText = this.$t('exchange.l104').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)).replace('{p1}', this.percentage)
            return
          }
        } else {
          if (sl <= Number(this.productDataObj[this.symbol].ask + this.point)) {
            // message: '高于当前价 0.50或5%'
            this.slTipText = this.$t('exchange.l103').replace('{p}', this.$handleDigits(this.point, this.symbolInfo.digits)).replace('{p1}', this.percentage)
            return
          }
        }
        this.slTipText = ''
      } else {
        this.slTipText = ''
      }
      if (this.type == 2) {
        this.openCmd = cmd
        if (this.openPopShowSign) {
          this.openPosition()
        } else {
          this.openShow = true
        }
      }
      if (this.type == 1) {
        var cmd1 = 0
        var price = Number(this.price)
        if (cmd == 0) {
          if (this.tip3Show) {
            return
          }
          if (price > this.productDataObj[this.symbol].ask) {
            cmd1 = 4
          } else {
            cmd1 = 2
          }
        } else {
          if (this.tip3Show) {
            return
          }
          if (price > this.productDataObj[this.symbol].bid) {
            cmd1 = 3
          } else {
            cmd1 = 5
          }
        }
        this.openCmd = cmd1
        if (this.openPopShowSign) {
          this.openEntrust()
        } else {
          this.openShow = true
        }
      }
    },
    openPosition(sign) {
      if (this.type == 1) {
        this.openEntrust(sign)
        return
      }
      this.fullscreenLoading = true
      var volume = Number(this.$bigDecimal.divide(this.inputType == 1 ? this.volume : this.sumVolume1 , this.symbolInfo.contract_size))
      openPosition({
        account: this.accountInfo.account,
        symbol: this.symbol,
        cmd: this.openCmd,
        volume: volume,
        server: this.accountInfo.server,
        tp: Number(this.tp) === 0 ? '' : Number(this.tp),
        sl: Number(this.sl) === 0 ? '' : Number(this.sl),
      }).then(() => {
        this.$notify({
          // message: '下单成功',
          message: this.$t('exchange.l54'),
          type: 'success'
        })
        this.openShow = false
        if (sign) {
          this.openPopShowSign = true
          setStorage('openPopShowSign', true)
        }
        // bus.$emit('updateAssets', ['getAccountList'])
        // bus.$emit('updateOrder')
      }).finally(() => {
        this.fullscreenLoading = false
      }).catch((err) => {
        if (err.code && (err.code == 134 || err.code == 3004)) {
          this.$emit('deposit')
        }
      })
    },
    openEntrust(sign) {
      this.fullscreenLoading = true
      var volume = Number(this.$bigDecimal.divide(this.inputType == 1 ? this.volume : this.sumVolume1 , this.symbolInfo.contract_size))
      openEntrust({
        account: this.accountInfo.account,
        symbol: this.symbol,
        cmd: this.openCmd,
        price: this.price,
        expiration: this.term,
        volume: volume,
        server: this.accountInfo.server,
        tp: Number(this.tp) === 0 ? '' : Number(this.tp),
        sl: Number(this.sl) === 0 ? '' : Number(this.sl),
      }).then(() => {
        this.$notify({
          // message: '下单成功',
          message: this.$t('exchange.l54'),
          type: 'success'
        })
        this.openShow = false
        if (sign) {
          this.openPopShowSign = true
          setStorage('openPopShowSign', true)
        }
        // bus.$emit('updateOrder')
      }).finally(() => {
        this.fullscreenLoading = false
      }).catch(() => {

      })
    },
    addPrice(type) {
      if (type == 1) {
        if (!Number(this.price)) {
          return
        }
        this.price = Number(this.$bigDecimal.subtract(Number(this.price) || 0, this.symbolInfo.point)) + ''
      }
      if (type == 2) {
        this.price = Number(this.$bigDecimal.add(Number(this.price) || 0, this.symbolInfo.point)) + ''
      }
    },
    addsl(type) {
      this.slTipText = ''
      if (type == 1) {
        if (!Number(this.sl)) {
          return
        }
        this.sl = Number(this.$bigDecimal.subtract(Number(this.sl) || 0, this.symbolInfo.point)) + ''
      }
      if (type == 2) {
        this.sl = Number(this.$bigDecimal.add(Number(this.sl) || 0, this.symbolInfo.point)) + ''
      }
    },
    addtp(type) {
      this.tpTipText = ''
      if (type == 1) {
        if (!Number(this.tp)) {
          return
        }
        this.tp = Number(this.$bigDecimal.subtract(Number(this.tp) || 0, this.symbolInfo.point)) + ''
      }
      if (type == 2) {
        this.tp = Number(this.$bigDecimal.add(Number(this.tp) || 0, this.symbolInfo.point)) + ''
      }
    },
    addVolume(type) {
      if (type == 1) {
        if (!Number(this.volume) || Number(this.volume) <= this.symbolInfo.contract_size) {
          this.volume = this.symbolInfo.contract_size
          return
        }
        this.volume = Number(this.$bigDecimal.subtract(Number(this.volume) || 0, this.symbolInfo.contract_size)) + ''
      }
      if (type == 2) {
        this.volume = Number(this.$bigDecimal.add(Number(this.volume) || 0, this.symbolInfo.contract_size)) + ''
      }
    },
    addAmount(type) {
      var price = this.$bigDecimal.multiply(this.symbolInfo.contract_size, this.type == 1 ? (Number(this.price)) : this.productDataObj[this.symbol].ask)
      if (type == 1) {
        if (!Number(this.amount) || Number(this.amount) <= Number(price)) {
          this.amount = price
          return
        }
        this.amount = Number(this.$bigDecimal.subtract(Number(this.amount) || 0, price)) + ''
      }
      if (type == 2) {
        this.amount = Number(this.$bigDecimal.add(Number(this.amount) || 0, price)) + ''
      }
    },
    changePrice() {
      this.price = this.$handleDigits(this.symbolInfo.ask, this.symbolInfo.digits) + ''
    },
    selectTypeBack(type) {
      this.typeShow = false
      if (this.type == type) {
        return
      }
      this.tp = '0'
      this.sl = '0'
      this.type = type
      this.price = this.$handleDigits(this.$bigDecimal.add(this.symbolInfo.ask, this.$bigDecimal.add(this.point, this.symbolInfo.point)), this.symbolInfo.digits) + ''
    },
    selectTermBack(term) {
      this.term = term
      this.termShow = false
    },
    selectInputType(val) {
      this.showPopover = false
      if (this.inputType == val) {
        return
      }
      if (val == 2) {
        this.amount = this.sumMoney
      }
      if (val == 1) {
        this.volume = this.sumVolume1
      }
      this.inputType = val
    },
    descriptionPopShow(title, text) {
      this.title = title
      this.text = text
      this.textDescriptionPop = true
    }
  }
}
</script>
<style lang="less" scoped>
.box2 {
  column-gap: 7px;
  border-bottom: 1px solid #F6F6F6;
  font-size: 13px;
  height: 45px;
  .label {
    width: 127px;
    color: #888888;
  }
  .right {
    flex: 1;
    justify-content: space-between;
    min-width: 10%;
    max-width: 100%;
  }
  .el-icon-arrow-right {
    font-size: 18px;
    color: #AAAAAA;
  }
  .icon-box {
    column-gap: 13px;
  }
  .el-icon-plus, .el-icon-minus {
    font-size: 18px;
    color: #B6B6B6;
  }
  .icon {
    width: 18px;
  }
  .van-field {
    padding: 0 15px 0 0;
    flex: 1;
    min-width: 0px;
  }
}
.box4 {
  padding: 15px 0 19px;
  font-size: 12px;
  border-bottom: 1px solid #F6F6F6;
  .van-row + .van-row {
    margin-top: 10px;
  }
  .flex {
    column-gap: 7px;
  }
  .label {
    color: #888888;
    max-width: 50%;
    &.lab1 {
      cursor: pointer;
      text-decoration: underline dotted #979797;
      text-underline-offset: 3px;
    }
  }
  .val {
    flex: 1;
    min-width: 0;
    text-align: right
  }
}
.box3 {
  padding: 18px 0 16px;
  .btn-box {
    flex: 1;
    column-gap: 11px;
    position: relative;
  }
  .btn {
    flex: 1;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    line-height: 41px;
    text-align: center;
    border-radius: 21px;
    font-weight: 600;
  }
  .buy {
    background-color: var(--red-);
    &.dis {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
  .sell {
    background-color: var(--green-);
    &.dis {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
  .dis {
    cursor: not-allowed;
    color: #A5A5A5;
    font-weight: 400;
    background-color: #f4f4f4;
  }
  .icon1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
  }
  .img-box {
    column-gap: 3px;
  }
  .icon {
    width: 22px;
  }
}
.input-box {
  position: relative;
  flex: 1;
  min-width: 0px;
  .tip1 {
    position: absolute;
    left: 5px;
    top: 0;
    transform: translateY(-100%);
    z-index: 4;
    .text {
      background-color: #FFE5CD;
      padding: 3px 5px;
      font-size: 10px;
      color: #FF6301;
      border-radius: 4px 4px 4px 0;
    }
    .border {
      position: absolute;
      left: 0;
      bottom: 1px;
      transform: translateY(100%);
      border-left: 4px solid #FFE5CD;
      border-top: 3px solid #FFE5CD;
      border-right: 4px solid transparent;
      border-bottom: 3px solid transparent;
      border-bottom-left-radius: 2px;
    }
  }
  .tip2 {
    position: absolute;
    left: 5px;
    top: -4px;
    transform: translateY(-100%);
    z-index: 4;
    .text {
      background-color: #D8D8D8;
      padding: 7px 5px;
      font-size: 10px;
      border-radius: 4px 4px 4px 0;
    }
    .border {
      position: absolute;
      left: 0;
      bottom: 1px;
      transform: translateY(100%);
      border-left: 4px solid #D8D8D8;
      border-top: 3px solid #D8D8D8;
      border-right: 4px solid transparent;
      border-bottom: 3px solid transparent;
      border-bottom-left-radius: 2px;
    }
  }
  .tip3 {
    position: absolute;
    left: 50%;
    top: -4px;
    transform: translate(-50%, -100%);
    z-index: 4;
    width: 100%;
    justify-content: center;
    padding-left: 52px;
    .text {
      background-color: #D8D8D8;
      padding: 7px 5px;
      font-size: 10px;
      border-radius: 4px 4px 4px 0;
      text-align: center;
      position: relative;
    }
    .border {
      position: absolute;
      left: 0;
      bottom: 1px;
      transform: translateY(100%);
      border-left: 4px solid #D8D8D8;
      border-top: 3px solid #D8D8D8;
      border-right: 4px solid transparent;
      border-bottom: 3px solid transparent;
      border-bottom-left-radius: 2px;
    }
  }
}
.popover-ul {
  width: 68px;
  padding: 0 10px;
  .li {
    cursor: pointer;
    font-size: 14px;
    color: #B6B6B6;
    line-height: 33px;
    text-align: center;
    &+.li {
      border-top: 1px solid #F6F6F6;
    }
    &.active {
      color: #000000;
    }
  }
}
</style>