<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 跟单详情 -->
    <BackBar1 :title="$t('follow.l25')"/>
    <div class="section" v-if="expertInfo.eid">
      <div class="box1 flex">
        <div class="left flex">
          <van-image
            width="36"
            height="36"
            round
            fit="cover"
            :src="expertInfo.header || '/img/home/user.png'"
          />
          <div class="right">
            <div class="flex name-box">
              <div class="name">
                {{ expertInfo.title }}
              </div>
              <div class="level">
                {{ expertInfo.level }}
                <!-- 高级 -->
                <!-- {{ $t('setting.l14') }} -->
              </div>
            </div>
            <div class="time">
              UID：{{ expertInfo.eid }}
            </div>
          </div>
        </div>
        <div class="right1" @click="$router.back()">
          <!-- 取消跟单 -->
          {{ $t('follow.l30') }}
        </div>
      </div>
      <van-divider :style="{ borderColor: '#F6F6F6'}" />
    </div>
    <div class="box">
      <div class="title">
        <!-- 跟单资金设置 -->
        {{ $t('follow.l42') }}
      </div>
      <!-- 请输入跟随该交易专家的最大资金数量 -->
      <van-field type="number" v-model="max_margin" :placeholder="$t('follow.l43')">
        <template #button>
          <div class="util">
            USD
          </div>
        </template>
      </van-field>
      <div class="tip flex">
        <div>
          <!-- 资金将从跟单账户中冻结，当前跟单账户余额： -->
          {{ $t('follow.l44') }}<span class="number">{{ $numToThousand(followAccount.margin_free) }} USD</span>
        </div>
        <div class="href" @click="$router.push('/convert/' + followAccount.id)">
          <!-- 划转 -->
          {{ $t('home.l15') }}
        </div>
      </div>
      <div class="title">
        <!-- 跟单比例设置 -->
        {{ $t('follow.l45') }}
      </div>
      <van-field type="number" @blur="ratioBlur" v-model="ratioInput"  :placeholder="$t('follow.l46')">
        <template #button>
          <div class="util">
            <!-- 倍 -->
            {{ $t('home.l48') }}
          </div>
        </template>
      </van-field>
      <div class="slider">
        <van-slider @change="ratioChnage" active-color="#0F8DDF" bar-height="4px" button-size="16px" v-model="ratio" :min="0" :max="100" />
      </div>
      <div class="tip1">
        <!-- 每次下单数量事交易专家下单数量的 0.5 倍 -->
        {{ $t('follow.l47').replace('{p}', ratio) }}
      </div>
      <div class="tip1">
        <!-- 跟单将直接使用跟单标的对应的账户资金，若账户资金不足则无法进行跟单 -->
        <i class="el-icon-info"></i>{{ $t('follow.l48') }}
      </div>
    </div>
    <div class="box">
      <div class="title border">
        <!-- 风险控制 -->
        {{ $t('follow.l49') }}
      </div>
      <div class="lab">
        <!-- 止损比例 -->
        {{ $t('follow.l50') }}
      </div>
      <van-field @blur="slBlur" type="digit" v-model="slInput" placeholder="(0-1000)">
        <template #button>
          <div class="util">
            %
          </div>
        </template>
      </van-field>
      <div class="slider slider1">
        <van-slider @change="slChnage" active-color="#0F8DDF" bar-height="4px" button-size="16px" v-model="sl" :min="0" :max="1000" />
      </div>
      <div class="lab">
        <!-- 止盈比例 -->
        {{ $t('follow.l51') }}
      </div>
      <van-field @blur="tpBlur" type="digit" v-model="tpInput" placeholder="(0-1000)">
        <template #button>
          <div class="util">
            %
          </div>
        </template>
      </van-field>
      <div class="slider slider2">
        <van-slider @change="tpChnage" active-color="#0F8DDF" bar-height="4px" button-size="16px" v-model="tp" :min="0" :max="1000" />
      </div>
    </div>
    <div class="fixed">
      <div class="border">
        <div class="href1" @click="checked = !checked">
          <van-icon v-if="!checked" name="circle" />
          <i v-if="checked" class="el-icon-success"></i>
          <div>
            <!-- 我同意跟随交易专家操作自动跟单 -->
            {{ $t('follow.l52') }}
          </div>
        </div>
        <div class="href1" @click="checked1 = !checked1">
          <van-icon v-if="!checked1" name="circle" />
          <i v-if="checked1" class="el-icon-success"></i>
          <div>
            <!-- 我已阅读并同意<span class="active" @click.stop="$router.push('/statement/5')">《极度跟单协议》</span> -->
            {{ $t('follow.l53') }}<span class="active" @click.stop="$router.push('/statement/followUser')">{{ $t('follow.l54') }}</span>
          </div>
        </div>
      </div>
      <div class="btn" :class="{dis: dis}" @click="nextStep">
        <!-- 下一步 -->
        {{ $t('common.l49') }}
      </div>
    </div>
    <van-popup v-model="confirmPop" round position="bottom">
      <confirmBox :ratio="ratio" :sl="sl" :tp="tp" v-if="confirmPop" @submit="submit"/>
    </van-popup>
  </div>
