<template>
  <div :class="{cn: userInfo.identity_country == 'cn' && userInfo.group != 2}">
    <div class="title">
      <!-- JD Trader 交易服务提示 -->
      {{ $t('statement.l') }}
    </div>
    <div class="tip2" v-if="userInfo.identity_country == 'cn' && userInfo.group != 2">
      <!-- 在您首次交易之前，请按要求仔细阅读、签署以下协议之后，点击“我已阅读并同意”按钮，开始交易。 -->
      {{ $t('statement.l1') }}
    </div>
    <div class="tip1" v-else>
      <!-- 在您首次交易之前，请先仔细阅读并同意以下协议 -->
      {{ $t('statement.l2') }}
    </div>
    <div class="row flex">
      <div class="left" @click="$router.push('/statement/user/1')">
        <!-- 《用户协议》 -->
        {{ $t('register.l7') }}
      </div>
      <div class="right" v-if="userInfo.identity_country == 'cn' && userInfo.group != 2">
        <div class="flex" v-if="user">
          <van-icon name="checked" />
          <div>
            <!-- 已签署 -->
            {{ $t('statement.l3') }}
          </div>
        </div>
        <div v-else>
          <!-- 未阅读 -->
          {{ $t('statement.l4') }}
        </div>
      </div>
    </div>
    <div class="row flex">
      <div class="left" @click="$router.push('/statement/tradeconfirm/1')">
        <!-- 《交易确认书》 -->
        {{ $t('statement.l5') }}
      </div>
      <div class="right" v-if="userInfo.identity_country == 'cn' && userInfo.group != 2">
        <div class="flex" v-if="tradeconfirm">
          <van-icon name="checked" />
          <div>
            <!-- 已签署 -->
            {{ $t('statement.l3') }}
          </div>
        </div>
        <div v-else>
          <!-- 未阅读 -->
          {{ $t('statement.l4') }}
        </div>
      </div>
    </div>
    <div class="row flex">
      <div class="left" @click="$router.push('/statement/risk/1')">
        <!-- 《合约交易风险提示》 -->
        {{ $t('statement.l6') }}
      </div>
      <div class="right" v-if="userInfo.identity_country == 'cn' && userInfo.group != 2">
        <div class="flex" v-if="risk">
          <van-icon name="checked" />
          <div>
            <!-- 已阅读 -->
            {{ $t('statement.l7') }}
          </div>
        </div>
        <div v-else>
          <!-- 未阅读 -->
          {{ $t('statement.l4') }}
        </div>
      </div>
    </div>
    <div class="row flex">
      <div class="left" @click="$router.push('/statement/legal/1')">
        <!-- 《法律声明》 -->
        {{ $t('statement.l8') }}
      </div>
      <div class="right" v-if="userInfo.identity_country == 'cn' && userInfo.group != 2">
        <div class="flex" v-if="legal">
          <van-icon name="checked" />
          <div>
            <!-- 已阅读 -->
            {{ $t('statement.l7') }}
          </div>
        </div>
        <div v-else>
          <!-- 未阅读 -->
          {{ $t('statement.l4') }}
        </div>
      </div>
    </div>
    <div class="btns">
      <div class="btn flex" :class="{dis: dis}" @click="submit">
        <div>
          <!-- 我已阅读并同意 -->
          {{ $t('statement.l9') }}
        </div>
      </div>
      <div class="btn1 flex" @click="cancel">
        <div>
          <!-- 取 消 -->
          {{ $t('statement.l10') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { updateUserTradeProtocol } from "@/api/user";
export default {
  props: ['symbol'],
  data () {
    return {
      user: 0,
      tradeconfirm: 0,
      risk: 0,
      legal: 0,
    }
  },
  computed: {
    dis() {
      return this.userInfo.identity_country == 'cn' && this.userInfo.group != 2 && (this.user == 0 || this.tradeconfirm == 0 || this.risk == 0 || this.legal == 0)
    }
  },
  created () {
    var trade_protocol = this.userInfo.trade_protocol ? JSON.parse(this.userInfo.trade_protocol) : [];
    trade_protocol.forEach(item => {
      if (['user', 'tradeconfirm', 'risk', 'legal'].indexOf(item.code) !== -1 && item.status == 1) {
        this[item.code] = 1
      }
    })
    this.$store.dispatch('getUserInfo').then(() => {
    }).finally(() => {
      var trade_protocol = this.userInfo.trade_protocol ? JSON.parse(this.userInfo.trade_protocol) : [];
      trade_protocol.forEach(item => {
        if (['user', 'tradeconfirm', 'risk', 'legal'].indexOf(item.code) !== -1 && item.status == 1) {
          this[item.code] = 1
        }
      })
    })
  },
  methods: {
    submit() {
      if (this.dis) {
        this.$toast({
          // message: '请签署所有协议',
          message: this.$t('statement.l11'),
          position: 'bottom'
        });
        return
      }
      this.updateUserTradeProtocol()
    },
    updateUserTradeProtocol() {
      var data = [];
      ['user', 'tradeconfirm', 'risk', 'legal'].forEach(item => {
        data.push({
          code: item,
          client: 'H5',
          status: 1
        })
      })
      updateUserTradeProtocol({
        protocol: JSON.stringify(data)
      }).then(() => {
        this.$store.dispatch('getUserInfo')
        this.cancel()
        var exchangeUrl = sessionStorage.getItem('exchangeUrl')
        if (exchangeUrl) {
          this.$router.push(JSON.parse(exchangeUrl))
        } else {
          if (this.symbol) {
            this.$router.push(`/exchange/${this.symbol}/buy`)
          }
        }
      }).catch(() => {})
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  padding: 20px 16px;
  text-align: center;
  font-size: 20px;
  border-bottom: 1px solid #F6F6F6;
}
.tip1 {
  text-align: center;
  line-height: 24px;
  padding: 24px 16px 25px;
}
.tip2 {
  line-height: 24px;
  padding: 19px 20px 35px;
}
.row {
  justify-content: space-between;
  font-size: 16px;
  color: #0F8DDF;
  column-gap: 12px;
  padding: 0 27px;
  &+.row {
    margin-top: 30px;
  }
  .left {
    font-weight: 600;
    min-width: 0px;
    max-width: 100%;
    cursor: pointer;
  }
  .right {
    color: #B6B6B6;
    >.flex {
      color: #0F8DDF;
      column-gap: 4px;
    }
  }
}
.btns {
  padding: 40px 35px 29px;
  .btn {
    cursor: pointer;
    background-color: #000000;
    justify-content: center;
    height: 50px;
    padding: 0 10px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    &.dis {
      background-color: #F6F6F6;
      color: #B6B6B6;
    }
  }
  .btn1 {
    cursor: pointer;
    justify-content: center;
    height: 50px;
    padding: 0 10px;
    border: 1px solid #F6F6F6;
    font-size: 16px;
    color: #B6B6B6;
  }
}
.cn {
  .row+.row {
    margin-top: 40px;
  }
  .btns {
    padding: 50px 35px 29px;
  }
}
</style>