<template>
	<view class="template-edit tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar :isBack="false" backTitle="" :bottomShadow="true" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view style="padding-left: 15rpx;" @click="goBack()">
					<text class="tn-icon-left" style="font-size: 40rpx;"></text>
				</view>
				<view class="tn-margin-top"
					style=";text-shadow:  1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
					<tn-tabs :list="[{name:'发票申请'}]" :current="topCurrent" activeColor="#000" :bold="false"
						:fontSize="36"></tn-tabs>
				</view>
			</view>
		</tn-nav-bar>
		<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view style="padding:40rpx;">
				<view class="tn-flex tn-flex-center tn-flex-row-between ">
					<view>
						已有发票 {{count}} 张
					</view>
					<view>
						<tn-button @click="addMod = true" backgroundColor="#3D7EFF" size="sm"
							fontColor="#ffffff">发票申请</tn-button>
					</view>
				</view>
			</view>
			<view style="padding:0rpx 40rpx;" v-for="item in allList">
				<view @click="openInfo(item)"
					class="tn-flex tn-flex-center tn-flex-row-between tn-flex-col-center bg-flex-shadow tn-shadow-blur">
					<view>
						<view style="font-size: 34rpx;font-weight: 600;">
							<text>发票金额：</text>
							<text class="tn-icon-money-fill" style="color: #28B93D;"></text>
							<text style="color: #28B93D;">{{item.money}}</text>
						</view>
						<view style="margin-top: 10rpx;font-size: 28rpx;color: #999999;">
							<text>{{item.createtime}}</text>
						</view>
					</view>
					<view>
						<tn-tag v-if="item.if_ssue==1" backgroundColor="#31E749" fontColor="#ffffff"
							shape="radius">已通过</tn-tag>
						<tn-tag v-if="item.if_ssue==2" backgroundColor="#E83A30" fontColor="#ffffff"
							shape="radius">被拒绝</tn-tag>
						<tn-tag v-if="item.if_ssue==3" backgroundColor="#FF7043" fontColor="#ffffff"
							shape="radius">审核中</tn-tag>
						<text class="tn-icon-right-triangle" style="margin-left: 10rpx;"></text>
					</view>
				</view>
				<view style="width: 100%;height: 1px;background-color: #F8F7F8;margin: 40rpx 0rpx;"></view>
			</view>
		</view>
		<tn-popup v-model="addMod" mode="right" :safeAreaInsetBottom="true" width="100%">
			<tn-nav-bar :isBack="false" backTitle="" :alpha="true" :bottomShadow="false">
				<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
					<view style="padding-left: 15rpx;" @click="addMod = false">
						<text class="tn-icon-left" style="font-size: 40rpx;"></text>
					</view>
					<view class="tn-margin-top"
						style="text-shadow:  1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
						<tn-tabs :list="[{name:'信息填写'}]" activeColor="#000" :bold="false" :fontSize="34"></tn-tabs>
					</view>
				</view>
			</tn-nav-bar>
			<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
				<view style="padding: 30rpx;">
					<view @click="tt_show_do" class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between">
						<view>
							<view v-if="header_id_name == ''">请选择开票信息</view>
							<view v-if="header_id_name != ''">
								<view style="padding: 30rpx 0rpx;">
									<view>申请人：{{header_id_name.name}}</view>
									<view>公司名称：{{header_id_name.unit}}</view>
									<view>纳税人识别号：{{header_id_name.taxpayer_identification_number}}</view>
									<view>单位地址：{{header_id_name.unit_address}}</view>
									<view>单位电话：{{header_id_name.telephone}}</view>
									<view>银行基本户账号：{{header_id_name.bank_basic_account_number}}</view>
									<view>开户行：{{header_id_name.bank}}</view>
								</view>
							</view>
						</view>
						<view>
							<!-- <tn-button @click="tt_add_show = true" backgroundColor="#3D7EFF" size="sm"
								fontColor="#ffffff">添加开票信息</tn-button> -->
							<text style="margin-left: 20rpx;" class="tn-icon-right"></text>
						</view>
					</view>
					<!-- <tn-select v-model="tt_show" mode="single" :list="tt_list" @confirm="tt_confirm"></tn-select> -->
				</view>
				<view class="text" style="padding:20rpx 40rpx;">
					<view style="text-align: center;font-size: 32rpx;font-weight: 600;">申请发票</view>
					<tn-form ref="form" :labelWidth="180">
						<tn-form-item prop="name" label="发票类型">
							<tn-input v-model="invoice_type_name" :customStyle="{width: '450rpx'}"
								@click="invoice_type_show = true" inputAlign="right" :disabled="true" />
							<tn-action-sheet :list="actionSheetList" v-model="invoice_type_show"
								@click="actionSheetCallback"></tn-action-sheet>
						</tn-form-item>
						<tn-form-item prop="name">
							<tn-input placeholder="开票金额" :customStyle="{width: '600rpx'}" v-model="money" />
						</tn-form-item>
					</tn-form>
					<view style="text-align: center;margin-top: 50rpx;">
						<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff" @click="addMod = false"
							width="40%">取消</tn-button>
						<tn-button backgroundColor="#3D7EFF" height="70rpx" width="40%" fontColor="#ffffff"
							style="margin-left: 30rpx;" @click="kp_add_do">提交</tn-button>
					</view>
				</view>
			</view>
		</tn-popup>
		<tn-popup v-model="infoMod" mode="right" :safeAreaInsetBottom="true" width="100%">
			<tn-nav-bar :isBack="false" backTitle="" :alpha="true" :bottomShadow="false">
				<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
					<view style="padding-left: 15rpx;" @click="infoMod = false">
						<text class="tn-icon-left" style="font-size: 40rpx;"></text>
					</view>
					<view class="tn-margin-top"
						style="text-shadow:  1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
						<tn-tabs :list="[{name:'发票信息查看'}]" activeColor="#000" :bold="false" :fontSize="34"></tn-tabs>
					</view>
				</view>
			</tn-nav-bar>
			<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
				<view class="info_text" style="padding:20rpx 40rpx;">
					<view>
						<text>申请人：</text>
						<text>{{info.header.name}}</text>
					</view>
					<view>
						<text>公司名称：</text>
						<text>{{info.header.unit}}</text>
					</view>
					<view>
						<text>纳税人识别号：</text>
						<text>{{info.header.taxpayer_identification_number}}</text>
					</view>
					<view>
						<text>单位地址：</text>
						<text>{{info.header.unit_address}}</text>
					</view>
					<view>
						<text>单位电话：</text>
						<text>{{info.header.telephone}}</text>
					</view>
					<view>
						<text>银行基本账户：</text>
						<text>{{info.header.bank_basic_account_number}}</text>
					</view>
					<view>
						<text>开户行：</text>
						<text>{{info.header.bank}}</text>
					</view>
					<view>
						<text>发票金额：</text>
						<text>{{info.money}}</text>
					</view>
					<view>
						<text>发票类别：</text>
						<text>{{info.invoice_type==1?'普票':'专票'}}</text>
					</view>
					<view>
						<text>申请状态：</text>
						<tn-tag v-if="info.if_ssue==1" backgroundColor="#31E749" fontColor="#ffffff"
							shape="radius">已通过</tn-tag>
						<tn-tag v-if="info.if_ssue==2" backgroundColor="#E83A30" fontColor="#ffffff"
							shape="radius">被拒绝</tn-tag>
						<tn-tag v-if="info.if_ssue==3" backgroundColor="#FF7043" fontColor="#ffffff"
							shape="radius">审核中</tn-tag>
					</view>
					<view v-if="info.if_ssue==2">
						<text>拒绝原因：</text>
						<text>{{info.reason}}</text>
					</view>
					<view>
						<text>发票图片：</text>
						<text v-if="info.invoice_image==''||info.invoice_image==null">待上传</text>
						<image @click="openImg" v-if="info.invoice_image!=''&&info.invoice_image!=null"
							:src="apiImgUrl+info.invoice_image" style="width: 100%;margin-top: 20rpx;" mode="widthFix">
						</image>
					</view>
					<view style="text-align: center;margin-top: 50rpx;">
						<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff" @click="infoMod = false"
							width="40%">关闭</tn-button>
					</view>
				</view>
			</view>
		</tn-popup>
		<tn-popup v-model="tt_add_show" mode="right" :safeAreaInsetBottom="true" width="100%">
			<tn-nav-bar :isBack="false" backTitle="" :alpha="true" :bottomShadow="false">
				<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
					<view style="padding-left: 15rpx;" @click="tt_add_show = false">
						<text class="tn-icon-left" style="font-size: 40rpx;"></text>
					</view>
					<view class="tn-margin-top"
						style="text-shadow:  1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;">
						<tn-tabs :list="[{name:'选择开票信息'}]" activeColor="#000" :bold="false" :fontSize="34"></tn-tabs>
					</view>
				</view>
			</tn-nav-bar>
			<view :style="{paddingTop: vuex_custom_bar_height+'px'}" class="custom-modal-content">
				<view v-if="!tt_add_show_add" style="padding:0rpx 30rpx 150rpx 30rpx;">
					<view style="text-align:right;">
						<tn-button @click="tt_add_show_add = true" backgroundColor="#3D7EFF" size="sm"
							fontColor="#ffffff">添加开票信息</tn-button>
					</view>
					<tn-radio-group v-model="header_id" width="100%" wrap @change="radioGroupChange">
						<block v-for="(item,index) in tt_list">
							<tn-radio :name="item.id+''" :size="40" borderColor="#3D7EFF" activeColor="#3D7EFF">
								<view style="padding: 30rpx 0rpx;margin-left: 30px;">
									<view>申请人：{{item.name}}</view>
									<view>公司名称：{{item.unit}}</view>
									<view>纳税人识别号：{{item.taxpayer_identification_number}}</view>
									<view>单位地址：{{item.unit_address}}</view>
									<view>单位电话：{{item.telephone}}</view>
									<view>银行基本户账号：{{item.bank_basic_account_number}}</view>
									<view>开户行：{{item.bank}}</view>
								</view>
							</tn-radio>
						</block>
					</tn-radio-group>
				</view>
				<view style="position: fixed;bottom: 80rpx;width: 92%;margin: 0 auto;text-align: center;">
					<tn-button @click="tt_add_show = false" backgroundColor="#3D7EFF" width="300rpx" height="80rpx"
						fontColor="#ffffff">确定</tn-button>
				</view>
				<view v-if="tt_add_show_add" class="text" style="padding:20rpx 40rpx;">
					<view style="text-align: center;font-size: 32rpx;font-weight: 600;">添加开票信息</view>
					<tn-form ref="form" :labelWidth="120">
						<tn-form-item prop="name">
							<tn-input placeholder="申请人" :customStyle="{width: '600rpx'}" v-model="addForm.name" />
						</tn-form-item>
						<tn-form-item prop="unit">
							<tn-input placeholder="公司名称" :customStyle="{width: '600rpx'}" v-model="addForm.unit" />
						</tn-form-item>
						<tn-form-item prop="taxpayer_identification_number">
							<tn-input placeholder="纳税人识别号" :customStyle="{width: '600rpx'}"
								v-model="addForm.taxpayer_identification_number" />
						</tn-form-item>
						<tn-form-item prop="unit_address">
							<tn-input placeholder="单位地址" :customStyle="{width: '600rpx'}"
								v-model="addForm.unit_address" />
						</tn-form-item>
						<tn-form-item prop="telephone">
							<tn-input placeholder="单位电话" :customStyle="{width: '600rpx'}" v-model="addForm.telephone" />
						</tn-form-item>
						<tn-form-item prop="bank_basic_account_number">
							<tn-input placeholder="银行基本户账号" :customStyle="{width: '600rpx'}"
								v-model="addForm.bank_basic_account_number" />
						</tn-form-item>
						<tn-form-item prop="bank">
							<tn-input placeholder="开户行" :customStyle="{width: '600rpx'}" v-model="addForm.bank" />
						</tn-form-item>
					</tn-form>
					<view style="text-align: center;margin-top: 50rpx;">
						<tn-button backgroundColor="#E6E6E6" height="70rpx" fontColor="#ffffff"
							@click="tt_add_show_add = false" width="40%">取消</tn-button>
						<tn-button backgroundColor="#3D7EFF" height="70rpx" width="40%" fontColor="#ffffff"
							style="margin-left: 30rpx;" @click="tt_add_do">提交</tn-button>
					</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	import {
		findMemberID,
		addInvoiceHeader,
		addInvoiceLog,
		someMethod,
		getInvoiceLogWithHeader
	} from "@/util/api";
	import store from "@/store";
	export default {
		data() {
			return {
				apiImgUrl: this.$store.state.imgUrl,
				addMod: false,
				infoMod: false,
				tt_add_show_add: false,
				addForm: {
					name: '',
					taxpayer_identification_number: '',
					unit: '',
					unit_address: '',
					telephone: '',
					bank_basic_account_number: '',
					bank: '',
					association_id: 0,

				},
				invoice_type_show: false,
				actionSheetList: [{
						text: '普票',
						id: 1,
					},
					{
						text: '专票',
						id: 2
					}
				],
				header_id: -1,
				header_id_name: '',
				invoice_type_name: '普票',
				invoice_type: 1,
				tt_add_show: false,
				tt_show: false,
				tt_list: [],
				money: '',
				page: 1,
				allList: [],
				info: {},
				count: 0

			}
		},
		onLoad() {
			var gid = uni.getStorageSync('Gid');
			this.addForm.association_id = gid;
			this.findMemberList();
			this.getList();
		},
		onReachBottom() {
			this.page += 1;
			this.getList();
		},
		methods: {
			radioGroupChange(d) {
				const item = this.tt_list.find(item => item.id == d);
				console.log(item);
				this.header_id_name = item;
			},
			openImg() {
				uni.previewImage({
					current: 0,
					urls: [this.apiImgUrl + this.info.invoice_image],
				});
			},
			openInfo(d) {
				getInvoiceLogWithHeader({
						id: d.id
					})
					.then(res => {
						console.log(res);
						this.info = res.data;
						this.infoMod = true;
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			actionSheetCallback(index) {
				this.invoice_type_name = this.actionSheetList[index].text;
				this.invoice_type = this.actionSheetList[index].id;
			},
			tt_show_do() {
				this.tt_add_show = true;
				// if (this.tt_list.length == 0) {
				// 	uni.showToast({
				// 		title: '请先添加开票信息',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	this.tt_add_show = true;
				// } else {
				// 	this.tt_show = true;
				// }

			},
			kp_add_do() {
				if (this.header_id == 0) {
					uni.showToast({
						title: '请选择开票信息',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.money == '' || this.money <= 0) {
					uni.showToast({
						title: '请填写金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				addInvoiceLog({
						association_id: this.addForm.association_id,
						header_id: this.header_id,
						money: this.money,
						invoice_type: this.invoice_type
					})
					.then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.addMod = false;
							this.header_id = 0;
							this.header_id_name = '请选择开票信息';
							this.invoice_type_name = '普票';
							this.invoice_type = 1;
							this.money = '';
							this.allList = [];
							this.page = 1;
							this.getList();
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg,
							})
						}
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			tt_confirm(d) {
				console.log(d);
				this.header_id_name = d[0].label;
				this.header_id = d[0].value;
			},
			tt_add_do() {
				addInvoiceHeader(this.addForm)
					.then(res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.tt_add_show = false;
						this.findMemberList();
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			findMemberList() {
				findMemberID()
					.then(res => {
						console.log(res);
						if (res.data == null) {
							this.tt_list = [];
						} else {
							// var key = res.data;
							// const transformedSelectList = key.map(item => ({
							// 	value: item.id,
							// 	label: item.unit
							// }));
							this.tt_list = res.data;
						}
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			getList() {
				someMethod({
						page: this.page,
						size: 10
					})
					.then(res => {
						console.log(res);
						this.allList.push(...res.data.data);
						this.count = res.data.count;
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			goBack() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				} else {
					uni.redirectTo({
						url: '/pages/index/index'
					})

				}
			},
		}
	}
</script>

<style scoped>
	.info_text view {
		margin-bottom: 40rpx;
	}
</style>