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

    <view class="part top">
      <view class="part-item lines header">
        <text class="part-item-key">抬头</text>
        <view class="part-item-value" @click="showHeader">
          {{ order.invoiceTitleName }}
          <image
            class="invoice-header-arrow"
            :src="arrowIcon"
            mode="widthFix"
          ></image>
        </view>
      </view>

      <view class="part-item">
        <text class="part-item-key">开票订单号</text>
        <text class="part-item-value">{{ order.orderno }}</text>
      </view>
      <view class="part-item">
        <text class="part-item-key">发票类型</text>
        <text class="part-item-value">增值税普通发票</text>
      </view>
      <view class="part-item">
        <text class="part-item-key">开票日期</text>
        <text class="part-item-value">{{
          order.paperDrewDate ? order.paperDrewDate : '-'
        }}</text>
      </view>
      <view class="part-item">
        <text class="part-item-key">发票号码</text>
        <text class="part-item-value">{{
          order.invoiceno ? order.invoiceno : '-'
        }}</text>
      </view>
      <view class="part-item">
        <text class="part-item-key">发票代码</text>
        <text class="part-item-value">{{
          order.invoiceCode ? order.invoiceCode : '-'
        }}</text>
      </view>
      <view class="part-item">
        <text class="part-item-key">备注</text>
        <text class="part-item-value">{{ order.remark }}</text>
      </view>
    </view>
    <view class="part middle">
      <view class="part-item">
        <text class="part-item-key">总金额</text>
        <text class="part-item-value"
          ><text class="purple">{{ order.invoiceAmount / 100 }}</text
          >元</text
        >
      </view>
      <view class="part-item">
        <text class="part-item-key"
          >共<text class="purple">{{ order.payNumber }}笔</text>缴费记录</text
        >
        <view class="part-item-value" @click="gotoRecordDetail">
          <text>查看详情</text>
          <image
            class="invoice-header-arrow"
            :src="arrowIcon"
            mode="widthFix"
          ></image>
        </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="showInvoiceDetail"
        >查看发票</view
      >
    </view>
  </scroll-view>
</template>

<script>
const app = getApp();
import downloadBtnIcon from '../static/images/download.png';
import arrowIcon from '../static/images/arrows.png';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      picUrl: this.$picUrl,
      arrowIcon: arrowIcon,
      downloadBtnIcon: downloadBtnIcon,
      order: {},
      webviewStyles: {
        progress: {
          color: '#FF3333',
        },
      },
      id: '',
    };
  },
  onLoad(options) {
    this.id = options.id;
  },
  onShow() {
    this.getInvoicedDetail(this.id);
  },
  computed: {
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
  },
  methods: {
    // 根据发票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;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '服务器开小差了呢，请您稍后再试',
            icon: 'none',
          });
        },
      });
    },
    showHeader() {
      uni.navigateTo({
        url:
          '/pages/parkingFee/parkingReceipt/parkingHeaderDetail?header=' +
          JSON.stringify(this.order),
      });
    },
    gotoRecordDetail() {
      uni.navigateTo({
        url:
          '/pages/parkingFee/parkingReceipt/parkingOrderDetail?id=' +
          this.order.id,
      });
    },
    showInvoiceDetail() {
      uni.navigateTo({
        url:
          '/pages/parkingFee/parkingReceipt/parkingInvoiceImage?order=' +
          JSON.stringify(this.order),
      });
    },
  },
};
</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;
        }
      }
    }
    .tab-title {
      color: #676767;
      padding: 30rpx 0rpx;
    }
    .lines {
      border-bottom: 2rpx solid #ececec;
    }
    .invoice-more {
      padding-bottom: 8rpx;
    }
  }
  .top {
    padding-top: 20rpx;
  }
  .middle {
    margin: 20rpx 0;
    > .part-item {
      background-color: #ffffff;
    }
    .purple {
      color: #ed1c24;
    }
  }
  .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');
    }
  }
}
</style>
