<template>
  <zj-page-layout hasFooter>
    <view class="all-container">
      <view class="out-container">
        <view class="status"><text class="iconfont icon-shijian"></text>{{detail.status | statusFilter}}</view>
        <view class="text">预计可开发票金额 ¥{{detail.amount | priceFilter}}</view>
      </view>

      <view class="card main-container">
        <view class="title">{{detail.taxType | taxTypeFilter}}</view>
        <u-steps :current="detail.status? 2 : 1">
          <u-steps-item title="申请提交"></u-steps-item>
          <u-steps-item title="财务处理"></u-steps-item>
          <u-steps-item title="开票完成"></u-steps-item>
        </u-steps>
        <block v-if="!detail.status">
          <view class="time">{{detail.createTime}}</view>
          <view class="text">尊敬的用户您好，您提交的开票申请已受理，待通过系统审核后，48小时内完成开具，若超时未通过系统审核，请联系客服咨询，感谢。</view>
        </block>
      </view>

      <view class="card info-container">
        <view class="row">
          <view class="label">发票类型</view>
          <view class="value">{{detail.taxType | taxTypeFilter}}</view>
        </view>
        <view class="row">
          <view class="label">发票内容</view>
          <view class="value">{{detail.content}}</view>
        </view>
        <view class="row">
          <view class="label">抬头类型</view>
          <view class="value">{{detail.type | typeFilter}}</view>
        </view>
        <view class="row">
          <view class="label">抬头名称</view>
          <view class="value">{{detail.name}}</view>
        </view>
        <view class="row">
          <view class="label">发票邮箱</view>
          <view class="value">{{detail.receiverEmail}}</view>
        </view>
        <view class="row" v-if="detail.status">
          <view class="label">开票金额</view>
          <view class="value">¥{{detail.amount | priceFilter}}</view>
        </view>
        <view class="row" v-if="detail.status">
          <view class="label">开票时间</view>
          <view class="value">{{detail.taxTime}}</view>
        </view>
        <view class="row">
          <view class="label">申请时间</view>
          <view class="value">{{detail.createTime}}</view>
        </view>

        <view class="box" v-if="detail.taxLink" @tap="preview">
          <image :src="require('@/packageMine/static/pdf.png')" mode="aspectFill" v-if="detail.taxLink.indexOf('pdf') >= 0"></image>
          <image :src="detail.taxLink" mode="aspectFill" v-else></image>
          <view class="text">点击预览</view>
        </view>
      </view>

      <view class="card info-container">
        <view class="row">
          <view class="label">订单编号</view>
          <view class="value">{{detail.orderId}}</view>
        </view>
        <block v-if="detail.orderType == 'ORDER'">
          <view class="row">
            <view class="label">订单状态</view>
            <view class="value">{{orderDetail.orderStatus | orderStatusFilter}}</view>
          </view>
          <view class="row">
            <view class="label">下单时间</view>
            <view class="value">{{orderDetail.createTime}}</view>
          </view>
          <view class="row">
            <view class="label">商品名称</view>
            <view class="value">{{orderDetail.orderDetails.map(o => o.goodsName).join(',')}}</view>
          </view>
        </block>
        <block v-else>
          <view class="row">
            <view class="label">订单状态</view>
            <view class="value">{{orderDetail.payStatus | payStatusFilter}}</view>
          </view>
          <view class="row">
            <view class="label">下单时间</view>
            <view class="value">{{orderDetail.createTime}}</view>
          </view>
          <view class="row">
            <view class="label">商品名称</view>
            <view class="value">{{orderDetail.increContent}}</view>
          </view>
        </block>
      </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <u-button text="发票申请记录" @click="toInvoiceList"></u-button>
        <u-button text="发送邮箱" type="primary" @click="sendEmail" v-if="detail.status"></u-button>
      </view>
    </template>
  </zj-page-layout>
</template>

