<template>
  <van-popup :close-on-click-overlay="false" class="close-market-popup" get-container="body" v-model="closeShow" :overlay-style="{opacity: 0}" :style="{ width: '292px' }">
    <div class="pop">
      <div class="title">
        <span class="span">
          <!-- 【{{marketName[market]}}休市提醒】 -->
          {{ $t('market.l16').replace('{p}', marketName[market]) }}
        </span>
        {{ activeMarket.title }}</div>
      <div class="text">{{ activeMarket.description }}</div>
      <div class="btn-box">
        <div class="btn" @click="cancel">
          <!-- 我知道了 -->
          {{ $t('market.l15') }}
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script>

export default {
  props: ['market', 'activeMarket'],
  data () {
    return {
      closeShow: true
    }
  },
  computed: {
    marketName() {
      return {
        'CN': this.$t('market.l9'),
        'US': this.$t('common.l41'),
        'HK': this.$t('common.l42'),
        'CFD': this.$t('common.l40'),
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
      // this.$store.commit('setMarketPop', this.market)
    }
  }
}
</script>
<style lang="less" scoped>
.pop {
  padding: 25px 18px 20px;
}
.title {
  font-size: 15px;
  line-height: 18px;
  margin-bottom: 9px;
  .span {
    color: #2E8CF3;
  }
}
.text {
  text-align: center;
  color: #767676;
  line-height: 20px;
  font-size: 12px;
  margin-bottom: 14px;
}
.btn-box {
  padding: 0 14px;
  .btn {
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #B8B8B8;
    line-height: 38px;
    font-size: 14px;
    color: #000000;
  }
}
</style>