<template>
     <div class="history_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="history_page_body">
                    <div class="history_header">{{ $t('HistoryPage.History') }}</div>
                    <div class="history_table_search">
                       
                        <!-- <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 class="content_search_block">
							<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>
							<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchCollectionName"  @keydown.enter="searchHistoryList()">
							<div class="search_cascader">
								<el-cascader 
									:options="options" 
									filterable
									v-model="value.labelValue"
									:collapse-tags="true" 
									:show-all-levels="false" 
									:clearable="true"
									:placeholder="$t('LibraryPage.Select')"
									:max-collapse-tags=3
									:props="props" 
									:collapse-tags-tooltip="true"
									ref="cascader"
									popper-class="libraryPageCascader"
									@visible-change="dropdownVisibleChange"
								>
									<template #empty>
										<div>
											{{$t('LibraryPage.Select')}}
										</div>
									</template>
								</el-cascader>
							</div>
							<div class="intersection">
								<div :title="$t('LibraryPage.unionSet')" @click="()=>intersection = 1" v-show="intersection == 0" :class="['icon', 'iconfont','icon-bingji',]"></div>
								<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
							</div>
							<!-- <div class="search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div> -->
							<div class="generage_btn 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="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
									<div class="operate_item" @click="renameCollection(record,index)">{{ $t('LibraryPage.Rename') }}</div>
									<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
									<!-- <div class="operate_item" @click="setPublish(record)">Publish</div>
									<div class="operate_item" @click="updatePublish(record)">Update Publish</div> -->
									<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
								</div>
							</template>
                        </a-table>
                    </div>
                </div>
            </div>
        </div>
        <HistoryDetail ref="historyDetail" :groupDetails="groupDetails" :collectionName="collectionName"></HistoryDetail>
		<publish ref="publish"></publish>
		<setLabel ref="setLabel"></setLabel>
		<!-- <RobotAssist></RobotAssist> -->
		<searchLabel ref="searchLabel"></searchLabel>
		<div class="mark_loading" v-show="isShowMark">
            <a-spin size="large" />
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode,computed,nextTick,provide} 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 { ElCascader } from 'element-plus'
import { useI18n } from 'vue-i18n';
import setLabel from '@/component/LibraryPage/setLabel.vue';
import searchLabel from '@/component/LibraryPage/searchLabel.vue';
import publish from "@/component/WorksPage/publish.vue";

