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

    <view class="apply-success-box">
      <view class="apply-success-img">
        <image class="apply-image" mode="widthFix" :src="icon"></image>
      </view>
      <view class="apply-success-text">【发票申请提交成功】</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="showInvoiceDetail"
        >查看发票</view
      >
      <view class="btn back-home-btn" @click="goToHome">返回首页</view>
    </view>
  </scroll-view>
</template>

<script>
const app = getApp();
import hintIcon from '../static/images/hint.png';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      picUrl: this.$picUrl,
      globalData: app.globalData,
      hintIcon: hintIcon,
      id: '',
      blueIcon:
        'https://cnsh-kerry-crm-le.oss-cn-shanghai.aliyuncs.com/images/icon-success-blue.png',
      greenIcon:
        'https://cnsh-kerry-crm-le.oss-cn-shanghai.aliyuncs.com/images/icon-success-green.png',
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getInvoicedDetail(this.id);
  },
  computed: {
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
    icon() {
      return this.$store.state.custTypeId === 0
        ? this.hintIcon
        : this.$store.state.custTypeId === 1
        ? this.blueIcon
        : this.greenIcon;
    },
  },
  methods: {
    showInvoiceDetail() {
      uni.redirectTo({
        url: '/pages/parkingFee/parkingReceipt/parkingInvoice?id=' + this.id,
      });
    },
    goToHome() {
      uni.redirectTo({
        url: '/pages/parkingFee/parkingReceipt/parkingReceipt',
      });
    },
    // 根据发票id获取发票详情信息(含发票抬头信息),
    getInvoicedDetail(id) {
      const self = this;
      const data = {
        id: id,
      };
      self.$md(data);
      uni.request({
        url: self.$baseURL + 'api/1.0/invoice/getInvoicedDetail?id=' + id,
        method: 'POST',
        data: data,
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          console.log('获取发票详情信息', res.data);
          if (res.data.code === 0) {
            self.order = res.data.data;
            if (self.order.invoiceUrl) {
              self.pushEmail(self.order);
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '服务器开小差了呢，请您稍后再试',
            icon: 'none',
          });
        },
      });
    },
    // 开票成功后推送发票至邮箱
    pushEmail(item) {
      const self = this;
      const data = {
        attachments: [
          {
            name: '停车发票.pdf',
            url: item.invoiceUrl,
          },
        ],
        html: true,
        sendTo: 'string',
        sendTos: [item.mailbox],
        subject: item.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) {
          }
        },
        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;
  .apply-success-box {
    padding: 100rpx 0;
    text-align: center;
    .apply-image {
      width: 30vw;
    }
    .apply-success-text {
      margin-top: 50rpx;
      font-weight: bold;
    }
  }
  .footer {
    width: 100%;
    .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');
    }
    .back-home-btn {
      background-color: #bdbdbd;
    }
  }
}
</style>
