<template>
  <div class="minus-list__item">
    <div class="minus-list__left">
      <p>{{ info.activityDesc }}</p>
      <span>活动有效期：{{ info.startDate }}-{{ info.endDate }}</span>
      <div v-if="info.canNotUseDescription" class="minus-list__tip">
        <img v-if="info.canNotUseDescriptionIconUrl" :src="info.canNotUseDescriptionIconUrl" />
        <p>{{ info.canNotUseDescription }}</p>
      </div>
    </div>
    <div class="minus-list__right">
      <cr-icon v-if="info.isSelect" type="checked" color="#ec3333" size="25px" />
      <!--      禁用状态-->
      <cr-icon
        v-else-if="info.canNotUseDescription"
        type="@/assets/images/createOrder/disable.png"
        size="25px"
      />
      <cr-icon v-else type="circle" color="#dcdcdc" size="25px" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  }
};
</script>
<style lang="less" scoped>
.minus-list__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
}
.minus-list__left {
  .text-size(14);
  span {
    color: @font-color-base;
    .text-size(12);
  }
}
::v-deep .cr-icon {
  line-height: 28px !important;
}
.minus-list {
  &__tip {
    .text-size(11);
    color: #ee0a24;
    margin-bottom: 3px;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    img {
      width: 10px;
      height: 10px;
      margin-right: 4px;
    }
  }
}
</style>
