<template>
  <div>
    <div class="title">
      <!-- 跟单设置 -->
      {{ $t('follow.l121') }}
    </div>
    <div class="box">
      <div class="sub">
        <!-- 跟单比例范围 -->
        {{ $t('follow.l122') }}
      </div>
      <div class="input-box flex">
        <div class="left flex">
          <van-field @blur="minBlur" type="number" v-model="min_ratio"></van-field>
          <div class="to">&ndash;</div>
          <van-field @blur="maxBlur" type="number" v-model="max_ratio"></van-field>
        </div>
        <div>
          <!-- 倍 -->
          {{ $t('home.l48') }}
        </div>
      </div>
      <div class="tip">
        <!-- 每次开仓，跟单用户可以跟随的下单量倍数 -->
        {{ $t('follow.l123') }}
      </div>
    </div>
    <div class="box" v-if="false">
      <div class="title1">
        <!-- 自动发单 -->
        {{ $t('follow.l124') }}
      </div>
      <div class="row flex">
        <div>
          <!-- 每次交易下单自动发单 -->
          {{ $t('follow.l125') }}
        </div>
        <van-switch v-model="checked" size="26px" active-color="#2EBD85" inactive-color="#B6B6B6" />
      </div>
      <div class="tip">
        <!-- 开启该选项后，您每次交易操作都将自动同步到跟单 -->
        <i class="el-icon-info"></i>{{ $t('follow.l126') }}
      </div>
    </div>
  </div>
</template>
<script>
import { updateExpert } from "@/api/copy";
import { mapGetters } from "vuex";
export default {
  data () {
    return {
      min_ratio: '',
      max_ratio: '',
      checked: true,
    }
  },
  computed: {
    ...mapGetters(['expertInfo']),
  },
  watch: {
    expertInfo: {
      handler() {
        if (!this.min_ratio) {
          this.min_ratio = this.expertInfo.min_ratio
        }
        if (!this.max_ratio) {
          this.max_ratio = this.expertInfo.max_ratio
        }
      },
      deep: true
    },
  },
  created () {
    if (!this.min_ratio) {
      this.min_ratio = this.expertInfo.min_ratio
    }
    if (!this.max_ratio) {
      this.max_ratio = this.expertInfo.max_ratio
    }
  },
  methods: {
    minBlur() {
      var ratio = Number(this.min_ratio)
      if (ratio > 0 && ratio <= Number(this.max_ratio) && ratio != this.expertInfo.min_ratio) {
        this.updateExpert({
          min_ratio: ratio
        })
      }
    },
    maxBlur() {
      var ratio = Number(this.max_ratio)
      if (ratio > 0 && ratio >= Number(this.min_ratio) && ratio != this.expertInfo.max_ratio) {
        this.updateExpert({
          max_ratio: ratio
        })
      }
    },
    updateExpert(data) {
      updateExpert(data).then(() => {
        this.$store.dispatch('getExpertInfo')
      }).catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  padding: 10px 0 14px;
  font-weight: 600;
  font-size: 16px;
}
.box {
  padding-bottom: 10px;
}
.sub {
  font-weight: 600;
  color: #B6B6B6;
  margin-bottom: 14px;
}
.input-box {
  padding-bottom: 12px;
  color: #888888;
  column-gap: 10px;
  .left {
    flex: 1;
    min-width: 0px;
    column-gap: 4px;
  }
  .to {
    font-weight: 600;
  }
  .van-field {
    flex: 1;
    min-width: 0px;
    background: #F6F6F6;
    border-radius: 4px;
    text-align: center;
    padding: 8px;
  }
}
.title1 {
  padding: 10px 0 7px;
  font-weight: 600;
  font-size: 16px;
}
.row {
  margin-bottom: 3px;
  justify-content: space-between;
}
.tip {
  font-size: 10px;
  color: #B6B6B6;
  .el-icon-info {
    color: #F6465D;
    margin-right: 2px;
  }
}
::v-deep {
  .van-field__control {
    text-align: center;
    color: #B6B6B6;
  }
}
</style>