<template>
  <div class="card">
    <div class="card-time">
      <div class="card-time__left">订单时间：2021-07-08 20:51:54</div>
      <div class="card-time__right state-1">已开票</div>
    </div>
    <div class="card-info">
      <div class="card-info__wrapper">
        <dl class="card-info__value">
          <dt>电子普通发票-商品明细-个人</dt>
          <dd>抬头名称：胡阳阳</dd>
          <dd>税号：6676789000000000</dd>
        </dl>
        <div class="card-info__price">
          <p>开票金额</p>
          <h3>¥610.00</h3>
        </div>
      </div>
    </div>
    <div class="card-bottom">
      <cr-button shape="circle" size="small" plain type="primary">重新开票</cr-button>
      <cr-button shape="circle" size="small" plain type="default">重新发送</cr-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    orders: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  methods: {
    changeChecked() {
      this.$emit('change');
    }
  }
};
</script>
<style lang="less" scoped>
@import './common.less';

.state-1 {
  color: #07c160;
}
.state-2 {
  color: @orange;
}
.state-3 {
  color: @red-dark;
}

.card {
  background-color: @white;
  border-radius: 10px;
  border: 1px solid @white;
  width: 352px;
  margin: 0 auto;
  margin-bottom: 12px;
  &-time {
    display: flex;
    justify-content: space-between;
    padding: 15px 13px;
    .border-bottom();
    &__left {
      color: @gray-4;
      .text-size(12);
    }

    &__right {
      .text-size(14);
      font-weight: bold;
    }
  }
  &-info {
    padding: 12px;

    &__wrapper {
      padding: 12px 10px 10px 12px;
      background: @gray-1;
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &__value {
      dt {
        .text-size(14);
        margin-bottom: 8px;
      }
      dd {
        .text-size(12);
        color: @gray-4;
      }
    }

    &__price {
      text-align: right;
      p {
        .text-size(12);
        color: @gray-4;
      }
      h3 {
        .text-size(18);
        font-weight: bold;
      }
    }
  }
  &-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 9px;
    padding-bottom: 12px;
    @{deep} .cr-button {
      margin-left: 8px;
    }
  }
}
</style>