export default defineComponent({
    components: {
        // HeaderComponent,
        HistoryDetail,
		// RobotAssist,
		setLabel,
		ElCascader,
		searchLabel,
		publish
    },
    setup() {
        let rangePickerValue:any = ref([])
        let renameData:any = ref({}) //修改名字选中的数据
		let isShowMark:any = ref(false)
        const columns:any = computed(()=>{
			return [
				{ title: useI18n().t('HistoryPage.CollectionsName'), align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
				{ title: useI18n().t('HistoryPage.UptateTime'), align:'center', ellipsis: true,width: 150, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
					let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
					return time
				}},
				{ title: useI18n().t('HistoryPage.SketchCounts'), align:'center', ellipsis: true, width: 80, dataIndex: 'sketchCount', key: 'sketchCounts' },
				{
					title: useI18n().t('HistoryPage.Operations'),
					key: 'operation',
					align:'center', 
					fixed: 'right',
					width: 180, 
					// slots:{customRender:'action'}
					Operations:true,
				},
			]
		});
        let collectionList:any = ref([])
		let {t} = useI18n()
		const options:any = ref([
		]);
		let value = ref({
			labelValue:[],
			editLabelValue:[],
		})
		let props = {
			multiple: true,
			checkStrictly: true,
			emitPath:true,
			children:'childList',
			value:'id',
			label:'classificationName',
		}
		let intersection = ref(1)
		let selectCode = ref('History')
		let type:any = {
			selectCode:selectCode,
			designType:''
		}
		provide('type',type)
        return {
            rangePickerValue,
            columns,
            collectionList,
            renameData,
			t,
			options,
			value,
			props,
			intersection,
			selectCode,
			isShowMark,
        }
    },
    data(){
        return{
            currentPage:1,
            pageSize:10,
            total:0,
            historyTableHeight:0,
            newCollectionName:'',
            groupDetails:{},//每个collection的详情
            collectionName:'',//选中的名字
            searchCollectionName:'',
        }
    },
    mounted(){
        let historyTable:any = this.$refs.historyTable
        this.historyTableHeight = historyTable.clientHeight - 130
        this.getHistoryList()
		this.getClass()
    },
    methods:{
		getClass(){
			let data = {
				"classificationIdList": [],
				"classificationName": "",
				"createTime": "",
				"deleteConfirm": '',
				"id": '',
				"libraryId": '',
				"parentId": '',
				"type": this.selectCode,
				"updateTime": "",
				"userId": ''
			}
			
			Https.axiosPost(Https.httpUrls.queryClassification, data).then(
                (rv: any) => {
					this.options = rv
					rv.forEach((rvItem:any,rvIndex:number) => {
						this.options[rvIndex].value = rvItem.id
						this.options[rvIndex].label = rvItem.classificationName
						rvItem.childList.forEach((childItem:any,index:number) => {
							this.options[rvIndex].childList[index].value = childItem.id
							this.options[rvIndex].childList[index].label = childItem.classificationName
						});
					});
                }
            ).catch((res)=>{
            });
		},
        turnToDetail(record:any){
            this.groupDetails = record.groupDetails
            let historyDetail:any = this.$refs.historyDetail
            this.collectionName = record.name
            historyDetail.changeDetailShow()
        },


        //改变页码
        changePage(e:any){
            this.currentPage = e.current
            this.pageSize = e.pageSize
            this.getHistoryList()
        },

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

        getHistoryList(){
			this.isShowMark = true
            let startDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[0]).getTime(): ''
            let endDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[1]).getTime(): ''
           
			let labelArr:any = []
			this.value.labelValue.forEach((item:any)=>{
				labelArr.push(item[item.length-1])
			})
			let data = {
				classificationIdList:labelArr,
                page:this.currentPage,
                size:this.pageSize,
                collectionName:this.searchCollectionName,
                startDate:startDate,
                endDate:endDate,
				intersection:this.intersection,
            }
			// console.log(this.value.labelValue);
			
			// let data = {
			// 	classificationIdList:labelArr,
            //     level1Type:this.selectCode,
            //     level2Type:'',
            //     page:1,
			// 	modelSex:'',
            //     pictureName:this.searchCollectionName,
            //     size:this.pageSize,
			// 	intersection:this.intersection,
            // }
            Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
            // Https.axiosPost( Https.httpUrls.queryLibraryPage, data).then(
                (rv: any) => {
					if(this.currentPage > 1 && rv.content.length == 0){
						this.currentPage = 1
						this.getHistoryList()
					}else{
						this.collectionList = rv.content
						this.total = rv.total
					}
					this.isShowMark = false
                }
            ).catch(res=>{
				this.isShowMark = false
			});
        },

        //删除分组
        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)
                }
            });
        },

        //修改名字
        renameCollection(record:any,index:number){
			let searchLabel:any = this.$refs.searchLabel
			searchLabel.init(record,index)
        },

        retrieveHome(record:any){
            this.$router.push({name:'homePage',params: {id:record.id}})
        },

		setPublish(record:any){
			let publish:any = this.$refs.publish
			publish.publishMask = true
			publish.init(record)
		},
		updatePublish(record:any){

		},
		removeLabel(){
			let setLabel:any = this.$refs.setLabel
			let cascader:any = this.$refs.cascader
			cascader.togglePopperVisible()
			let event = new Event('click', {"bubbles":true, "cancelable":true});
			document.dispatchEvent(event);
			setLabel.init('add',this.options)
		},
		dropdownVisibleChange(){
			let element:any = this.$refs.cascader
			nextTick().then(()=>{
				let cascader = document.getElementsByClassName('libraryPageCascader')[0]
				let cascaderChild = cascader
				let element:any = this.$refs.cascader
				if(cascader.children.length > 3 ){
				}else{
					let button1:any = document.createElement("span")
					button1.classList.add('started_btn','cascader_btn1')
					let button2:any = document.createElement("span")
					button2.classList.add('started_btn','cascader_btn2')
					let divMax:any = document.createElement("div")
					divMax.classList.add('cascader_btn_max')
					button1.textContent = 'Edit'
					// button2.textContent = '删除'
					button1.addEventListener('click',this.removeLabel,false)
					divMax.appendChild(button1)
					// divMax.appendChild(button2)
					cascaderChild?.insertAdjacentElement("afterbegin", divMax);
					
					// cascader.addEventListener('click',this.cascaderClick)
				}
			})
			let el = element.contentRef?.getElementsByClassName('el-cascader-menu__empty-text')?.[0]
			if(el){
				el.innerHTML = this.t('LibraryPage.NoLabel')
			}
		},
    }
})
</script>
<style lang="less">
.history_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;

            .history_page_body{
                width: 100%;
                height: 100%;
                padding: 0 2.5rem 4rem;
                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: 3rem;
						margin-right: 2rem;
						
                        .ant-picker-input > input{
                            font-size: 1.6rem;
                        }

                        .range_picker_icon{
                            font-size: 2.2rem;
                        }
                    }
					.ant-picker:hover, .ant-picker-focused{
						border-color: #d5d8df;
					}
					.content_search_block{
						display: flex;
						align-items: center;
						width: 140rem; 
						.search_input{
							height: 3rem;
							border-radius: 0.5rem;
							width: 20rem;
							border: 1px solid rgba(0, 0, 0, 0.15);
							padding-left: 1.5rem;
							border: 0.2rem solid #d5d8df;
							font-size: 1.2rem;
							font-weight: 400;
							margin-right: 2rem;
							&::placeholder {
								color: #C2C2C2;
							}
						}
						.search_cascader{
							// width: 53%;
							width: 38rem;
							display: flex;
							position: relative;
							
							
						}
						.search_icon_block{
							width: 5.2rem;
							height: 2.8rem;
							line-height: 2.8rem;
							text-align: center;
							background: #343579;
							background-color: #39215b;
							cursor: pointer;
							border-radius: 2rem;
							margin-left: 3rem;
							.icon-sousuo{
								font-size: 1.6rem;
								color: #FFFFFF;
							}
						}
						.intersection{
							margin-left: 3rem;
							cursor: pointer;
						}
						
					}
                }

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

    
}

.rename_modal_component{

    .collection_rename_content{
        padding:2rem 9.2rem 3rem;


        .rename_form_content{

            .rename_form_input{
                width: 100%;
                height: 4.6rem;
                margin-top: 1rem;
                border: 0.1rem solid #B4BED7;
                padding-left: 2.1rem;
                line-height: 4.6rem;
                font-size: 1.8rem;
                box-sizing: border-box;

                &::placeholder {
                    color:#A5B0C2,
                }
            }
        }

        .rename_submit_button{
            height: 4.8rem;
            line-height: 4.8rem;
            background: #343579;
            font-size: 2.4rem;
            font-weight: 500;
            color: #FFFFFF;
            width: 16rem;
            text-align: center;
            cursor: pointer;
            margin: 4.5rem auto 0;
        }
    }
}
</style>