<template>
  <div class="more_page">
    <h2>{{ getTitle(info.meetCondition) }}</h2>
    <div class="condition">
      <p>交易条件:</p>
      <p>
        <span v-for="(item, index) in list" :key="index">{{ item }}</span>
      </p>
    </div>

    <el-button type="primary" @click="close">我知道了</el-button>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      list: ['最后消费时间在30天内', '累计成功交易在3-4次', '累计消费金额在100-200元']
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      const arr = []
      const obj = this.info.config
      arr.push(`最后消费时间在${obj.lastConsumTime.value}${obj.lastConsumTime.type === 1 ? '天' : ''}内`)

      if (obj.totalConsumTimes) {
        const times = obj.totalConsumTimes.split('-')
        arr.push(`累计成功交易在${times[0]}-${times[1]}次`)
      }

      if (obj.totalConsumAmount) {
        const amount = obj.totalConsumAmount.split('-')
        arr.push(`累计消费金额在${amount[0] / 100}-${amount[1] / 100}元`)
      }
      this.list = arr
    },
    getTitle(v) {
      return v === 1 ? '满足以下任意条件即可' : '必须满足以下所有条件'
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang='less'>
.more_page {
    width: 80%;
    margin: 0 auto;
    color: #333;
    text-align: center;
    h2 {
        font-size: 24px;
        font-weight: 400;
    }
    .condition {
        overflow: hidden;
        p {
            font-size: 16px;
            float: left;
            &:nth-child(1) {
                width: 30%;
                text-align: right;
                padding-right:10px;
                box-sizing: border-box;
            }
            &:nth-child(2) {
                text-align: left;
                width: 70%;
                span {
                    display: block;
                }
            }
        }
    }
}
</style>
