<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="hreader">
      <!-- 通知设置 -->
      {{ $t('market.l31') }}
      <div class="save" @click="updateUserPriceRisk">
        <!-- 保存 -->
        {{ $t('common.l47') }}
      </div>
    </div>
    <div class="tr flex" v-if="false">
      <div class="left flex">
        <div>
          交易标的自动加入自选
          <!-- {{ $t('common.l41') }} -->
        </div>
      </div>
      <div class="right">
        <van-switch :active-value="1" :inactive-value="0" v-model="US.STATUS" size="26px" active-color="#2EBD85" inactive-color="#B6B6B6" />
      </div>
    </div>
    <div class="tip">
      <!-- 自选标的达到涨跌幅条件提醒设置 -->
      {{ $t('market.l30') }}
    </div>
    <div class="tr flex">
      <div class="left flex">
        <div>
          <!-- 美股 -->
          {{ $t('common.l41') }}
        </div>
        <van-field :border="false" v-model="US.VALUE" type="number" />
        <div>
          %
        </div>
      </div>
      <div class="right">
        <van-switch :active-value="1" :inactive-value="0" v-model="US.STATUS" size="26px" active-color="#2EBD85" inactive-color="#B6B6B6" />
      </div>
    </div>
    <div class="tr flex">
      <div class="left flex">
        <div>
          <!-- A股 -->
          {{ $t('common.l61') }}
        </div>
        <van-field :border="false" v-model="CN.VALUE" type="number" />
        <div>
          %
        </div>
      </div>
      <div class="right">
        <van-switch :active-value="1" :inactive-value="0" v-model="CN.STATUS" size="26px" active-color="#2EBD85" inactive-color="#B6B6B6" />
      </div>
    </div>
    <div class="tr flex">
      <div class="left flex">
        <div>
          <!-- 港股 -->
          {{ $t('common.l42') }}
        </div>
        <van-field :border="false" v-model="HK.VALUE" type="number" />
        <div>
          %
        </div>
      </div>
      <div class="right">
        <van-switch :active-value="1" :inactive-value="0" v-model="HK.STATUS" size="26px" active-color="#2EBD85" inactive-color="#B6B6B6" />
      </div>
    </div>
    <div class="tr flex">
      <div class="left flex">
        <div>
          <!-- 综合 -->
          {{ $t('market.l10') }}
        </div>
        <van-field :border="false" v-model="CFD.VALUE" type="number" />
        <div>
          %
        </div>
      </div>
      <div class="right">
        <van-switch :active-value="1" :inactive-value="0" v-model="CFD.STATUS" size="26px" active-color="#2EBD85" inactive-color="#B6B6B6" />
      </div>
    </div>
  </div>
</template>
<script>
import { updateUserPriceRisk } from "@/api/user";
export default {
  data () {
    return {
      US: {
        VALUE: '5',
        STATUS: 0,
      },
      CN: {
        VALUE: '5',
        STATUS: 0,
      },
      HK: {
        VALUE: '5',
        STATUS: 0,
      },
      CFD: {
        VALUE: '5',
        STATUS: 0,
      }
    }
  },
  created () {
    this.$store.dispatch('getUserInfo').then(() => {
    }).catch(() => {}).finally(() => {
      if (this.userInfo.price_risk) {
        var price_risk = JSON.parse(this.userInfo.price_risk)
        for(var item in price_risk) {
          this.$set(this, item, price_risk[item])
        }
      }
    })
  },
  methods: {
    updateUserPriceRisk() {
      var data = {
        US: this.US,
        CN: this.CN,
        HK: this.HK,
        CFD: this.CFD,
      }
      this.fullscreenLoading = true
      updateUserPriceRisk({
        risk: JSON.stringify(data)
      }).then(res => {
        this.$notify({
          // message: '设置成功',
          message: this.$t('setting.alter3'),
          type: 'success'
        })
        this.$emit('cancel')
        this.$store.dispatch('getUserInfo')
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.hreader {
  position: relative;
  padding: 17px 0;
  text-align: center;
  font-size: 16px;
  border-bottom: 1px solid #F6F6F6;
  .save {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 14px;
  }
}
.tip {
  padding: 9px 16px 10px;
  font-size: 12px;
  color: rgba(136, 136, 136, 0.88);
}
.tr {
  height: 60px;
  border-bottom: 1px solid #F6F6F6;
  justify-content: space-between;
  font-size: 16px;
  padding: 0 16px;
  .left {
    flex: 1;
    min-width: 0px;
    column-gap: 10px;
  }
  .van-field {
    width: 70px;
    border-radius: 4px;
    border: 1px solid #F6F6F6;
    padding: 2px 6px;
  }
}
::v-deep {
  .van-field {
    .van-cell__value--alone{
      color: #000;
    }
    .van-field__control {
      text-align: center;
    }
  }
}
</style>