<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">{{ order.mailbox }}</span>
      </div>
      <div class="part-item lines">
        <span class="part-item-key" style="color: transparent">电子邮箱</span>
        <span class="part-item-value"></span>
      </div>
      <div class="invoice-img" v-if="order.invoiceUrl">
        <!-- <img class="img" :src="picUrl + order.invoiceImgUrl" mode="widthFix"/>
                <uni-view class="img-index">1/1</uni-view> -->
        <!-- <uni-view :class="{download: true, 'blue-download': custTypeId === 1, 'green-download': custTypeId === 2}" @click="downloadOrder(order.invoiceUrl)">
                    <img mode="widthFix" :src="downloadBtnIcon"/>
                    <span>下载发票</span>
                </uni-view> -->
      </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(order.invoiceUrl)"
        >再次推送</div
      >
    </div>
  </scroll-view>
</template>

<script>
// const app = getApp()
 const app = {}
import downloadBtnIcon from '../static/images/download.png'
import { mapState } from 'vuex'
import uni from '@/utils/uniHooks'
export default {
  data() {
    return {
      picUrl: this.$picUrl,
      downloadBtnIcon: downloadBtnIcon,
      globalData: app.globalData,
      setTime: 60,
      timer: null,
      order: {},
      preUrl: '',
    }
  },
  created() {
    this.order = JSON.parse(this.$route.query.order)
    // this.order = {
    //   mailbox: '1212'
    // }
    console.log('获取的发票信息', this.order)
    // 埋点本地化
    this.preUrl = uni.getStorageSync('previousUrl')
    uni.setStorageSync(
      'previousUrl',
      '/pages/parkingFee/parkingReceipt/parkingInvoiceImage.vue'
    )
  },
  mounted() {
    setTimeout(() => {
        uni.setNavigationBarTitle({
            title: '停车发票',
        });
    }, 300);
  },
  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',
            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) {
            // 埋点
            self.sensorsClick('$ClickSendAgain', {
              redirect_url: '',
              invoice_url: url,
              subject: self.order.invoiceTitleName + '的电子发票',
            })
            uni.showToast({
              title: '邮件已发送邮箱，请注意查收',
              icon: 'none',
            })
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            })
          }
        },
        fail: () => {
          uni.showToast({
            title: '服务器开小差了呢，请您稍后再试',
            icon: 'none',
          })
        },
      })
    },
    // 埋点方法
    sensorsClick(eventName, params) {
      let optionsQuery = uni.getStorageSync('options_query')
      let fixedParams = {
          cta_itemno: '',
          cta_name: '',
          previous_url: this.preUrl || '',
          $brand_id:uni.getStorageSync('groupId'),
          $location: uni.getStorageSync('mallid'),
          $channel: optionsQuery.channel || '',
          // $utm_lbs: this.optionsQuery.utm_lbs || '',
          $utm_channel: optionsQuery.utm_channel || '',
          $utm_method: optionsQuery.utm_method || '',
          $utm_source: optionsQuery.utm_source || '',
          $utm_function: optionsQuery.utm_function || '',
          $utm_user: optionsQuery.utm_user || '',
        },
        finalParams = Object.assign(fixedParams, params)
      this.$sensors.track(eventName, finalParams)
    },
  },
}
</script>

<style lang="less" scoped>
// @import '../../../styles/common.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>



