<template>
  <div class="pop">
    <div class="line-box flex">
      <div class="line"></div>
    </div>
    <div class="title-box flex">
      <img class="not" src="/img/product/not.png" alt="极度证券">
      <div class="title">{{ symbolInfo.title }}</div>
      <i class="el-icon-caret-bottom" @click="cancel"></i>
    </div>
    <div class="box flex">
      <el-progress :width="254" type="circle" :percentage="circle" define-back-color="#E8E8E8" :stroke-width="15" color="#058AFF" :show-text="false"></el-progress>
      <div class="box1">
        <div>
          <!-- 距离开盘还有 -->
          {{ $t('product.l103') }}
        </div>
        <van-count-down :time="time" @change="countChange" format="S">
          <template #default="timeData">
            <span class="block">{{ getCountDownHours(timeData) }}</span>
              <!-- 小时 -->
            <span class="block">{{ $t('product.l104') }}</span>
            <span class="block">{{ timeData.minutes < 10 ? ('0' + timeData.minutes) : timeData.minutes }}</span>
              <!-- 分钟 -->
            <span class="block">{{ $t('product.l106') }}</span>
          </template>
        </van-count-down>
        <div class="switch-box flex" v-if="isLogin">
          <div>
            <!-- 通知我 -->
            {{ $t('product.l112') }}
          </div>
          <van-switch size="28px" v-model="checked" active-color="#FE6E30" inactive-color="#EBEBEB" @change="switchChange"/>
        </div>
      </div>
    </div>
    <div class="tip">
      <!-- 在此期间，您仍可以交易外汇,商品,股指,虚拟货币 去交易  -->
      {{ $t('product.l105') }} <span class="span" @click="$router.replace('/market/cfd/hot')">{{ $t('product.l111') }}</span>
    </div>
  </div>
</template>
<script>
import { updateUserNotice } from "@/api/notice";
import { mapGetters } from "vuex";
export default {
  props: ['countDown', 'symbolInfo', 'countDownDiff'],
  data () {
    return {
      rate: 100,
      time: 0,
      circle: 0,
      checked: false
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created () {
    this.time = this.countDown
    this.circle = Number(((this.countDownDiff - this.time) * 100 / this.countDownDiff).toFixed(0))
    if (this.isLogin && this.userInfo.notice) {
      if (this.userInfo.notice.indexOf(this.symbolInfo.market + '_OPEN') != -1) {
        this.checked = true
      }
    }
  },
  methods: {
    countChange(currentTime) {
      var time = (currentTime.days * 24 * 60 * 60 * 1000) + (currentTime.hours * 60 * 60 * 1000) + (currentTime.minutes * 60 * 1000) + (currentTime.seconds * 1000) + currentTime.milliseconds
      this.circle = Number(((this.countDownDiff - time) * 100 / this.countDownDiff).toFixed(0))
    },
    cancel() {
      this.$emit('cancel')
    },
    getCountDownHours(timeData) {
      var hours = timeData.days * 24
      hours += timeData.hours
      return hours < 0 ? ('0' + hours) : hours
    },
    switchChange() {
      this.$nextTick(() => {
        updateUserNotice({
          notice: (this.symbolInfo.market + '_open').toLocaleLowerCase(),
          type: this.checked ? 'open' : 'close'
        }).then(res => {
          this.$store.dispatch('getUserInfo')
        }).catch(() => {})
      })
    }
  }
}
</script>
<style lang="less" scoped>
.pop {
  padding: 11px 18px 27px;
}
.line-box {
  justify-content: center;
  margin-bottom: 17px;
  .line {
    width: 36px;
    height: 4px;
    background: #E7E7E7;
    border-radius: 2px;
  }
}
.title-box {
  justify-content: center;
  position: relative;
  padding: 10px 20px;
  font-weight: 500;
  font-size: 16px;
  .not {
    width: 19px;
    margin-right: 7px;
  }
  .title {
    min-width: 10%;
  }
  .el-icon-caret-bottom {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: #7B7B7B;
  }
}
.box {
  justify-content: center;
  position: relative;
  padding: 25px 0;
  text-align: center;
  .van-count-down {
    font-size: 26px;
    line-height: 1;
    margin-top: 14px;
    white-space: nowrap;
  }
  .box1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .block {
    color: #058AFF;
  }
}
.tip {
  text-align: center;
  font-size: 12px;
  color: #A1A1A1;
  line-height: 20px;
  .span {
    cursor: pointer;
    color: var(--color-);
    text-decoration: underline;
  }
}
.switch-box {
  justify-content: center;
  font-size: 15px;
  column-gap: 6px;
  padding-top: 26px;
  .van-switch {
    width: 58px;
    height: 31px;
  }
}
::v-deep {
  .van-switch__node {
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    box-shadow: 0px 2px 4px 0px #B0B0B0;
  }
  .van-switch--on .van-switch__node {
    transform: translateX(25px) translateY(-50%);
  }
}
</style>