<template>
  <ul class="detail">
    <li class="detail-li">
      <span class="li__label">发票类型</span>
      <span class="li__value">增值税电子普通发票</span>
    </li>
    <li class="detail-li">
      <span class="li__label">发票内容</span>
      <span class="li__value">{{ contentType[invoiceInfo.invoiceContentType] || '' }}</span>
    </li>
    <li class="detail-li">
      <span class="li__label">抬头类型</span>
      <span class="li__value">{{ titleType[invoiceInfo.invoiceTitleType] || '' }}</span>
    </li>
    <li class="detail-li">
      <span class="li__label">抬头名称</span>
      <span class="li__value">{{ invoiceInfo.invoiceTitle }}</span>
    </li>
    <li class="detail-li">
      <span class="li__label">收件邮箱</span>
      <span class="li__value">{{ invoiceInfo.email }}</span>
    </li>
    <li class="detail-li">
      <span class="li__label">开票时间</span>
      <span class="li__value">{{ invoiceInfo.invoiceCreateAt || invoiceInfo.invoiceTime }}</span>
    </li>
    <slot name="default" />
  </ul>
</template>
<script>
import { contentType, titleType } from '../../config';
export default {
  props: {
    invoiceInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      contentType,
      titleType
    };
  }
};
</script>
<style lang="less" scoped>
.detail {
  .text-size(13);
  padding: 12px 8px;
  position: relative;
  &-li {
    height: 36px;
    line-height: 36px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    .li__value {
      padding-left: 15px;
    }
    .li__label {
      color: @gray-4;
    }
  }

  &-invoice {
    position: absolute;
    top: 20px;
    right: 8px;
    &__image {
      width: 100px;
      height: 68px;
      text-align: center;
      position: relative;
      border-radius: 0 0 8px 8px;
      overflow: hidden;
    }
    &__count {
      color: @white;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
    }
    &__msg {
      .text-size(11);
      color: @gray-4;
      text-align: center;
      padding-top: 4px;
    }
  }
}
</style>
