<template>
  <div class="rules">
    <div class="rules-title">
      <span class="title">拼团玩法</span>
      <span class="desc" @click="showRules">详细规则 <i class="iconfont icon-arrow"/></span>
    </div>
    <cr-image src="https://img.lkbang.net/activity/rules.png" />
  </div>
</template>
<style lang="less" scoped>
.rules {
  &-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @padding-sm;
    .title {
      .text-14();
      color: @font-color-dark;
    }
    .desc {
      .text-13();
      color: @gray-4;
      i {
        .text-12();
        color: #c6c6c6;
        font-weight: normal;
      }
    }
  }
}
</style>
<script>
import { isApp, isWxMp } from '@/service/validation.service';
export default {
  props: {
    groupInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    showRules() {
      this.$dialog({
        messageAlign: 'left',
        closeOnClickOverlay: !isApp && !isWxMp ? false : true,
        message: this.groupInfo.groupBuyDesc || '',
        title: '拼团须知',
        showCancelButton: false,
        confirmButtonText: '我知道了'
      });
    }
  }
};
</script>
