<template>
	<view class="content">
		<view class="list-box" v-for="item in invoiceList" :key="item.id">
			<view>
				<view class="message">
					<text class="text">{{item.companyName}}</text>
					<text class="tag" v-if="item.defaultFlag">{{$t('index.default')}}</text>
				</view>
				<view class="address">{{item.accountNum}}</view>
			</view>
			<view class="icon-box">
				<block v-if="orderId === '-1'">
					<uni-icons type="trash" color="#99A0AF" size="24" @click="deleteMessage(item.id)"></uni-icons>
					<uni-icons type="compose" style="margin-left: 20rpx" @click="addInvoice(item.id)" color="#99A0AF"
						size="24"></uni-icons>
				</block>
				<block v-else>
					<view class="radio" @click="choseAddress(item)">{{$t('index.selecting')}}</view>
				</block>
			</view>
		</view>
		<view class="btn-box">
			<button type="default" class="btn" @click="addInvoice()">
				<uni-icons type="plusempty" color="#fff" size="16"></uni-icons>
				<text class="text">{{$t('index.invoice-add')}}</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getCustomerInvoive,
		deleteInvoiceInfo,
		choseInvoice
	} from '@/config/api.js'
	import {
		Moment
	} from '@/utils/moment.js'
	export default {
		name: 'invoice',
		data() {
			return {
				orderId: '-1', // 进入方式。-1：'我的'页面进入；当从'订单详情'进入时等于订单id
				invoiceList: []
			}
		},
		methods: {
			getInvoiveList() {
				getCustomerInvoive().then(({
					content
				}) => {
					this.invoiceList = content
				})
			},
			addInvoice(id) {
				if (this.orderId === '-1') {
					let url = id ? `/pages/addInvoice/index?id=${id}` : '/pages/addInvoice/index'
					uni.navigateTo({
						url
					})
				} else {
					uni.navigateTo({
						url: '/pages/addInvoice/index?type=use'
					})
				}
			},
			choseAddress(item) {
				item['invoiceType'] = '1'
				let physicalInvoiceList = []
				physicalInvoiceList.push(item)
				getApp().globalData.physicalInvoiceList = physicalInvoiceList
				// let pages = getCurrentPages();
				// let prevPage = pages[ pages.length - 2 ];
				// prevPage.$vm.physicalInvoiceList.push(item)
				uni.navigateBack();
			},
			deleteInvoice(id) {
				deleteInvoiceInfo({
					id
				}).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.operate-success'),
							icon: 'none'
						})
					}, 30)
					this.getInvoiveList()
				})
			},
			deleteMessage(id) {
				let _this = this;
				uni.showModal({
					title: this.$t('index.notice-tip'),
					content: this.$t('index.msg-is-invoice-delete'),
					success: function(res) {
						if (res.confirm) {
							_this.deleteInvoice(id)
						}
					}
				});
			}
		},
		onLoad(options) {
			if (options.id) { // 订单详情选择物理发票
				this.orderId = options.id
				uni.setNavigationBarTitle({
					title: this.$t('index.msg-switch-success')
				});
			}
		},
		onShow() {
			this.getInvoiveList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 120rpx;
	}

	.list-box {
		height: 108rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 30rpx 0 30rpx;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 1px 8px 0px rgba(22, 119, 255, 0.08);

		.message {
			display: flex;
			align-items: center;
			line-height: 1;

			.text {
				font-size: 30rpx;
				color: #191A23;

				&.phone {
					margin-left: 30rpx;
				}
			}

			.tag {
				padding: 3px 16rpx;
				color: #DE0000;
				border: 1rpx solid #DE0000;
				border-radius: 5px;
				font-size: 12px;
				line-height: 1;
				margin-left: 20rpx;
			}
		}

		.address {
			font-size: 14px;
			color: #99A0AF;
			line-height: 1;
			margin-top: 16rpx;
		}

		.radio {
			font-size: 28rpx;
			color: #B60001;

			// &.disabled {
			// 	color: #99A0AF;
			// }
			// width: 32rpx;
			// height: 32rpx;
			// border: 1rpx solid #D5E2F3;
			// border-radius: 50%;
			// position: relative;
			// transition: border .3s;

			// &::after {
			// 	content: ' ';
			// 	position: absolute;
			// 	width: 16rpx;
			// 	height: 16rpx;
			// 	top: 8rpx;
			// 	left: 8rpx;
			// 	border-radius: 50%;
			// 	transition: background .3s;
			// }

			// &.active {
			// 	border: 1rpx solid #DE0000;

			// 	&::after {
			// 		background-color: #DE0000;
			// 	}
			// }
		}
	}

	.btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
		padding: 0 30rpx 20rpx;

		.btn {
			height: 96rpx;
			background-color: #B60001;
			display: flex;
			justify-content: center;
			align-items: center;

			.text {
				font-size: 30rpx;
				color: #FFFFFF;
				margin-left: 20rpx;
			}
		}
	}
</style>