<template>
  <dl class="receipt-dl">
    <dt :class="['receipt-dl-image', `state-${state}`]" />
    <dd class="receipt-dl-title">{{ title }}</dd>
    <dd class="receipt-dl-amount">
      <span class="receipt-dl-amount__label" v-html="`${label}：`" />
      <span class="receipt-dl-amount__value">¥{{ price }}</span>
      <cr-icon
        class="receipt-dl-amount__icon"
        type="info-o"
        size="14px"
        color="#c8c9cc"
        @click="showMessageDialog"
      />
    </dd>
  </dl>
</template>

<script>
export default {
  props: {
    state: {
      type: [Number, String],
      default: 2
    },
    title: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    price: {
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    showMessageDialog() {
      this.$dialog({
        customClass: 'cr-dialog-invoice',
        closeOnClickOverlay: true,
        title: '开票规则说明',
        message: `1.开票金额为消费者实付金额，不包含运费、支付优惠金额<br />2.如果订单发生退货退款，开票金额将变更为最终实付金额`,
        messageAlign: 'left',
        showCancelButton: false,
        cancelButtonColor: '#333333',
        confirmButtonText: '知道了'
      });
    }
  }
};
</script>
<style lang="less" scoped>
.receipt-dl {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  &-image {
    width: 100px;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    &.state-1,
    &.state-4 {
      background-image: url(~@/assets/images/electronicInvoice/onOpen.png);
    }

    &.state-2,
    &.state-5 {
      background-image: url(~@/assets/images/electronicInvoice/success.png);
    }

    &.state-3,
    &.state-6 {
      background-image: url(~@/assets/images/electronicInvoice/faild.png);
    }
  }
  &-title {
    min-height: 22px;
    .text-size(16);
    font-weight: bold;
    color: @black;
  }

  &-amount {
    .text-size(14);
    padding-top: 4px;
    display: flex;
    align-items: center;
    &__label {
      color: @gray-4;
    }
    &__value {
      font-weight: bold;
      color: @black;
    }
    &__icon {
      margin-left: 4px;
    }
  }
}
</style>
