<template>
  <scroll-view  :class="['scroll-Y', theme]" scroll-y>
    <div class="part">
      <div class="part-item">
        <span class="part-item-key2">接收方式</span>
        <span class="part-item-value"></span>
      </div>
      <van-divider dashed style="margin:0;"/>
      <div class="part-item lines part-item-email">
        <img class="car-icon" :src="require(`../static/images/email.png`)"/>
        <span class="part-item-key">电子邮箱</span>
        <span class="part-item-value">{{ order.email }}</span>
      </div>
      <div class="invoice-img" v-if="order.invoiceUrl">
      </div>
    </div>
    <div class="footer">
      <div
        :class="{
          btn: true,
          'push-again-btn': true,
        }"
        style="width:100%; margin:0 auto;"
        @click="pushAgain"
      >
        再次推送
      </div>
    </div>
  </scroll-view>
</template>

<script>
import parkingInvoiceImageJs from '../mixins/parkingReceipt/parkingInvoiceImage';
import baseMixins from '../mixins/base'
export default {
  mixins: [baseMixins, parkingInvoiceImageJs],
};
</script>

<style lang="less" scoped>
// @import '../../../styles/mixins.less';
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f4f7ff;
  padding: 20px;
  box-sizing: border-box;
  .car-icon {
    width:47px;
    height:27px;
    margin-right: 20px;
  }
  .part {
    background-color: #ffffff;
    
    border-radius: 20px;

    background: #fafbff;
    border-radius: 4px;
    margin-bottom:60px;
    // border: 1px solid #d8dae0;

    .part-item {
      display: flex;
      align-items: center;
      padding: 20px 30px;
      box-sizing: border-box;

      .part-item-key {
        color: #999999;

      }
      .part-item-key2{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 500;
        font-size: 32px;
        color: #333333;
      }

      .part-item-value {
        color: #6f6f70;
        text-align: right;
        display: flex;
        align-items: center;
        position: absolute;
        right: 35px;
        > img {
          width: 30px;
        }
      }
    }
    .part-item.part-item-email {
      position: relative;
    }
    .invoice-img {
      width: 100%;
      padding: 30px 0;

      .img {
        width: 100%;
      }

      .img-index {
        width: 100px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #ffffff;
        background-color: #b3b3b3;
        border-radius: 50px;
        margin: 20px auto;
      }

      .download {
        margin-top: 20px;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #662d91;
        width: 300px;
        height: 70px;
        border-radius: 50px;
        margin: 0 auto;

        > img {
          width: 32px;
        }

        > span {
          margin-left: 10px;
          color: #662d91;
        }
      }

      .blue-download {
        .color-download('blue');
      }

      .green-download {
        .color-download('green');
      }

      .color-download(@value) {
        @color: 'color-@{value}';
        border-color: @@color;
        > span {
          color: @@color;
        }
      }
    }
  }

  .footer {

    .btn {
      margin: 20px 60px;
      color: #ffffff;
      border-radius: 50px;
      text-align: center;
      padding: 20px 0;
    }

    .push-again-btn {
      background: var(--k-color-primary-01);
      border-radius: 45px;
      // background-image: linear-gradient(to right, #7d4ea1, #40397c);
    }

    .blue-push-again-btn {
      .color-background-color('blue');
    }

    .green-push-again-btn {
      .color-background-color('green');
    }
  }
}

.lines {
  border-bottom: 2px solid #ececec;
}
</style>
