<template>
  <scroll-view class="scroll-Y" scroll-y>
    <div class="part">
      <div class="part-item lines">
        <span class="part-item-key">电子邮箱</span>
        <span class="part-item-value">{{ res.email }}</span>
      </div>
      <div class="invoice-img" v-if="order.invoiceUrl">
      </div>
    </div>
    <div class="footer">
      <div
        :class="{
          btn: true,
          'push-again-btn': true,
          'blue-push-again-btn': custTypeId === 1,
          'green-push-again-btn': custTypeId === 2,
        }"
        @click="pushAgain"
      >
        再次推送
      </div>
    </div>
  </scroll-view>
</template>

<script>
import parkingInvoiceImageJs from '../../../mixins/parkingReceipt/parkingInvoiceImage';

export default {
  mixins: [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;

  .part {
    background-color: #ffffff;
    padding: 0 30px;
    border-radius: 20px;

    background: #fafbff;
    border-radius: 4px;
    border: 1px solid #d8dae0;

    .part-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      box-sizing: border-box;

      .part-item-key {
        color: #4c4c4d;
      }

      .part-item-value {
        color: #6f6f70;
        text-align: right;
        display: flex;
        align-items: center;

        > img {
          width: 30px;
        }
      }
    }

    .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 {
    padding-top: 20px;

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

    .push-again-btn {
      background: #064c8a;
      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>
