<template>
    <div class="admin_page">
		<div class="admin_table_search">
			<div class="admin_state">
				<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>
				<div class="admin_state_item">
					<span>State:</span>
					<a-select v-model:value="currentState.value" size="large" style="width:280px" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
				</div>
				<div class="admin_state_item">
					<span>Affiliate Id:</span>
					<input
						style="width:280px" 
                        v-model="affiliateId"
                        placeholder="Please enter Affiliate Id"
                        @keydown.enter="gettrialList"
                        type="text"
                    />
				</div>
			</div>
			<div class="admin_search">
				<div class="admin_search_item" @click="searchHistoryList">Search</div>
			</div>
		</div>

		<div class="admin_table_content" ref="historyTable">
			<a-table
				:columns="columns"
				:data-source="collectionList"
				:scroll="{ y: historyTableHeight }"
				@change="changePage"
				
			>
				<template
					#bodyCell="{ column, text, record, index }"
				>
					<div
						class="operate_list"
						v-if="column?.Operations && record.status == 'Pending'"
					>
						<div v-show="status == 0" class="operate_item" @click="setAgree(record, true)">
							agree
						</div>
						<div v-show="status == 0" class="operate_item" @click="setAgree(record, false)" >
							refuse
						</div>
					</div>
					<div v-else-if="column?.Operations">
						{{ record.status }}
					</div>
					<div v-else-if="column?.openType" @click="openDetail(record,column?.openType)">
						{{ text }} HDK
					</div>
				</template>
			</a-table>
		</div>
		<itemAffiliateDetail ref="itemAffiliateDetail"></itemAffiliateDetail>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed } from "vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import itemAffiliateDetail from "./itemAffiliateDetail.vue";
export default defineComponent({
    components: {
		itemAffiliateDetail,
    },
    setup() {
        let renameData: any = ref({}); //修改名字选中的数据
        const columns: any = computed(() => {
            return [
                {
                    title: 'Id',
                    align: "center",
                    width: 50,
                    dataIndex: "id",
                    key: "id",
					sorter: true,
                    fixed: "left",
                },
				{
                    title: 'User Name',
                    align: "center",
                    width: 100,
                    dataIndex: "username",
                    key: "username",
                },
                {
                    title: 'Create Time',
                    align: "center",
                    width: 200,
                    dataIndex: "createTime",
                    key: "createTime",
					sorter: true,
                },{
                    title: 'State',
                    align: "center",
                    ellipsis: true,
                    width: 100,
                    dataIndex: "status",
                    key: "status",
					  
                },{
                    title: 'Total income',
                    align: "center",
                    ellipsis: true,
                    width: 100,
                    dataIndex: "totalEarnings",
                    key: "totalEarnings",
					openType:'month',
					sorter: true,
                },{
                    title: 'Monthly income',
                    align: "center",
                    ellipsis: true,
                    width: 100,
                    dataIndex: "monthlyEarnings",
                    key: "monthlyEarnings",
					openType:'all',
                },{
                    title: 'Unpaid amount',
                    align: "center",
                    ellipsis: true,
                    width: 100,
                    dataIndex: "unpaidEarnings",
                    key: "unpaidEarnings",
                },{
                    title: 'Invitation Link',
                    align: "center",
                    ellipsis: true,
                    width: 250,
                    dataIndex: "link",
                    key: "link",
                },{
                    title: 'Updata Time',
                    align: "center",
                    width: 200,
                    dataIndex: "updateTime",
                    key: "updateTime",
                 
                },
                {
                    title: 'Operations',
                    key: "operation",
                    align: "center",
                    fixed: "right",
                    width: 130,
                    // slots:{customRender:'action'}
                    Operations: true,
					
                },
            ];
        });
		let currentState = ref({
				label:'All',
				value:'',
				state:false,
			},)
		let state:any = ref([
			{
				label:'All',
				value:'',
			},
			{
				label:'Pending',
				value:'Pending',
			},
			{
				label:'Active',
				value:'Active',
			},
			{
				label:'Inactive',
				value:'Inactive',
			},
			{
				label:'Refused',
				value:'Refused',
			},
		])
		const itemAffiliateDetail = ref()
        let collectionList: any = ref([]);
        let status: any = ref(0);
		const openDetail = (value:any,openType:string)=>{
			let data = {
				id:value.id,
				type:openType
			}
			itemAffiliateDetail.value.init(data)
		}
        return {
            columns,
            collectionList,
            renameData,
            status,
			currentState,
			itemAffiliateDetail,
			state,
			openDetail,
        };
    },
    data() {
        return {
			rangePickerValue:[],
            currentPage: 1,
            pageSize: 10,
            total: 0,
			order:'',
			orderBy:'',
			affiliateId:'',
            historyTableHeight: 0,
            newCollectionName: "",
            renameVisivle: false, //修改名字弹窗
            collectionName: "", //选中的名字
            searchCollectionName: "",
        };
    },
    mounted() {
        let historyTable: any = this.$refs.historyTable;
        this.historyTableHeight = historyTable.clientHeight - 200;
        this.gettrialList();
    },
    methods: {
        //改变页码
        changePage(e: any, filters:any, sorter:any) {
            this.currentPage = e.current;
            this.pageSize = e.pageSize;
			this.order = sorter.order == "descend" ? "DESC" : "ASC";
			console.log(sorter.columnKey)
			if(sorter.order){
				if(sorter.columnKey == 'id'){
					this.orderBy = 'id'
				}else if(sorter.columnKey == "createTime"){
					this.orderBy = 'createTime'
				}else if(sorter.columnKey == "totalEarnings"){
					this.orderBy = 'totalIncome'
				}
			}
            this.gettrialList();
        },
		//查询列表
		searchHistoryList() {
            this.currentPage = 1;
            this.gettrialList();
        },
		//获取列表
        gettrialList() {
			let startDate: any = this.rangePickerValue?.[0]
                ? this.rangePickerValue[0]+' '+'00:00:00'
                : "";
            let endDate: any = this.rangePickerValue?.[1]
                ? this.rangePickerValue[1]+' '+'23:59:59'
                : "";
            let data = {
                page: this.currentPage,
                size: this.pageSize,
                order: this.order,
				orderBy: this.orderBy,
                status: this.currentState.value,
                startTime:startDate,
                endTime:endDate,
				affiliateId:this.affiliateId
            };
            Https.axiosPost(Https.httpUrls.affiliateList, data).then(
                (rv: any) => {
                    this.collectionList = rv.content;
					this.total=rv.total
                }
            );
        },
		setAgree(record: any, boolean: boolean){
			// const formData = new FormData()
			// formData.append('id',record.id)
			// formData.append('isApproved	',boolean+'')
			let data = {
				id:record.id,
				isApproved: boolean,
			
			}
			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
			Https.axiosGet(Https.httpUrls.affiliateApproval, {params:data}).then(
				(rv: any) => {
					if(boolean){
						message.success('同意成功~')
					}else{
						message.success('拒绝成功~')
					}
					this.gettrialList();
				}
			);
		},
		setState(){
			this.currentState.state = true
		},
		setStateItem(item:any){
			this.currentState = item
			this.currentState.state = false
		},
    },
});
</script>
<style lang="less" scoped>
.admin_page .admin_table_content .operate_list{
	justify-content: space-between;
}
</style>