<template>
	<s-layout title="发票管理" class="invoice_center">
		<!-- <view class="invoiceTitle">发票列表</view> -->
		<view class="invoiceCenters">
		<uni-section class="invoice_tabbar" title="实心标签" type="line">
			<view class="uni-padding-wrap uni-common-mt invoice_tabbar_title">
				<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#7D9337"
					@clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 1">
					<view class="invoList" v-if="state.invoList.length>0">
						<view class="invoice_item-a" v-for="(item,index) in state.invoList" :key="index">
							<view class="goods_box">
								<image :src="item.picUrl"></image>
								<view>{{item.spuName}}</view>
							</view>
							<view class="invoice_box">
								<view>
									<view class="invoicea_type">{{item.invoice_type}}</view>
									<view>申请时间:{{item.createTime}}</view>
								</view>
								<view class="goods_mon">
									￥{{ fen2yuan(item.price) }}
								</view>
							</view>
							<view class="set_box">
								<view class="invoicea_status">{{ item.status === 1 ? "已开票" :  "开票中" }}</view>
								<view class="lookDetailbtn" @tap.stop="lookinvDetail(item.invoice)">查看发票信息</view>
							</view>

						</view>
					</view>
					<view class="noInvoices" v-else>
						<image src="/static/data-empty.png"></image>
						没有发票信息呦~
					</view>
				</view>
				<view v-if="current === 0">
					<view class="invoList" v-if="state.riseList.length>0">
						<view class="invoice_item" v-for="(item,index) in state.riseList" :key="index">
							<view class="ii_left">
								<view class="inhead_name">{{item.name}}
									<view class="defaultFont" v-if="item.isDefault">默认</view>
								</view>
								<view class="inhead_email color-gray">联系邮箱：{{ item.email }}</view>
								<view class="inhead_tel color-gray">联系电话：{{ item.companyTel }}</view>
							</view>
							<view class="ii_right">
								<view class="inhead_type">{{item.type?"企业":'个人'}}普通发票</view>
								<view class="inhead_set">
									<view class="inhead_set_btn inhead_change" @tap.stop="updateInvoice(item.id)"><uni-icons class="ii_icon" type="compose"
											size="18"></uni-icons>编辑</view>
									<view class="inhead_set_btn inhead_del" @tap.stop="deleInvoicehead(item.id)"><uni-icons class="ii_icon" type="trash"
											size="18"></uni-icons>删除</view>
								</view>
							</view>
						</view>
					</view>
					<view class="noInvoices" v-else>
						<image src="/static/data-empty.png"></image>
						没有发票信息呦~
					</view>
					<view class="addInvoiceBtn" @tap.stop="addInvoice">添加新发票</view>
				</view>
			</view>
		</uni-section>
		<!-- <view v-if="isPopupVisible" class="custom-popup">
		  <view class="popup-content">
			  <view class="del_btn" @tap.stop="closeImg">X</view>
			  <image></image>
		    <!-- <view class="title">请选择升级方向</view>
			
		
		    <radio-group @change="onRadioChange">
		      <label v-for="(item, index) in options" :key="index" class="radio-item">
		        <radio :value="item.value" :checked="item.value === selectedValue" />
		        {{ item.label }}
		      </label>
		    </radio-group> -->
		    <!-- <view class="btns">
		      <button @click="confirmSelection('up')"></button>
		      <button @click="confirmSelection('noup')"></button>
		    </view> -->
		  </view>
	</s-layout>
</template>

<script setup>
	import DeliveryApi from '@/sheep/api/trade/delivery';
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		fen2yuan,
		formatGoodsSwiper,
		useDurationTime
	} from '@/sheep/hooks/useGoods';
	import InvoiceApi from '@/sheep/api/trade/invoices';
	import sheep from '@/sheep';
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app';
	// let isPopupVisible = ref(false); 
	const current = ref(0);
	const state = reactive({
		invoList: [
		],
		riseList: [{
				riseName: "抬头1",
				invoice_no: "165121349",
				invoice_money: 29800
			},
		]
	})
	
	// onMounted(()=>{
	// 	//获取发票列表
	// 	getInvoicelistdatas()
	// 	//获取抬头列表
		
	// })
	onLoad((options)=>{
		getInvoicelistdatas()
		
		if(options.toRight){
			current.value = 1
		}
	})
	
	// const closeImg = ()=>{
	// 	// isPopupVisible.value = false
	// }
	
	onShow(()=>{
		getInvoicelistdatas()
		getInvoiceheadlist()
	})
	
	
 	const getInvoicelistdatas = async ()=>{
		const {data} = await InvoiceApi.getInvoicesList()
		console.log(data)
		if(data){
			data.list.forEach(item => {
			  item.createTime = formatTimestamp(item.createTime); // 直接修改原对象
			});
			state.invoList = data.list
			console.log(state.invoList)
		}
	}
	const getInvoiceheadlist =async ()=>{
		const {data} = await InvoiceApi.getInvoicesHeadList()

			state.riseList = data
			console.log(state.riseList)

	}
	const updateInvoice = (headid)=>{
		console.log("点击了修改")
		uni.navigateTo({
			url:"/pages/user/invoices/addInvoiceHeader?type=update&headid="+headid
		})
	}
	const lookinvDetail= (invoiceUrl)=>{
		if(!invoiceUrl){
			sheep.$helper.toast('暂无发票，联系管理员开票');
			return;
		}
		// isPopupVisible.value = true
		uni.navigateTo({
			url:"/pages/user/invoices/invoicePreviews?invoiceUrl="+invoiceUrl
		})
		
	}
	const deleInvoicehead = (headId)=>{
		uni.showModal({
		  title: '提示',
		  content: '确定要删除此发票吗？',
		  success: async function (res) {
		    if (!res.confirm) {
		      return;
		    }
			deleteInvoicehead(headId)
		    
		  },
		});
	}
	const deleteInvoicehead = async (headId)=>{
		const {code } = await InvoiceApi.deleteInvoicehead(headId)
		if(code === 0){
			uni.showToast({
				title: '删除成功',
				icon: 'success',
			});
			getInvoiceheadlist()
		}
	}
	const onClickItem = (e) => {
		
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
		}
		if(e.currentIndex === 0){
			getInvoiceheadlist()
		}else{
			getInvoicelistdatas()
		}
		
	}
	const items = reactive([ '抬头管理','发票记录'])
	const addInvoice = () => {
		uni.navigateTo({
			url: "/pages/user/invoices/addInvoiceHeader?type=add"
		})

	}
	function formatTimestamp(timestamp) {
	  const date = new Date(Number(timestamp)); // 确保时间戳是数字
	
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，加 1 并补零
	  const day = String(date.getDate()).padStart(2, '0');
	
	  const hours = String(date.getHours()).padStart(2, '0');
	  const minutes = String(date.getMinutes()).padStart(2, '0');
	  const seconds = String(date.getSeconds()).padStart(2, '0');
	
	  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}