<script>
  export default {
    filters: {
      statusFilter(val) {
        const MAP = {
          true: '已开票',
          false: '申请中',
        }
        return MAP[val]
      },
      orderTypeFilter(val) {
        const MAP = {
          INCRE: '增值服务',
          ORDER: '商城订单',
        }
        return MAP[val]
      },
      taxTypeFilter(val) {
        const MAP = {
          true: '专用发票',
          false: '电子普通发票',
        }
        return MAP[val]
      },
      typeFilter(val) {
        const MAP = {
          true: '公司',
          false: '个人',
        }
        return MAP[val]
      },
      orderStatusFilter(val) {
        const statusMap = {
          NOPAY: '待付款',
          DFH: '待发货',
          YFH: '待服务',
          OVER: '待评价',
          CLOSE: '已关闭',
          REFUND: '售后/退款',
          TIMEOUT: '超时未支付'
        }
        return statusMap[val]
      },
      payStatusFilter(val) {
        const MAP = {
          CANCEL: '已取消',
          WAIT: '待支付',
          PAID: '已支付',
          EXPIRE: '已过期',
        }
        return MAP[val]
      }
    },

  	data() {
  		return {
        orderTaxId: null,
        detail: {},
        orderDetail: {},
      }
    },

    onLoad({orderTaxId}) {
      this.orderTaxId = orderTaxId;
      this.getDetail();
    },

    methods: {
      getDetail() {
        this.$api.get('/user/order/tax/detail', {
          orderTaxId: this.orderTaxId
        }).then(res => {
          this.detail = res.data || {};
          if(res.data?.orderId) {
            this.getOrderDetail();
          }
        })
      },

      getOrderDetail() {
        if(this.detail.orderType == 'ORDER') {
          this.$api.get('/order/detail', {
            orderId: this.detail.orderId
          }).then(res => {
            this.orderDetail = res.data || {};
          })
        } else {
          this.$api.post('/increConfig/detailIncre', {
            id: this.detail.orderId
          }).then(res => {
            this.orderDetail = res.data || {};
          })
        }
      },

      // 发票申请记录
      toInvoiceList() {
        this.$navToPage({
          url: '/packageMine/pages/invoice/list'
        });
      },

      preview() {
        if(this.detail.taxLink.indexOf('pdf') >= 0) {
          uni.downloadFile({
          	url: this.detail.taxLink,
          	success: function (res) {
          		uni.openDocument({
          			filePath: res.tempFilePath,
          			fileType: 'pdf',
          			success(res) {
          				console.log('打开文档成功');
          			},
          			fail() {
          				that.$toast('查看发票失败');
          			}
          		});
          	}
          });
        }
        else {
          uni.previewImage({
          	urls: [this.detail.taxLink],
          	current: this.detail.taxLink
          });
        }
      },
      
      // 发送邮箱
      sendEmail() {
      	this.$api.post('/user/order/tax/send', {
      		orderTaxId: this.orderTaxId
      	}).then(res => {
      		this.$successToast('发送成功');
      	})
      }
    }
  }
</script>

<style scoped lang="scss">
.all-container {
  padding: 30rpx;
}

.out-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .status {
    font-size: 36rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    text {
      color: $theme-color;
      font-size: 36rpx;
      margin-right: 12rpx;
      font-weight: 600;
    }
  }
  .text {
    font-size: 28rpx;
    margin-top: 20rpx;
  }
}

.card {
  @include zj-card;
  margin-top: 30rpx;
  padding: 30rpx;
}

.info-container {
  position: relative;
  .box {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    z-index: 9;
    image {
      width: 100rpx;
      height: 100rpx;
    }
    .text {
      font-size: 24rpx;
      text-align: center;
      margin-top: 8rpx;
      color: $sec-font;
    }
  }
  .row {
    display: flex;
    margin-top: 20rpx;
    &:first-child {
      margin-top: 0;
    }
    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
    }
    .value {
      font-size: 28rpx;
    }
  }
}

.main-container {
  .title {
    text-align: center;
    margin-bottom: 30rpx;
  }
  .time {
    font-size: 28rpx;
    margin-top: 30rpx;
  }
  .text {
    font-size: 28rpx;
    color: $sec-font;
    margin-top: 12rpx;
  }
}
</style>
