<template>
	<s-layout title="发票申请" class="set-userinfo-wrap">
		<!-- <view class="invoiceTitle">发票列表</view> -->
		<view class="invoiceHeader">
			<uni-forms ref="baseForm" label-width="200" :modelValue="state.baseFormData" :rules="rules">
				<!-- <uni-forms-item label="发票类型" required name="type">
					<uni-data-checkbox selectedColor="#7D9337" @change="headChange" v-model="state.baseFormData.type"
						:localdata="state.sexs" />
				</uni-forms-item> -->
				<uni-forms-item label="发票金额" required name="orderMoney">
					<uni-easyinput :clearable="false" readonly class="right-input"
						v-model="state.baseFormData.orderMoney" inputBorder="false" placeholder="请输入发票金额" />
				</uni-forms-item>
				<!-- <uni-forms-item label="开票方式" required name="way">
					<uni-data-checkbox selectedColor="#7D9337" @change="headChange" v-model="state.baseFormData.way"
						:localdata="state.ways" />
				</uni-forms-item> -->
				<uni-forms-item label="发票抬头" required name="headId">
					<!-- <uni-easyinput :clearable="false" class="right-input" v-model="state.baseFormData.taxNumber"
						placeholder="请输入发票抬头(必填)" /> -->
						
						    <!-- Picker 组件 -->
						    <picker
						      mode="selector"
						      :range="state.options"
						      :value="selectedIndex"
						      @change="handlePickerChange"
						      class="picker"
						    >
						      <view class="picker-text">
						        {{ state.options[selectedIndex] }}
						      </view>
						    </picker>
					<!-- 单级选择器 -->
				</uni-forms-item>
				<!-- <uni-forms-item label="手机号" name="companyTel">
					<uni-easyinput :clearable="false" class="right-input" v-model="state.baseFormData.companyTel"
						placeholder="请输入手机号" />
				</uni-forms-item> -->
				<!-- <uni-forms-item label="详细地址" name="companyAddress">
					<uni-easyinput :clearable="false" class="right-input" v-model="state.baseFormData.companyAddress"
						placeholder="请输入详细地址" />
				</uni-forms-item> -->

				<!-- <uni-forms-item label="邮箱(非必填)" name="email">
					<uni-easyinput :clearable="false" class="right-input" v-model="state.baseFormData.email"
						placeholder="请输入邮箱" />
				</uni-forms-item> -->
				<!-- <uni-forms-item label="公司开户行">
					<uni-easyinput v-model="state.baseFormData.name" placeholder="请输入公司开户行" />
				</uni-forms-item>
				<uni-forms-item label="开户行账号">
					<uni-easyinput v-model="state.baseFormData.name" placeholder="请输入开户行账号" />
				</uni-forms-item>
				<uni-forms-item label="开户行账号">
					<uni-easyinput v-model="state.baseFormData.name" placeholder="请输入开户行账号" />
				</uni-forms-item> -->

				<!-- <view class="agreement-box ss-flex ss-row-left">
					<label class="radio ss-flex ss-col-center" @tap="onChange">
						<radio :checked="state.baseFormData.isDefault" color="var(--ui-BG-Main)"
							style="transform: scale(0.8)" @tap.stop="onChange" />
						<view class="agreement-text ss-flex ss-col-center ss-m-l-8">
							设置为默认抬头
						</view>
					</label>
				</view> -->

			</uni-forms>
		</view>
		<view class="prompt_box">
			<view>温馨提示：</view>
			<view>1、应国家税务总局要求，您若开具增值税普通发票，须同时提供企业抬头及纳税人识别号，否则发票将无法用于企业报销;</view>
			<view>2，发票将由订单所属城市的公司为您开具;</view>
			<view>3、配合国家税务总局推进全面数字化的电子发票，部分城市已转为全电发票，发票处理时长为1-3个工作日，请耐心等待。</view>
		</view>
		

		<view class="addInvoiceBtn" @tap.stop="addInvoice">提交申请</view>
		<!-- <view class="cancelInvoiceBtn" @tap.stop="onClickBack">取消</view> -->
	</s-layout>
</template>

<script setup>
	import InvoiceApi from '@/sheep/api/trade/invoices';
	import {
		onMounted,
		reactive,
		ref,
		unref,
		computed
	} from 'vue';
	import {
		fen2yuan,
		formatGoodsSwiper,
		useDurationTime
	} from '@/sheep/hooks/useGoods';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	const state = reactive({
		invoList: [],
		sexs: [{
			text: '电子发票',
			value: false
		}, {
			text: '实体发票',
			value: true
		}],
		ways: [{
			text: "商品类别",
			value: 0
		}, {
			text: "商品明细",
			value: 1
		}],
		options:[],
		headList:[],
		baseFormData: {
			orderMoney: '',
			headId: '',
			companyTel: '',
			companyAddress: '',
			email: '',
			bizId: '',
			status: 0,
			userId: ''
		},
	})


