<template>
  <div class="info-page">
    <h2>基础信息</h2>
    <div class="info">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <p>{{ item.name }}</p>
          <p>
            <span>
              {{ item.value }}
            </span>
          </p>
        </li>
      </ul>
      <div class="image">
        <img :src="img" alt="" />
      </div>
    </div>
    <h2>优惠规则</h2>
    <div class="rule">
      <ul>
        <li v-for="(item, index) in list1" :key="index">
          <p>{{ item.name }}</p>
          <p>{{ item.value }}</p>
        </li>
        <li>
          <p v-for="(item,index) in promotionDetail" :key="index">{{ item }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Marketing from '@/api/Marketing'
export default {
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      list: [
        { name: '活动名称:', value: '-' },
        { name: '活动介绍:', value: '-' },
        { name: '报名时间:', value: '-' },
        { name: '起止时间:', value: '-' },
        { name: '活动保证金:', value: '-' },
        { name: '保证金金额:', value: '-' },
        { name: '活动标签:', value: '-' }
      ],
      list1: [
        { name: '优惠方式:', value: '-' },
        { name: '优惠方案:', value: '-' }
      ],
      img: '',
      promotionDetail: []
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    async getDetails() {
      const vm = this
      const res = await Marketing.getDetails(vm.params.id)
      const o = vm.list
      const t = vm.list1
      const resData = res.data
      if (resData.code === 0) {
        const info = resData.data
        o[0].value = info.name
        o[1].value = info.description
        o[2].value = `${info.applyStartTime}-${info.applyEndTime}`
        o[3].value = `${info.activityStartTime}-${info.activityEndTime}`
        o[4].value = info.isNeedSecurityDeposit ? '需要' : '不需要'
        o[5].value = info.securityDeposit / 100
        o[6].value = info.tag
        t[0].value = info.promotionType === 1 ? '满减' : '优惠券'
        t[1].value = info.promotionPlan === 1 ? '叠加优惠' : '阶梯优惠'
        vm.img = info.image
        if (info.promotionDetail && info.promotionDetail.length) {
          info.promotionDetail.forEach(item => {
            vm.promotionDetail.push(`满${item.fullAmount / 100}减${item.discountAmount / 100}`)
          })
        }
      }
    }
  }
}
</script>

<style lang='less' scoped>
.info-page {
    h2 {
      font-size: 24px;
      font-weight: 500;
      position: relative;
      &::before {
        content: '';
        height: 24px;
        width: 4px;
        background-color: #3A68F2;
        position: absolute;
        left: -10px;
        top: 2px;
        display: block;
      }
    }
    padding: 50px 100px;
    .info, .rule {
        ul {
            width: 45%;
            list-style: none;
            overflow: hidden;
            li {
                p {
                    float: left;
                    font-size: 16px;
                    &:nth-child(1) {
                       width: 100px;
                        color: #333333;
                    }
                    &:nth-child(2) {
                        width: calc(100% - 120px);
                        color: #666666;
                    }
                }
            }
        }
    }
    .info {
      overflow: hidden;
      ul {
        float: left;
        li {
          &:last-child  {
            p {
              &:nth-child(2) {
                span {
                  color:#fff;
                  display: inline-block;
                  padding: 1px 5px;
                  background-color: #FF7911;
                }
              }
            }
          }
        }
      }
      .image {
        width: 50%;
        height: 100%;
        padding-left: 50px;
        float: left;
        img {
          width: 180px;
          height: 180px;
          border-radius:4px 4px 0px 4px;
        }
      }
    }
}
</style>
