<template>
    <div class="editPrintElement">
		<div class="printOverallBtn">
			<div class="overallSlogin">
				<div
					class="habit_Overal_Single_text"
					:class="{ active: !overallSingle }"
				>
					{{ $t('DesignPrintOperation.Overall') }}
				</div>
				<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
				<div
					class="habit_Overal_Single_text"
					:class="{ active: overallSingle }"
				>
					{{ $t('DesignPrintOperation.Single') }}
				</div>
			</div>
			<div v-show="!overallSingle" class="habit_System_Designer">
				<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
				<a-slider id="system_silder"
					class="system_silder"
					:min="20"
					:max="1000"
					v-model:value="systemDesignerPercentage"
					:tip-formatter="formatter"
				>
				</a-slider>
			</div>
		</div>
		<div></div>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
export default defineComponent({
    components:{
    },
	props: {
		type: {
		    type: String,
			default: 'print',
		}
	},
    setup(props,{emit}) {
        const store = useStore();
		const editPrintElementDom = reactive({

		})
		const editPrintElementData = reactive({
			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
			overallSingle:false,
			systemDesignerPercentage:0,
		})
		const setOveralSingle = ()=>{}
		const formatter = (value:any)=>{
			return `${value}%`;
		}
        return{
			...toRefs(editPrintElementDom),
			...toRefs(editPrintElementData),
			setOveralSingle,
			formatter,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .editPrintElement{
		height: 100%;
		width: 100%;
		display: flex;
		flex: 1;
		overflow: hidden;
		flex-direction: column;
		> .printOverallBtn{
			display: flex;
			> .overallSlogin{
				display: flex;
			}
			.habit_Overal_Single_text {
					font-weight: 600;
					color: rgba(0, 0, 0, 0.5);
					&.active {
						color: rgba(0, 0, 0, 0.7);
						// font-weight: 900;
						// transform: scale(1.2);
					}
				}
			.habit_System_Designer {
				transform: scale(.8);
				width: 100%;
				.ant-slider-track,
				.ant-slider-rail {
					background-color: #e1e1e1;
					border-radius: calc(0.5rem*1.2);
				}
				.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
				.ant-slider-handle {
					background-color: #2d2e76 !important;
					border: none !important;
				}
				.ant-slider-handle:hover{
					box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
				}
				.habit_System_Designer_text{
					font-size: calc(1.6rem*1.2);
					color: rgba(0, 0, 0, 0.7);
					font-weight: 600;
				}
			}
		}
		
	}
</style>