// 当前选中的索引
let selectedIndex = ref(0);

// 根据索引获取当前选中的值
let selectedValue = ref(state.options[selectedIndex.value]);

// 处理选择改变事件
const handlePickerChange = (e) => {
  const index = e.detail.value; // 获取用户选择的索引
  selectedIndex.value = index;
  selectedValue.value = state.options[index]; // 更新显示的值
  console.log(index)
  state.baseFormData.headId = state.headList[index].id
  
};

const getInvoiceheadlist =async ()=>{
		const {data} = await InvoiceApi.getInvoicesHeadList()
		if(!data || data.length === 0){
			sheep.$helper.toast("请先增加发票抬头");
			return
		}
			state.headList = data
			state.baseFormData.headId = data[0].id

			console.log(data)
			const names = data.map(item => item.name);
			state.options = names
			
	}

	const rules = {
		
		orderMoney: {
			rules: [{
				required: true,
				errorMessage: '请输入发票金额',
			}, ],
		},
	};


	const baseForm = ref(null);
	const userInfo = computed(() => sheep.$store('user').userInfo);
	onLoad((options) => {
		getInvoiceheadlist()
		console.log("路由参数：", options)
		state.baseFormData.orderMoney = fen2yuan(options.count)
		state.baseFormData.bizId = options.orderId

		state.baseFormData.userId = userInfo.value.id
		
		
	})

	const hasHistory = sheep.$router.hasHistory();

	function onClickBack() {
		if (hasHistory) {
			sheep.$router.back();
		} else {
			sheep.$router.go('/pages/index/index');
		}
	}
	const headChange = (e) => {
		console.log("e", e)
	}
	const onChange = () => {

		state.baseFormData.isDefault = !state.baseFormData.isDefault;

	}
	const getInvoiceheaddetail = async (headid) => {
		const res = await InvoiceApi.getInvoicesheadDetail(headid)
		console.log("返回的数据", res);
		state.baseFormData = res.data
	}
	const addInvoice = async () => {
		// console.log("表单数据",state.baseFormData)
		// const validate = await unref(baseForm)
		// 	.validate()
		// 	.catch((error) => {
		// 		console.log('error: ', error);
		// 	});
		// console.log("validate", validate)
		// if (!validate) {
		// 	return;
		// }
		// if (validate) {
			addInvoicehead(state.baseFormData)


		// } else {
		// 	console.log('验证失败');
		// 	uni.showToast({
		// 		title: '请检查输入内容',
		// 		icon: 'none',
		// 	});
		// }
	}

	const addInvoicehead = async (data) => {
		const res = await InvoiceApi.createInvoicenew(data)
		console.log("返回数据", res)
		if (res.code === 0) {
			uni.hideToast();
			uni.showToast({
				title: '提交成功',
				icon: 'success',
			});
			setTimeout(() => {
				onClickBack()
			}, 1000)
		} else {
			sheep.$helper.toast(res.msg);
			// uni.showToast({
			// 	title: res.msg,
			// 	icon: 'error',
			// });
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .invoiceHeader {
		
		
		// margin: 20rpx 16rpx;
		background-color: white;
		.uni-forms-item__content{
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.picker-text{
			width: 300rpx;
			height:60rpx ;
			line-height: 60rpx;
			text-align: right;
			padding-right: 10px;
		}
		.uni-easyinput__content-input {
			direction: rtl;
			text-align: right;
		}

		.is-input-border {
			border: none;
		}

		.uni-data-checklist .checklist-group {
			justify-content: flex-end;
		}

		.uni-forms-item {
			position: relative;
			margin-bottom: 6rpx;
		}

		.uni-forms-item::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1rpx;
			/* 调整为你需要的边框厚度 */
			background-color: #ededed;
		}

		.uni-forms-item__inner {
			padding-bottom: 10rpx !important;
		}

		.agreement-text {
			white-space: nowrap;
		}

		.tcp-text {
			color: #7D9337;
		}

		.agreement-box {
			margin-top: 20rpx;
			width: 100%;
		}

		.uni-forms-item__label .label-text {
			font-size: 29rpx !important;
		}

		.right-input {
			direction: rtl;
			text-align: right;
		}
	}
	.prompt_box{
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.addInvoiceBtn {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 100rpx;
		position: fixed;
		color: white;
		font-size: 36rpx;
		background-color: #7D9337;
		bottom: 65rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.cancelInvoiceBtn {
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 100rpx;
		position: fixed;
		color: white;
		font-size: 36rpx;
		background-color: #7D9337;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.invoiceHeader {
		// padding: 10rpx 20rpx 0 10rpx;
		padding: 20rpx 20rpx 20rpx 30rpx;
		border-radius: 10rpx;
	}

	.invoList {
		width: 100%;
		background-color: #F5F5F5;

		.invoice_item {
			width: 95%;
			margin: 0 auto 20rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: white;

			.invoice_no {
				margin-bottom: 10rpx;
			}
		}
	}
</style>