<template>
  <scroll-view class="scroll-Y" scroll-y>
    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>

    <view class="part">
      <view class="part-item lines">
        <text class="part-item-key">电子邮箱</text>
        <text class="part-item-value">{{ order.mailbox }}</text>
      </view>
      <view class="invoice-img" v-if="order.invoiceUrl">
        <!-- <image class="img" :src="picUrl + order.invoiceImgUrl" mode="widthFix"></image>
                <view class="img-index">1/1</view> -->
        <!-- <view :class="{download: true, 'blue-download': custTypeId === 1, 'green-download': custTypeId === 2}" @click="downloadOrder(order.invoiceUrl)">
                    <image mode="widthFix" :src="downloadBtnIcon"></image>
                    <text>下载发票</text>
                </view> -->
      </view>
    </view>
    <view class="footer">
      <view
        :class="{
          btn: true,
          'push-again-btn': true,
          'blue-push-again-btn': custTypeId === 1,
          'green-push-again-btn': custTypeId === 2,
        }"
        @click="pushAgain(order.invoiceUrl)"
        >再次推送</view
      >
    </view>
  </scroll-view>
</template>

<script>
const app = getApp();
import downloadBtnIcon from '../static/images/download.png';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      picUrl: this.$picUrl,
      downloadBtnIcon: downloadBtnIcon,
      globalData: app.globalData,
      setTime: 60,
      timer: null,
      order: {},
      preUrl: '',
    };
  },
  onLoad(options) {
    this.order = JSON.parse(options.order);
    console.log('获取的发票信息', this.order);
    // 埋点本地化
    this.preUrl = uni.getStorageSync('previousUrl');
    uni.setStorageSync(
      'previousUrl',
      '/pages/parkingFee/parkingReceipt/parkingInvoiceImage.vue'
    );
  },
  onUnload() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  },
  computed: {
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
  },
  methods: {
    downloadOrder(url) {
      uni.downloadFile({
        url: url,
        success: function (res) {
          console.log('下载文档成功');
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log('打开文档成功');
            },
          });
        },
      });
    },
    pushAgain(url) {
      const self = this;
      if (self.setTime >= 0 && self.timer) {
        uni.showToast({
          title: '邮件已发送，请于1分钟后再试',
          icon: 'none',
        });
        return false;
      }
      if (self.timer && self.setTime < 0) {
        clearTimeout(self.timer);
        self.timer = null;
      }
      self.timer = setTimeout(() => {
        self.setTime--;
      }, 1000);
      const data = {
        attachments: [
          {
            name: '嘉里停车发票.pdf',
            invoiceId: self.order.id,
            url: url,
          },
        ],
        html: true,
        sendTo: 'string',
        sendTos: [self.order.mailbox],
        subject: self.order.invoiceTitleName + '的电子发票',
        text: '停车发票',
      };
      self.$md(data);
      uni.request({
        url: self.$baseURL + 'sms/email',
        method: 'POST',
        data: data,
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          console.log('推送', res.data);
          if (res.data.code === 0) {
            uni.showToast({
              title: '邮件已发送邮箱，请注意查收',
              icon: 'none',
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '服务器开小差了呢，请您稍后再试',
            icon: 'none',
          });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../../styles/common.less';
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
  padding: 20rpx;
  box-sizing: border-box;
  .part {
    background-color: #ffffff;
    padding: 0 30rpx;
    border-radius: 20rpx;
    .part-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      box-sizing: border-box;
      .part-item-key {
        color: #4c4c4d;
      }
      .part-item-value {
        color: #6f6f70;
        text-align: right;
        display: flex;
        align-items: center;
        > image {
          width: 30rpx;
        }
      }
    }
    .invoice-img {
      width: 100%;
      padding: 30rpx 0;
      .img {
        width: 100%;
      }
      .img-index {
        width: 100rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: #ffffff;
        background-color: #b3b3b3;
        border-radius: 50rpx;
        margin: 20rpx auto;
      }
      .download {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #662d91;
        width: 300rpx;
        height: 70rpx;
        border-radius: 50rpx;
        margin: 0 auto;
        > image {
          width: 32rpx;
        }
        > text {
          margin-left: 10rpx;
          color: #662d91;
        }
      }
      .blue-download {
        .color-download('blue');
      }
      .green-download {
        .color-download('green');
      }
      .color-download(@value) {
        @color: 'color-@{value}';
        border-color: @@color;
        > text {
          color: @@color;
        }
      }
    }
  }
  .footer {
    padding-top: 20rpx;
    .btn {
      margin: 20rpx 60rpx;
      color: #ffffff;
      border-radius: 50rpx;
      text-align: center;
      padding: 20rpx 0;
    }
    .push-again-btn {
      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: 2rpx solid #ececec;
}
</style>
