<template>
    <div class="trial_page">
        <div class="page_content">
            <img
                class="page_content_bg"
                src="@/assets/images/homePage/bg1.jpg"
            />
            <div class="page_content_body">
                <div class="trial_page_body">
                    <div class="trial_table_search">
                        <a-range-picker
                            class="range_picker"
                            v-model:value="rangePickerValue"
                            :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="content_search_block">
                            <input
                                class="search_input"
                                :placeholder="$t('HistoryPage.inputContent1')"
                                v-model="searchCollectionName"
                                @keydown.enter="searchHistoryList()"
                            />
                            <div
                                class="search_icon_block"
                                @click="searchHistoryList()"
                            >
                                <span class="icon iconfont icon-sousuo"></span>
                            </div>
                        </div>
                    </div>

                    <div class="trial_table_content" ref="historyTable">
                        <a-table
                            :columns="columns"
                            :data-source="collectionList"
                            :scroll="{ y: historyTableHeight }"
                            @change="changePage"
                            :pagination="{
                                showSizeChanger: true,
                                current: currentPage,
                                pageSize: pageSize,
                                total: total,
                                showQuickJumper: true,
                                bordered: false,
                            }"
                        >
                            <template
                                #bodyCell="{ column, text, record, index }"
                            >
                                <div
                                    class="operate_list"
                                    v-if="column?.Operations"
                                >
                                    <div
										v-show="status == 0"
                                        class="operate_item"
                                        @click="setConsent(record, index)"
                                    >
										consent
                                    </div>
									<div
										v-show="status == 0"
                                        class="operate_item"
                                        @click="setRefuse(record, index)"
                                    >
										refuse
                                    </div>
                                    <!-- <div
                                        class="operate_item"
                                        @click="deleteGroup(record, index)"
                                    >
										Delete
                                    </div> -->
									
                                </div>
                            </template>
                        </a-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed } from "vue";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import HeaderComponent from "@/component/HomePage/Header.vue";
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
import router from "@/router/index";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { Modal, message } from "ant-design-vue";
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
    components: {
        HeaderComponent,
        HistoryDetail,
        RobotAssist,
    },
    setup() {
        let rangePickerValue: any = ref([]);
        let renameData: any = ref({}); //修改名字选中的数据
        const columns: any = computed(() => {
            return [
                {
                    title: 'Email',
                    align: "center",
                    ellipsis: true,
                    width: 170,
                    dataIndex: "email",
                    key: "email",
                },
                {
                    title: 'Create Time',
                    align: "center",
                    ellipsis: 200,
                    dataIndex: "updateTime",
                    key: "updateTime",
                    // customRender: (record: any) => {
                    //     let time = formatTime(
                    //         record.text / 1000,
                    //         "YYYY-MM-DD hh:mm:ss"
                    //     );
                    //     return time;
                    // },
                },
				{
                    title: 'State',
                    align: "center",
                    ellipsis: true,
                    width: 150,
                    dataIndex: "status",
                    key: "status",
					   customRender: (record: any) => {
                        let str
						if(record.value == 0){
							str ='pending'
						}else if(record.value == 1){
							str ='consent'
						}else if(record.value == 2){
							str ='reject'
						}
                        return str;
                    },
                },
                {
                    title: 'Address',
                    align: "center",
                    ellipsis: true,
                    width: 150,
                    dataIndex: "country",
                    key: "country",
                },
				{
                    title: 'Surname',
                    align: "center",
                    ellipsis: true,
                    width: 150,
                    dataIndex: "surname",
                    key: "surname",
                },
				{
                    title: 'Name',
                    align: "center",
                    ellipsis: true,
                    width: 150,
                    dataIndex: "userName",
                    key: "userName",
                },
                {
                    title: 'Operations',
                    key: "operation",
                    align: "center",
                    fixed: "right",
                    width: 200,
                    // slots:{customRender:'action'}
                    Operations: true,
                },
            ];
        });

		let state:any = ref([
			{
				name:'all',
				value:'',
			},
			{
				name:'unprocessed',
				value:0,
			},
			{
				name:'pending',
				value:1,
			},
			{
				name:'rejected',
				value:2,
			},
		])
        let collectionList: any = ref([]);
        let status: any = ref(0);
        let voluntarily: any = ref(false);
        return {
            rangePickerValue,
            columns,
            collectionList,
            renameData,
            status,
			state,
			voluntarily,
        };
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            historyTableHeight: 0,
            newCollectionName: "",
            renameVisivle: false, //修改名字弹窗
            collectionName: "", //选中的名字
            searchCollectionName: "",
        };
    },
    mounted() {
        let historyTable: any = this.$refs.historyTable;
        this.historyTableHeight = historyTable.clientHeight - 130;
        this.gettrialList();
    },
    methods: {
        //改变页码
        changePage(e: any) {
            this.currentPage = e.current;
            this.pageSize = e.pageSize;
            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]+' '+'00:00:00'
                : "";
			let data = {
				endTime:startDate,
				startTime:endDate,
			}
			console.log(data);
			
			console.log(this.rangePickerValue,startDate,endDate);
			Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
				if (rv) {
					console.log(rv);
					
					// this.workspaceItem.position = this.singleTypeList[0].label
				}
			})
        },
		setConsent(record: any, index: number){
			const formData = new FormData()
			formData.append('ids',record.id)
			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
			Https.axiosPost(Https.httpUrls.trialOrderApproval, {ids:record.id}).then(
				(rv: any) => {
					message.success('同意成功~')
				}
			);
		},
		setRefuse(record: any, index: number){
			const formData = new FormData()
			formData.append('ids',record.id)
			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
			Https.axiosPost(Https.httpUrls.trialOrderRefuse, formData,config).then(
				(rv: any) => {
					this.gettrialList();
					message.success('拒绝成功~')
				}
			);
		},
        //删除分组
        // deleteGroup(record: any, index: number) {
        //     let deleteGroupFun = (id: any, index: number) => {
        //         let data = {
        //             userGroupId: id,
        //         };
        //         Https.axiosPost(Https.httpUrls.deleteUserGroup, data).then(
        //             (rv: any) => {
        //                 this.collectionList.splice(index, 1);
        //             }
        //         );
        //     };
        //     Modal.confirm({
        //         title: "",
        //         icon: createVNode(ExclamationCircleOutlined),
        //         okText: "Yes",
        //         cancelText: "No",
        //         centered: true,
        //         mask: false,
        //         onOk() {
        //             deleteGroupFun(record.id, index);
        //         },
        //     });
        // },
		
		
    },
});
</script>
<style lang="less">
.trial_page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // min-width: 1440px;
    position: relative;
    .page_content {
        position: relative;
        .page_content_bg {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .page_content_body {
            position: absolute;
            width: 100%;
            height: 100%;
            box-sizing: border-box;

            .trial_page_body {
                width: 100%;
                height: calc(100% - 7rem);
                padding: 0 2.5rem 4rem;
                box-sizing: border-box;
                .trial_table_search {
                    display: flex;
                    align-items: center;
                    margin-top: 5rem;
					color: #fff;
                    .range_picker {
                        width: 36rem;
                        height: 4.8rem;

                        .ant-picker-input > input {
                            font-size: 1.6rem;
                        }

                        .range_picker_icon {
                            font-size: 2.2rem;
                        }
                    }
                    .content_search_block {
                        margin-left: 4rem;
                        display: flex;

                        .search_input {
                            width: 32.8rem;
                            padding-left: 1.5rem;
                            height: 4.8rem;
                            line-height: 4.6rem;
                            background: #ffffff;
                            border: 0.1rem solid #f1f1f1;
                            font-size: 1.6rem;
                            font-weight: 400;
                            &::placeholder {
                                color: #c2c2c2;
                            }
                        }

                        .search_icon_block {
                            width: 7.2rem;
                            height: 4.8rem;
                            line-height: 4.8rem;
                            text-align: center;
                            background: #343579;
                            cursor: pointer;

                            .icon-sousuo {
                                font-size: 2rem;
                                color: #ffffff;
                            }
                        }
                    }
                }

                .trial_table_content {
                    margin-top: 2.6rem;
                    width: 100%;
                    height: calc(100% - 13.7rem);
                    background: rgba(255, 255, 255, 0.3);
                    padding-bottom: 3rem;
					border-radius: 2rem;
					backdrop-filter: blur(3rem);
					overflow: hidden;
					box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.38);
                    .ant-table {
                        background: transparent;
                    }

                    .ant-table-body {
                        overflow-y: auto !important;
                        -ms-overflow-style: none;
                        overflow: -moz-scrollbars-none;

                        &::-webkit-scrollbar {
                            width: 0 !important;
                        }
                    }
                    .ant-table-thead > tr > th {
                        background: #ffffff00;
						color: #fff;
						border-bottom: none;
						backdrop-filter: blur(1rem);
                    }

                    .ant-table-tbody > tr > td {
                        border: none;
                        background: transparent;
						// color: #fff;
                    }

                    .ant-table-tbody > tr {
                        &:hover > td {
                            background: #ffffff3a;
                        }
                    }

                    .ant-table-pagination-right {
                        padding-right: 3.5rem;
                    }

                    .operate_list {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 1rem;

                        .operate_item {
                            font-size: 1.4rem;
                            font-family: Roboto;
                            font-weight: 400;
                            color: #343579;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>