<template>
    <a-modal
        class="modal_component payOrder_modal"
        v-model:visible="showPayOrder"
        :footer="null"
        width="78%"
        :maskClosable="false"
        :centered="true"
        :closable="false"
        wrapClassName="#app"
        :keyboard="false"
    >
        <div class="closeIcon">
            <!-- <div class="header_right_block" @click.stop="">
			<div class="header_cancel_button" >Cancel</div>
		</div> -->
            <i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
        </div>
        <div class="history_page">
            <div class="page_content">
                <div class="page_content_body">
                    <div class="history_page_body">
                        <div class="history_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="history_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="refund(record)"
                                        >
                                            refund
                                        </div>
                                        <!-- <div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div> -->
                                    </div>
                                </template>
                            </a-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<a-modal
			class="modal_component refund_reason"
			v-model:visible="showRefundReason"
			:footer="null"
			width="30%"
			:maskClosable="false"
			:centered="true"
			:closable="false"
			wrapClassName="#app"
			:keyboard="false"
		>
			<div class="closeIcon">
				<!-- <div class="header_right_block" @click.stop="">
				<div class="header_cancel_button" >Cancel</div>
			</div> -->
				<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
			</div>
		</a-modal>
    </a-modal>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
import HeaderComponent from "@/component/HomePage/Header.vue";
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
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: "Serial",
                    align: "center",
                    ellipsis: true,
                    width: 90,
                    dataIndex: "orderNo",
                    key: " ",
                },
                {
                    title: "Title",
                    align: "center",
                    ellipsis: true,
                    width: 90,
                    dataIndex: "title",
                    key: "sketchCounts",
                },
                // { title: useI18n().t('HistoryPage.UptateTime'), align:'center', ellipsis: true,width: 90, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
                // 	// let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
                // 	return record.record.updateTime
                // }},
                {
                    title: "Money",
                    align: "center",
                    ellipsis: true,
                    width: 90,
                    dataIndex: "totalFee",
                    key: "sketchCounts",
                },
                {
                    title: "Payment",
                    align: "center",
                    ellipsis: true,
                    width: 90,
                    dataIndex: "paymentType",
                    key: "sketchCounts",
                },
                {
                    title: "State",
                    align: "center",
                    ellipsis: true,
                    width: 90,
                    dataIndex: "orderStatus",
                    key: "sketchCounts",
                },

                {
                    title: useI18n().t("HistoryPage.Operations"),
                    key: "operation",
                    align: "center",
                    fixed: "right",
                    width: 90,
                    // slots:{customRender:'action'}
                    Operations: true,
                },
            ];
        });
        let showPayOrder: any = ref(false);
        let showRefundReason: any = ref(false);
        let collectionList: any = ref([]);
        let { t } = useI18n();
        return {
            rangePickerValue,
            columns,
            collectionList,
            showPayOrder,
			showRefundReason,
            renameData,
            t,
        };
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            historyTableHeight: 0,
            newCollectionName: "",
            groupDetails: {}, //每个collection的详情
            collectionName: "", //选中的名字
            searchCollectionName: "",
        };
    },
    mounted() {},
    methods: {
        init() {
            console.log(123123);
            this.showPayOrder = true;
            this.getHistoryList();
            nextTick().then(() => {
                let history_table_content = document.getElementsByClassName(
                    "history_table_content"
                )[0];
                console.log(history_table_content);
                this.historyTableHeight =
                    history_table_content.scrollHeight - 130;
            });
        },
        cancelDsign() {//关闭订单页面
            this.showPayOrder = false;
        },
		cancelRefundreason(){//关闭退款页面
            this.showRefundReason = false;
		},
        //改变页码
        changePage(e: any) {
            this.currentPage = e.current;
            this.pageSize = e.pageSize;
            this.getHistoryList();
        },

        //查询列表
        searchHistoryList() {
            this.currentPage = 1;
            this.getHistoryList();
        },

        getHistoryList() {
            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,
                collectionName: this.searchCollectionName,
                startDate: startDate,
                endDate: endDate,
            };

            Https.axiosGet(Https.httpUrls.orderInfoList).then((rv: any) => {
                console.log(rv);
                this.total = rv.length;
                console.log(this.total);
                this.collectionList = rv.slice(
                    (this.currentPage - 1) * this.pageSize,
                    (this.currentPage - 1) * this.pageSize + this.pageSize
                );
            });
            // Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
            //     (rv: any) => {
            //         this.collectionList = rv.content
            //         this.total = rv.total
            //     }
            // );
        },

        //删除分组
        // deleteGroup(record:any,index:number){
        //     let deleteGroupFun = (id:any,index:number) =>{
        //         let data = {
        //             userGroupId:id
        //         }
        //         Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
        //             (rv: any) => {
        //                 message.success(this.t('HistoryPage.jsContent1'))
        //                 this.collectionList.splice(index,1)
        //             }
        //         );
        //     }
        //     Modal.confirm({
        //         title: this.t('HistoryPage.jsContent2'),
        //         icon: createVNode(ExclamationCircleOutlined),
        //         okText: 'Yes',
        //         cancelText: 'No',
        //         centered:true,
        // 		mask:false,
        //         onOk() {
        //             deleteGroupFun(record.id,index)
        //         }
        //     });
        // },

        refund(record: any) {
            // this.$router.push({name:'home',params: {id:record.id}})
            console.log(record);
			this.showRefundReason = true
            Https.axiosPost(
                Https.httpUrls.tradeRefund + `/${record.orderNo}/${"123"}`,
                {}
            ).then((rv: any) => {
				console.log(rv);
				this.getHistoryList()
			})
			.catch((res) => {});
        },
    },
});
</script>
<style lang="less">
.payOrder_modal ,.refund_reason{
    // max-width: 1200px ;
    // max-width: 1150px ;
    .ant-modal-content {
        border-radius: calc(1rem * 1.2);
        overflow: hidden;
        .ant-modal-header {
            background-color: #fff;
            border-bottom: none;
        }
        .ant-modal-body {
            // height: calc(65vh - 6.4rem);
            height: calc(65rem * 1.2);
        }
        //进度完成字体颜色

        .ant-progress-circle.ant-progress-status-success .ant-progress-text {
            color: #000;
        }
        .ant-progress-circle .ant-progress-text {
            color: rgba(0, 0, 0, 0.55);
            font-size: calc(1.6rem * 1.2);
        }
    }
}
.refund_reason{
    .ant-modal-content {
		.ant-modal-body {
			// height: calc(65vh - 6.4rem);
			height: calc(30rem * 1.2);
		}
	}
	
}
</style>
<style lang="less">
.payOrder_modal {
    .closeIcon {
        z-index: 2;
    }
    .history_page {
        width: 100%;
        height: 100%;
        padding: 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;

                .history_page_body {
                    width: 100%;
                    // height: calc(100% - 7rem);
                    height: 100%;
                    box-sizing: border-box;

                    .history_header {
                        font-size: 1.8rem;
                        height: 6.3rem;
                        line-height: 6.3rem;
                        font-weight: 500;
                        color: #333333;
                    }

                    .history_table_search {
                        display: flex;
                        align-items: center;

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

                    .history_table_content {
                        margin-top: 2.6rem;
                        width: 100%;
                        // height: calc(100% - 13.7rem);
                        height: 100%;
                        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>