<template>
    <view>
        <view class="_warning">温馨提示：部分剧目无法开具电子发票，需联系客服索取纸质发票，具体以页面提示为准。</view>
        <view v-if="invoice_list.length == 0" class="no_content">
            <image class="img" src="/static/images/ui/none.png" />
            <view class="warn">没有查询到可以开票的信息</view>
        </view>
        <view v-else class="list" v-for="(item, index) in invoice_list" :key="index">
            <view class="item">
                <view class="info">
                    <view class="title">{{ item.name }}</view>
                    <view class="text">
                        <view style="margin-bottom: 8rpx">{{ item.show_time }} {{ item.city_name }}</view>
                        <view>订单号：{{ item.order_no }}</view>
                    </view>
                    <view class="price">¥{{ item.order_price }}</view>
                </view>
                <view class="_b" :data-order_no="item.order_no" @tap="make_invoice">开具发票</view>
            </view>
        </view>
        <view class="puzzle" @tap="show=true">无法开票原因？</view>

			<u-modal :show="show" title="无法开票原因" @confirm="show=false">
            <view class="slot-content message">
                <text :decode="true">
                    1、您没有填写有效的发票抬头信息。\n 2、2017年1月1日起实行，订单支付后一个月内 \n &nbsp;&nbsp;&nbsp;
                    可以索取电子发票，超期不可索取！\n3、您可索取的发票金额等于0元。
                </text>
            </view>
        </u-modal>
    </view>
</template>

<script>
// pages/user/invoice/invoice/invoice.js
import { http } from '../../../../utils/util';
export default {
    data() {
        return {
            show: false,

            invoice_list: {
                length: 0
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        http('/api/v1/invoice-list', 'post').then((res) => {
            this.setData({
                invoice_list: res
            });
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        make_invoice(e) {
            uni.navigateTo({
                url: '../make_invoice/make_invoice?order_no=' + e.currentTarget.dataset.order_no
            });
        },
		confirm(e) {
	console.log(e);
						this.show = false;
		
		    }
    }
};
</script>
<style>

._warning {
    font-size: 24rpx;
    color: #ff1d42;
    background-color: #fff0f5;
    padding: 20rpx;
}

.list {
    margin: 30rpx;
    color: #181818;
}
.list .item {
    display: flex;
    background: #ffffff;
    box-shadow: 0 4rpx 8rpx 0 rgba(109, 109, 109, 0.2);
    border-radius: 8rpx;
}
.list .item .info {
    padding: 30rpx;
    flex: 1;
}
.list .item .info .title {
    font-size: 28rpx;
    font-weight: bold;
}
.list .item .info .text {
    font-size: 24rpx;
    margin: 20rpx 0;
}
.list .item .info .price {
    font-size: 32rpx;
}
._b {
    font-size: 28rpx;
    color: #ff1d42;
    border-radius: 8rpx;
    border: 2rpx solid #ff1d42;
    margin: auto 30rpx auto 0;
    padding: 6rpx 20rpx;
    white-space: nowrap;
}

.puzzle {
    position: absolute;
    bottom: 15%;
    width: 100%;
    text-align: center;
    color: #808080;
}

.message {
    font-size: 24rpx;
    color: #565656;
    margin: 20rpx auto 40rpx 80rpx;
}
</style>
