<template>
    <div class="trial_page">
        <div class="page_content">
            <img
                class="page_content_bg"
                src="@/assets/images/homePage/bg.png"
            />
            <div class="page_content_body">
                <HeaderComponent></HeaderComponent>
                <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="trial_state">
                            <div class="trial_current" @click="setState">
								{{currentState.name}}
								<div
                                    :class="['icon', 'iconfont', 'icon-xiala']"
                                    @click.stop=""
                                ></div>
							</div>
                            <div class="header_user_content" :class="{active:currentState.state}">
                                <!-- <span class="icon iconfont icon-yuyan"></span> -->
								<div class="username" v-for="item,index in state" :key="item" @click.stop="setStateItem(item)">{{ item.name }}</div>
                            </div>
                        </div>
                        <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
                                        class="operate_item"
                                        @click="setConsent(record, index)"
                                    >
										consent
                                    </div>
									<div
                                        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: 200,
                    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: '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: 150,
                    // slots:{customRender:'action'}
                    Operations: true,
                },
            ];
        });
		let currentState = ref({
				name:'all',
				value:'',
				state:false,
			},)
		let state:any = ref([
			{
				name:'all',
				value:'',
			},
			{
				name:'unprocessed',
				value:0,
			},
			{
				name:'pending',
				value:1,
			},
			{
				name:'rejected',
				value:2,
			},
		])
        let collectionList: any = ref([]);
        let userInfo: any = {};
        let status: any = ref(0);
        return {
            rangePickerValue,
            columns,
            collectionList,
            renameData,
            userInfo,
            status,
			currentState,
			state,
        };
    },
    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();
        this.userInfo = JSON.parse(getCookie("userInfo") as any);

        if (this.userInfo.userId == 83) {
        } else {
            router.replace("/home");
        }
    },
    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
                ? new Date(this.rangePickerValue[0]).getTime()
                : "";
            let endDate: any = this.rangePickerValue
                ? new Date(this.rangePickerValue[1]).getTime()
                : "";
            let data = {
                page: this.currentPage,
                size: this.pageSize,
                status: this.currentState.value,
                // startDate:startDate,
                // endDate:endDate
            };
            Https.axiosPost(Https.httpUrls.trialOrderList, data).then(
                (rv: any) => {
                    this.collectionList = rv.content;
                }
            );
        },
		setConsent(record: any, index: number){

		},
		setRefuse(record: any, index: number){

		},
        //删除分组
        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: "11",
                icon: createVNode(ExclamationCircleOutlined),
                okText: "Yes",
                cancelText: "No",
                centered: true,
                mask: false,
                onOk() {
                    deleteGroupFun(record.id, index);
                },
            });
        },
		setState(){
			this.currentState.state = true
		},
		setStateItem(item:any){
			this.currentState = item
			this.currentState.state = false
		},
    },
});
</script>
<style lang="less">
.trial_page {
    width: 100%;
    height: 100%;
    padding: 0 9rem;
    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;
                    .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_state {
						border: 0.1rem solid #f1f1f1;
                        position: relative;
						width: 20rem;
						margin: 0 2rem;
						padding: 0 2rem;
						cursor: pointer;
						.trial_current{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
                        .header_user_content {
                            position: absolute;
                            border: 2px solid;
                            border-radius: 1rem;
							overflow: hidden;
							top: 0;
							transform: translateY(6rem);
							z-index: 2;
							display: none;
							.username{
								padding: 0 2rem;
								background: #fff;
							}
							.username:hover{
								background: #e1e1e1;
							}
							&.active{
								display: block;
							}
                        }
                    }
                }

                .trial_table_content {
                    margin-top: 2.6rem;
                    width: 100%;
                    height: calc(100% - 13.7rem);
                    background: rgba(255, 255, 255, 0.6);
                    padding-bottom: 3rem;

                    .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: #ffffff;
                    }

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

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

                    .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>