<template>
	<view>
		<view class="billing-content">
			<view class="uni-title uni-common-mt uni-common-pl">开票类型</view>
			<view class="uni-list">
				<radio-group @change="typeChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>

			<view class="paddinglr30 bg-white uni-text border-bottom-1 pos-rel" @click="detailClick">
				<view class="jy-fix-height34">
					<text class="color-black">抬头类型：</text>
					<text class="color-black">公司</text>
				</view>
				<view class="jy-fix-height34">
					<text class="color-black">发票抬头：</text>
					<text class="color-black">111</text>
				</view>
				<view class="jy-fix-height34">
					<text class="color-black">纳税人识别号：</text>
					<text class="color-black">1111</text>
				</view>
				<view class="jy-fix-height34" v-if="current === 0">
					<text class="color-black">电子邮箱：</text>
					<text class="color-black">111</text>
				</view>
				<view class="jy-fix-height34" v-if="current === 1">
					<text class="color-black">邮寄地址：</text>
					<text class="color-black">北京市海淀区玲珑路中关村产业园15A三层</text>
				</view>
				<view class="jy-fix-height34" v-if="current === 1">
					<text class="color-black">联系方式：</text>
					<text class="color-black">王旭 13810587647</text>
				</view>
				<view class="jy-fix-height34">
					<text class="color-black">备注：</text>
					<text class="color-black">111</text>
				</view>

				<view class="uni-icon pos-abs icon-arrowright uni-icon-arrowright">
				</view>
			</view>

			<!-- 每项选择 -->
			<view class="billing-list">
				<checkbox-group name="check" @change="changeCheck" class="check">
					<!-- 注意v-for不要设在checkbox-group上 -->
					<label class="uni-list paddingl10 pos-rel" v-for="(item, index) in content" :key="item.id">
						<view class="jy-fix-height34">
							<checkbox :value="item.value" :checked="item.checked" /><text
								class="margin-left-5">余额充值</text>
						</view>
						<view class="jy-fix-height34 paddinglr30 margin-left-5">{{item.name}}</view>
						<view class="jy-fix-height34 paddinglr30 margin-left-5">{{item.time}}</view>
						<view class="pos-abs billing-money">
							{{item.money}}
						</view>
					</label>
				</checkbox-group>
			</view>
			<view class="billing-total">
				您已选中0笔交易，共0元
			</view>
			<!-- 全选 -->
			<checkbox-group name="allCheck" @change="changeAll">
				<label class="billing-all paddinglr30">
					<checkbox :value="allCheck.value" :checked="allCheck.checked" /><text>{{allCheck.name}}</text>
					<button type="primary" class="billing-submit" @click="billingSubmit">提交发票</button>
				</label>
			</checkbox-group>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: '1',
						name: '增值税电子普通发票',
						checked: 'true'
					},
					{
						value: '2',
						name: '增值税纸质专用发票',

					}
				],
				current: 0,
				allCheck: {
					name: '全选',
					value: 'all',
					checked: false
				},
				content: [{
						name: '微信支付',
						value: '1',
						id: 1,
						money: '5000',
						time: '2022-01-12',
						whether: true
					},
					{
						name: '微信支付',
						value: '2',
						money: '5000',
						time: '2022-01-12',
						id: 2,
						whether: true
					},
					{
						name: '微信支付',
						value: '2',
						money: '5000',
						time: '2022-01-12',
						id: 2,
						whether: true
					},
					{
						name: '微信支付',
						value: '2',
						money: '5000',
						time: '2022-01-12',
						id: 2,
						whether: true
					},
					{
						name: '线下公对公',
						value: '3',
						money: '5000',
						time: '2022-01-12',
						id: 3,
						whether: true
					}
				]

			}
		},
		methods: {
			typeChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			detailClick() {
				uni.navigateTo({
					url: '../invoiceTitle/invoiceTitle'

				});
			},
			// 全选
			changeAll: function(e) {
				if (e.detail.value.length == 0) {
					this.content.map(item => this.$set(item, 'checked', false));
					this.$set(this.allCheck, 'checked', false);
				} else {
					this.content.map(item => this.$set(item, 'checked', true));
					this.$set(this.allCheck, 'checked', true);
				}
			},
			// 多选
			changeCheck: function(e) {
				var items = this.content;
				var len = this.content.length;
				var values = e.detail.value;
				// console.log(values)
				for (var i = 0; i < len; i++) {
					var item = items[i];
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true);
					} else {
						this.$set(item, 'checked', false);
					}
				}
				// 判断选中状态
				var arr = [];
				this.content.forEach(item => item.whether == true ? arr.push(item) : '');
				var isAll = arr.every(item => item.checked == true);
				isAll ? this.$set(this.allCheck, 'checked', true) : this.$set(this.allCheck, 'checked', false)
			},
			billingSubmit() {

			},

		}
	}
</script>

<style lang="scss">
	.icon-arrowright {
		color: #bbb;
		// font-size: 20px;
		right: 2upx;
		top: 73px;
	}

	.billing-list {
		width: 100%;
		margin-bottom: 82px;
	}

	.billing-money {
		top: 34px;
		right: 20px;
		height: 34px;
		list-height: 34px;
		// z-index: 1;
	}

	.billing-total {
		position: fixed;
		bottom: 46px;
		left: 0;
		width: 100%;
		height: 34px;
		line-height: 34px;
		// color: #51c24e;
		background-color: #f2fded;
	}

	.billing-all {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 46px;
		line-height: 46px;
		// font-size: 24px;
		background-color: #f6f6f6;
	}

	.billing-submit {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100px;
		height: 46px;
		line-height: 46px;
	}
</style>