</template>
<script>
import BackBar1 from '@/components/backBar1'
import confirmBox from "./components/confirmBox.vue";
import { getExpertList, insertFollow, getFollowList, updateFollow } from "@/api/copy";
import { mapGetters } from "vuex";
export default {
  components: {
    BackBar1,
    confirmBox
  },
  data () {
    return {
      list: [],
      expertInfo: {},
      max_margin: '',
      ratio: 0,
      ratioInput: '',
      sl: 0,
      slInput: '',
      tp: 0,
      tpInput: '',
      checked: true,
      checked1: true,
      confirmPop: false,
      id: '',
    }
  },
  computed: {
    ...mapGetters(['followAccount']),
    dis() {
      return !this.max_margin.trim() || !this.ratioInput.trim() || !this.checked || !this.checked1
    }
  },
  created () {
    this.id = this.$route.params.id
    this.getExpertList()
    this.getFollowList()
    this.$store.dispatch('getFollowAccount')
  },
  methods: {
    nextStep() {
      if (!this.max_margin.trim()) {
        // this.$toast('请输入跟单资金');
        this.$toast(this.$t('follow.l55'));
        return
      }
      if (Number(this.max_margin) > this.followAccount.margin_free) {
        // this.$toast('账户余额不足');
        this.$toast(this.$t('ajax.3004'));
        return
      }
      if (!this.ratioInput.trim()) {
        // this.$toast('请输入跟单倍率');
        this.$toast(this.$t('follow.l143'));
        return
      }
      if (this.dis) {
        return
      }
      this.confirmPop = true
    },
    submit() {
      this.confirmPop = false
      if (this.list.length) {
        this.updateFollow()
        return
      }
      var data = {
        eid: this.id,
        max_margin: this.max_margin,
        ratio: this.ratioInput,
        sl: Number(this.$bigDecimal.divide(this.slInput, 100)),
        tp: Number(this.$bigDecimal.divide(this.tpInput, 100)),
      }
      this.fullscreenLoading = true
      insertFollow(data).then(() => {
        this.$notify({
          // message: '提交成功',
          message: this.$t('join.l55'),
          type: 'success'
        });
        this.$router.replace('/apply/copy/success/' + this.id)
      }).catch(() => {
      }).finally(() => {
        this.fullscreenLoading = false
      })
    },
    updateFollow() {
      var data = {
        eid: this.id,
        max_margin: this.max_margin,
        ratio: this.ratioInput,
        sl: Number(this.$bigDecimal.divide(this.slInput, 100)),
        tp: Number(this.$bigDecimal.divide(this.tpInput, 100)),
        status: 1,
      }
      this.fullscreenLoading = true
      updateFollow(data).then(() => {
        this.$notify({
          // message: '提交成功',
          message: this.$t('join.l55'),
          type: 'success'
        });
        this.$router.replace('/apply/copy/success/' + this.id)
      }).catch(() => {
      }).finally(() => {
        this.fullscreenLoading = false
      })
    },
    getExpertList() {
      getExpertList({
        eid: this.id
      }).then(res => {
        var list = res.list || []
        this.expertInfo = list[0] || {}
      }).catch(() => {})
    },
    getFollowList() {
      getFollowList({
        status: 0,
        eid: this.id,
      }).then(res => {
        this.list = res.list || []
      }).catch(() => {})
    },
    ratioChnage() {
      this.ratioInput = (this.ratio.toString() || '')
    },
    slChnage() {
      this.slInput = (this.sl.toString() || '')
    },
    tpChnage() {
      this.tpInput = (this.tp.toString() || '')
    },
    ratioBlur() {
      var ratioInput = Number(this.ratioInput)
      if (ratioInput < 0) {
        this.ratioInput = ''
        this.ratio = 0
        return
      }
      if (ratioInput > 100) {
        this.ratioInput = '100'
        this.ratio = 100
        return
      }
      this.ratio = Number(ratioInput)
    },
    slBlur() {
      var slInput = Number(this.slInput)
      if (slInput < 0) {
        this.slInput = ''
        this.sl = 0
        return
      }
      if (slInput > 1000) {
        this.slInput = '1000'
        this.sl = 1000
        return
      }
      this.sl = slInput
    },
    tpBlur() {
      var tpInput = Number(this.tpInput)
      if (tpInput < 0) {
        this.tpInput = ''
        this.tp = 0
        return
      }
      if (tpInput > 1000) {
        this.tpInput = '1000'
        this.tp = 1000
        return
      }
      this.tp = tpInput
    }
  }
}
</script>
<style lang="less" scoped>
.section {
  justify-content: space-between;
  padding: 0 16px;
  column-gap: 12px;
  .left {
    flex: 1;
    min-width: 0;
    column-gap: 10px;
  }
  .right {
    flex: 1;
    min-width: 0;
  }
  .name-box {
    margin-bottom: 4px;
    column-gap: 4px;
  }
  .level {
    border-radius: 2px;
    border: 1px solid #F6F6F6;
    padding: 2px 3px;
    font-weight: 300;
    font-size: 10px;
  }
  .time {
    font-size: 10px;
    color: #B6B6B6;
  }
  .right1 {
    cursor: pointer;
    background: #000000;
    border-radius: 15px;
    padding: 7px 10px;
    font-size: 12px;
    color: #FFFFFF;
  }
  .van-divider {
    margin: 14px 0;
  }
}
.box {
  padding: 0 16px 16px;
}
.title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  &.border {
    border-top: 1px solid #F6F6F6;
    padding-top: 19px;
  }
}
.van-field {
  background: #F6F6F6;
  border-radius: 0px;
  border: none;
  padding: 8px 10px;
  .util {
    font-size: 14px;
    color: #B6B6B6;
    opacity: 0.88;
  }
}
.tip {
  justify-content: space-between;
  color: #9C9C9C;
  column-gap: 6px;
  font-size: 10px;
  padding-top: 12px;
  padding-bottom: 20px;
  .number {
    color: #000;
  }
  .href {
    font-size: 14px;
    color: #0F8DDF;
    cursor: pointer;
    white-space: nowrap;
  }
}
.tip1 {
  color: #B6B6B6;
  font-size: 10px;
  line-height: 14px;
  &+.tip1 {
    margin-top: 4px;
  }
  .el-icon-info {
    color: #F6465D;
  }
}
.slider {
  padding: 24px 8px 20px;
}
.slider1 {
  padding-bottom: 36px;
}
.slider2 {
  padding-bottom: 6px;
}
.lab {
  color: #B6B6B6;
  margin-bottom: 14px;
}
.fixed {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 0 14px 20px;
  background-color: #fff;
  .border {
    border-top: 1px solid #F6F6F6;
    padding: 19px 2px 30px;
  }
}
.href1 {
  display: flex;
  align-items: flex-start;
  color: #B6B6B6;
  cursor: pointer;
  column-gap: 4px;
  &+.href1 {
    margin-top: 20px;
  }
  .el-icon-success {
    color: #000;
  }
  .active {
    color: #0F8DDF;
  }
}
.btn {
  background-color: #000;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  &.dis {
    cursor: no-drop;
    background-color: #F6F6F6;
    color: #B6B6B6;
  }
}
::v-deep {
  .van-cell::after {
    display: none;
  }
  .van-slider__button {
    box-shadow: none;
    border: 5px solid #000;
  }
}
</style>