<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="section">
      <div class="tip">
        <!-- 当前标的无期权实时报价，您可以提交您的下单要求，我们的客服会为您向上游询价。 -->
        {{ $t('option.l45') }}
      </div>
      <div class="title">
        <!-- 1、请选择您想咨询的报价内容（可多选） -->
        {{ $t('option.l46') }}
      </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"  @click="changeStandard('100,1')">
              <img v-show="standard.indexOf('100,1') !== -1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard.indexOf('100,1') === -1" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
          <van-col span="8">
            <div class="td flex" @click="changeStandard('105,1')">
              <img v-show="standard.indexOf('105,1') !== -1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard.indexOf('105,1') === -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" @click="changeStandard('100,2')">
              <img v-show="standard.indexOf('100,2') !== -1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard.indexOf('100,2') === -1" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
          <van-col span="8">
            <div class="td flex" @click="changeStandard('105,2')">
              <img v-show="standard.indexOf('105,2') !== -1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard.indexOf('105,2') === -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">
            <!-- 3个月 -->
            3M
          </van-col>
          <van-col span="8">
            <div class="td flex" @click="changeStandard('100,3')">
              <img v-show="standard.indexOf('100,3') !== -1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard.indexOf('100,3') === -1" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
          <van-col span="8">
            <div class="td flex" @click="changeStandard('105,3')">
              <img v-show="standard.indexOf('105,3') !== -1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard.indexOf('105,3') === -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">
            <!-- 6个月 -->
            6M
          </van-col>
          <van-col span="8">
            <div class="td flex" @click="changeStandard('100,6')">
              <img v-show="standard.indexOf('100,6') !== -1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard.indexOf('100,6') === -1" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
          <van-col span="8">
            <div class="td flex" @click="changeStandard('105,6')">
              <img v-show="standard.indexOf('105,6') !== -1" class="check" src="/img/icon/check1.png" alt="极度证券">
              <img v-show="standard.indexOf('105,6') === -1" class="check" src="/img/icon/check.png" alt="极度证券">
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="section1">
      <div class="box">
        <div class="title">
          <!-- 2、请输入您希望的名义本金 -->
          {{ $t('option.l51') }}
        </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">
        <!-- 3、请输入您的联系方式 -->
        {{ $t('option.l52') }}
      </div>
      <div class="input-box">
        <!-- 请输入您的邮箱或电话号码 -->
        <el-input :placeholder="$t('option.l53')" v-model="account"></el-input>
      </div>
      <div class="flex check-box" @click="checked = !checked">
        <img v-show="checked" class="check" src="/img/icon/check1.png" alt="极度证券">
        <img v-show="!checked" class="check" src="/img/icon/check.png" alt="极度证券">
        <div>
          <!-- 通过系统消息联系我 -->
          {{ $t('option.l54') }}
        </div>
      </div>
    </div>
    <div class="section2">
      <div class="btn" @click="submit">
        <!-- 提交咨询 -->
        {{ $t('option.l55') }}
      </div>
    </div>
  </div>
</template>
<script>
import { insertOptionInquiry } from "@/api/option";
export default {
  props: ['symbolInfo'],
  data () {
    return {
      cycle: [],
      standard: [],
      amount: '1',
      account: '',
      checked: false
    }
  },
  methods: {
    submit() {
      if (!this.isLogin) {
        this.$router.push('/login')
        return
      }
      if (!this.standard.length) {
        // this.$toast('请选择时间周期');
        this.$toast(this.$t('option.l56'));
        return
      }
      if (!Number(this.amount)) {
        // this.$toast('请输入名义本金');
        this.$toast(this.$t('option.l57'));
        return
      }
      if (!this.account.trim() && !this.checked) {
        // this.$toast('请填写联系方式');
        this.$toast(this.$t('option.l58'));
        return
      }
      this.insertOptionInquiry()
    },
    insertOptionInquiry() {
      var data = {
        title: this.symbolInfo.title,
        code: this.symbolInfo.symbol,
        amount: Number(this.amount) * 10000,
        contact: this.account,
        message: this.checked ? 1 : 0,
        bak: '',
        type: '',
        rule: ''
      }
      var standard = []
      var cycle = []
      this.standard.forEach(item => {
        var i = item.split(',')
        if (standard.indexOf(i[0]) == -1) {
          standard.push(i[0])
        }
        if (cycle.indexOf(i[1]) == -1) {
          cycle.push(i[1])
        }
      })
      data.standard = JSON.stringify(standard)
      data.cycle = JSON.stringify(cycle)
      this.fullscreenLoading = true
      insertOptionInquiry(data).then(() => {
        this.$notify({
          // message: '提交成功',
          message: this.$t('join.l55'),
          type: 'success'
        });
        this.amount = '1'
        this.standard = []
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    changeStandard(standard) {
      var index = this.standard.indexOf(standard)
      if (index !== -1) {
        this.standard.splice(index, 1)
      } else {
        this.standard.push(standard)
      }
    },
    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) + ''
    },
  }
}
</script>
<style lang="less" scoped>
.section {
  padding: 16px 18px 17px;
  background-color: #fff;
  margin-bottom: 5px;
  .tip {
    font-size: 12px;
    line-height: 18px;
    color: #A6A6A6;
    margin-bottom: 9px;
  }
}
.title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-1-);
  line-height: 20px;
  margin-bottom: 7px;
}
.theard {
  padding: 11px 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;
  }
}
.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;
  }
}
.check-box {
  cursor: pointer;
  font-size: 13px;
  color: #A6A6A6;
  .check {
    width: 16px;
    margin-right: 4px;
  }
}
.section2 {
  background-color: #fff;
  padding: 16px 18px 24px;
  .btn {
    cursor: pointer;
    background-color: var(--color-);
    text-align: center;
    border-radius: 6px;
    line-height: 44px;
    color: #fff;
    font-size: 16px;
  }
}
::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;
  }
  .input-box {
    padding-top: 9px;
    padding-bottom: 11px;
    .el-input__inner {
      background-color: #F5F5F5;
      border-radius: 6px;
      border: 1px solid #EFEFEF;
      height: 44px;
      line-height: 42px;
      font-size: 16px;
      color: var(--color-1-);
      padding: 0 11px;
    }
  }
}
</style>