<template>
	<div class="itemAffiliateDetail" ref="itemAffiliateDetail"></div>
	<a-modal class="generalModel" 
            v-model:visible="itemAffiliateDetailShow" 
            :footer="null" 
			:get-container="() => $refs.itemAffiliateDetail"
			width="75%"
			:maskClosable="false"
			:centered="true"
			:closable="false"
			:mask="true"
			wrapClassName="#app"
    >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>

			</div>
		</div>
		<div class="admin_page">
			<div class="admin_state_item">
				<span>Start Time:</span>
				<a-range-picker
					style="width:280px"
					class="range_picker"
					v-model:value="rangePickerValue"
					:allowClear="false"
					:placeholder="[
						$t('HistoryPage.StartDate'),
						$t('HistoryPage.EndDate'),
					]"
					valueFormat="YYYY-MM-DD"
				>
					<template #suffixIcon>
						<span
							class="icon iconfont range_picker_icon icon-rili"
						></span>
					</template>
				</a-range-picker>
				<div class="gallery_btn" @click="getDetailList" style="margin-left: 2rem;">Search</div>
			</div>
			<div class="itemAffiliateDetail_content generalModel_table_content" ref="historyTable"> 
				<a-table
					:columns="columns"
					:data-source="collectionList"
					:scroll="{ y: 200 }"
					@change="changePage"
					:pagination="{
						showSizeChanger: true,
						current: currentPage,
						pageSize: pageSize,
						total: total,
						showQuickJumper: true,
						bordered: false,
					}"
				>
				</a-table>
			</div>
		</div>
	</a-modal>
	<div class="mark_loading" v-show="loadingShow">
		<a-spin size="large" />
	</div>   
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, reactive, toRefs, nextTick } from "vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
export default defineComponent({
    components: {
    },
    setup() {
        let renameData: any = ref({}); //修改名字选中的数据
		const itemAffiliateDom = reactive({
			historyTable:null as any,
		})
		const itemAffiliateDetail = reactive({
			itemAffiliateDetailShow:false,
			loadingShow:false,
			rangePickerValue:[] as any,
			itemId:-1,
			collectionList:[],
			currentPage: 1,
			pageSize: 10,
			order:'',
			total: 0,
			historyTableHeight:0,
			columns:computed(() => {
				return [
					{
						title: 'Id',
						align: "center",
						width: 50,
						dataIndex: "accountId",
						key: "accountId",
						fixed: "left",
					},{
						title: 'User Name',
						key: "username",
						dataIndex: "username",
						align: "center",
						width: 150,
					},
					{
						title: 'Time',
						align: "center",
						width: 200,
						dataIndex: "time",
						key: "time",
						sorter: true,
					},{
						title: 'First Subscription Payment Amount',
						align: "center",
						width: 200,
						dataIndex: "firstSubscriptionPaymentAmount",
						key: "firstSubscriptionPaymentAmount",
					},{
						title: 'Commission',
						align: "center",
						ellipsis: true,
						width: 150,
						dataIndex: "commission",
						key: "commission",
						fixed: "right",
					}
					
				];
			})
		})
		const init = (value:any)=>{
			itemAffiliateDetail.itemAffiliateDetailShow = true
			getCurrentMonthStart(value.type)
			nextTick(()=>{
			    itemAffiliateDetail.historyTableHeight = itemAffiliateDom.historyTable.clientHeight - 40;
				itemAffiliateDetail.itemId = value.id
				getDetailList()
			})
			
		}
		const cancelDsign = () =>{
			itemAffiliateDetail.itemAffiliateDetailShow = false
			itemAffiliateDetail.loadingShow = false
		}
		const getCurrentMonthStart = (type:any) => {
			const now = new Date(); // 获取当前日期
			const year = now.getFullYear(); // 获取当前年份
			const month = now.getMonth(); // 获取当前月份（0 - 11）
			let startOfPeriod:any, endOfPeriod:any;
			if (type === 'month') {
				startOfPeriod = new Date(year, month, 1);
				endOfPeriod = new Date(year, month + 1, 0);  // 下个月的第0天即为当前月的最后一天
				
				startOfPeriod.setHours(0, 0, 0, 0);
				endOfPeriod.setHours(23, 59, 59, 999);  // 设置为最后一天的23:59:59.999
			} else if (type === 'year') {
				startOfPeriod = new Date(year, 0, 1);
				endOfPeriod = new Date(year, 11, 31);
			}
			
			const formatDate = (date:any) => {
				return date.getFullYear() + '-' +
					String(date.getMonth() + 1).padStart(2, '0') + '-' +
					String(date.getDate()).padStart(2, '0') + ' ' +
					String(date.getHours()).padStart(2, '0') + ':' +
					String(date.getMinutes()).padStart(2, '0') + ':' +
					String(date.getSeconds()).padStart(2, '0');
			};
			if (type === 'month')itemAffiliateDetail.rangePickerValue = [formatDate(startOfPeriod),formatDate(endOfPeriod)]
			
		}


		const changePage = (e: any, filters:any, sorter:any)=>{
            itemAffiliateDetail.currentPage = e.current;
            itemAffiliateDetail.pageSize = e.pageSize;
			itemAffiliateDetail.order = sorter.order == "descend" ? "DESC" : "ASC";
            getDetailList();
        }
		const getDetailList = ()=>{
			itemAffiliateDetail.loadingShow = true
			let startDate: any = itemAffiliateDetail.rangePickerValue?.[0]
                ? itemAffiliateDetail.rangePickerValue[0]+' '+'00:00:00'
                : "";
            let endDate: any = itemAffiliateDetail.rangePickerValue?.[1]
                ? itemAffiliateDetail.rangePickerValue[1]+' '+'23:59:59'
                : "";
			let data = {
				affiliateId:itemAffiliateDetail.itemId,
				endTime:endDate,
				startTime:startDate,
				order:itemAffiliateDetail.order,
				page: itemAffiliateDetail.currentPage,
				size: itemAffiliateDetail.pageSize,
			}
			Https.axiosPost(Https.httpUrls.getEachAffiliateGeneratedRevenue,data).then((rv:any)=>{
			    console.log(rv);
				itemAffiliateDetail.collectionList = rv.records
				itemAffiliateDetail.loadingShow = false
				itemAffiliateDetail.total=rv.total
			}).catch((err:any)=>{
				itemAffiliateDetail.loadingShow = false
			})

		}
        return {
           ...toRefs(itemAffiliateDom),
           ...toRefs(itemAffiliateDetail),
		   init,
		   cancelDsign,
		   changePage,
		   getDetailList,
        };
    },
});
</script>
<style lang="less" scoped>
.itemAffiliateDetail{
	.itemAffiliateDetail_content{
		margin-top: 2rem;
	}
	.admin_page .admin_table_content .operate_list{
	justify-content: space-between;
}
}
</style>