</script>

<style lang="scss" scoped>
	
	.invoiceCenters{
		overflow: auto;
	}
	::v-deep .invoice_tabbar {
		
		.invoice_tabbar_title {
			margin-bottom: 20rpx;
			background: white !important;
			.segmented-control__text {
				font-size: 17px;
			}

			.segmented-control__item--text {
				border-bottom-width: 3px;
			}
		}
	}
//模态框
  .custom-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .popup-content {
    background-color: #fff;

    border-radius: 10px;
    width: 72%;
	height: 50vh;
	position: relative;
    text-align: center;
	background-repeat: no-repeat;
	background-size: 105% 105%;
	background-position: center;
	background-image: url("https://xcx.dfhg888.cn/admin-api/infra/file/29/get/6bbea043f7ac06e25a33a28c7f942a8034a7a75185084c1556d2b1d25339a7cb.png");
	
	.del_btn{
		position: absolute;
		right: 20rpx;
		top: 13rpx;
		font-size: 36rpx;
	}
  }
  .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .radio-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  .btns {
	width: 100%;
    display: flex;
	position: absolute;
	bottom: 98rpx;
    justify-content: center;
	>button{
		width: 33%;
		height: 42rpx;
		margin: 0;
		background: transparent;
	}
  }
  //模态框
	.addInvoiceBtn {
		width: 90%;
		height: 95rpx;
		line-height: 95rpx;
		text-align: center;
		border-radius: 100rpx;
		z-index: 10;
		position: fixed;
		color: white;
		font-size: 36rpx;
		background-color: #7D9337;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.color-gray {
		color: #6e6a6a;
	}

	.invoList {
		width: 100%;
		height: 75vh;
		overflow: auto;
		background-color: #F5F5F5;

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

			.goods_box {
				width: 100%;
				display: flex;

				>image {
					margin-right: 20rpx;
					width: 80rpx;
					min-width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
				}
			}

			.invoice_box {
				width: 100%;
				margin: 20rpx auto;
				padding: 20rpx 30rpx;
				background-color: #F5F6F8;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;

				.invoicea_type {
					font-weight: bold;
					margin-bottom: 16rpx;
				}

				.goods_mon {
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			.set_box {
				display: flex;
				margin: 36rpx auto 0;
				align-items: center;
				justify-content: space-between;

				.invoicea_status {
					font-size: 30rpx;
					font-weight: bold;
				}

				.lookDetailbtn {
					border-radius: 100rpx;
					border: 1px solid #bbb5b5;
					padding: 10rpx 16rpx;
				}
			}
		}

		.invoice_item {
			width: 95%;
			height: 230rpx;
			margin: 0 auto 20rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: white;
			display: flex;
			justify-content: space-between;

			.ii_left {
				.inhead_name {
					display: flex;
					font-size: 30rpx;
					margin-bottom: 16rpx;
					align-items: center;
					.defaultFont{
						margin-left: 26rpx;
						font-size: 22rpx;
						    padding: 0 10rpx;
						    color: #7D9337;
						    border: 1px solid #7D9337;
					}
				}

				.inhead_email {
					margin-bottom: 8rpx;
				}
			}

			.ii_right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-between;

				.inhead_type {
					background-color: #FAF0e2;
					padding: 5rpx 10rpx;
					color: #C9792B;
					font-size: 28rpx;

				}

				.inhead_set {
					display: flex;

					.inhead_set_btn {

						.ii_icon {
							margin-right: 5rpx;
						}
					}

					.inhead_change {
						margin-right: 24rpx;
					}
				}
			}
		}
	}
	.noInvoices{
		    width: 100%;
		    display: flex;
		    padding-top: 135rpx;
		    text-align: center;
		    flex-direction: column;
		    align-items: center;
		    font-size: 31rpx;
			color: #B0B0B0;
			>image{
				margin-bottom: 20rpx;
			}
	}
</style>