<template>
	<div class="projectSettingModal" ref="projectSettingModal"></div>
	<a-modal
		class="projectSetting generalModel"
		v-model:visible="habitSetStyle"
		:footer="null"
		width="50%"
		height="auto"
		:get-container="() => $refs.projectSettingModal"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="true"
		:keyboard="false"
		:destroyOnClose="true"
		:zIndex="1000"
	>
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cleardata()">
				<svg width="100%" height="100%" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
				</svg>
			</div>
		</div>
		<div class="designOpenrtion_content">
			<div class="modal_title_text">
				<div>{{ $t('newProjectg.projectSetting') }}</div>
			</div>
			<div class="workspaceBox">
				<workspace ref="workspace" :status="'edit'" @setProject="setProject" :sourceType="sourceType" :httpWorkflowType="projectData.process"></workspace>
			</div>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
	</a-modal>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import workspace from './workspace.vue'
export default defineComponent({
	components:{
		workspace,
	},
	props:{
	},
	emits:['getHistory'],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			habitSetStyle:false,
			isShowMark:false,
			sourceType:'',
			projectData:{} as any,
		})
		const dataDom = reactive({
			workspace:null as any,
		})
		const setIsShowMark = (boolean:boolean)=>{
			data.isShowMark = boolean
		}
		const init = (value:any,type:string = 'create')=>{
			data.projectData = value
			data.habitSetStyle = true
			data.sourceType = type
			getHistory(value.id)
		}
		provide('setIsShowMark',setIsShowMark)

		let cleardata = ()=>{
			data.habitSetStyle = false
		}
		const getHistory = (id:any)=>{
			let value = {
				id,
			}
			if(!id)return
			Https.axiosPost(Https.httpUrls.selectHistoryProject,value).then((rv: any) => {
				setProjectData(rv)
			}).catch((res)=>{
				data.isShowMark = false
			})
		}
		const setProjectData = (rv:any)=>{
			let storeData = {
				name:rv.name,
				id:rv.id,
				type:rv.process == 'SERIES_DESIGN'?'seriesDesign':'singleProductDesign',
				httpType:rv.process,//项目类型
				ageGroup:rv.workspaceVO.ageGroup,
				style:rv.workspaceVO.style,
				styleId:rv.workspaceVO.styleId,
				styleName:rv.workspaceVO.styleName,
				sex:rv.workspaceVO.sex,
				userBrandDnaImg:rv.workspaceVO.userBrandDnaImg,
				userBrandDnaName:rv.workspaceVO.userBrandDnaName,
				brandPercentage:rv.workspaceVO.brandPercentage,
				userBrandDna:rv.workspaceVO.userBrandDna,
				systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
				position:{
					label:rv.workspaceVO.positionEnum.value,
					value:rv.workspaceVO.positionEnum.name
				},
				positionList:[],
				workspaceId:rv.workspaceVO?.id,
				publishData:{
					id:rv.portfolioDTO.id?rv.portfolioDTO.id:'',
					portfolioDes:rv.portfolioDTO.portfolioDes?rv.portfolioDTO.portfolioDes:'',
					portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
					tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
				},
				// model:[]
			}
			let position = []
			if(storeData.sex == "Female"){
				position = store.state.UserHabit.FemalePosition
			}else{
				position = store.state.UserHabit.MalePosition
			}
			// storeData.model = model
			storeData.positionList = position
			dataDom.workspace.init(storeData)
		}
		const setProject = ()=>{
			emit('getHistory',{ data: data.projectData })
			cleardata()
		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			cleardata,
			init,
			setProject,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.projectSettingModal{
		:deep(.designOpenrtion_content){
			display: flex;
			flex-direction: column;
		}
	}
</style>