<template>
    <div class="more">
		<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
		<div class="more_box" v-show="show">
			<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
				<i class="fi fi-rr-edit"></i>
				<div class="text">{{ $t('more.edit') }}</div>
			</div>
			<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
				<i class="fi fi-bs-expand-arrows-alt"></i>
				<div class="text">{{ $t('more.enlargement') }}</div>
			</div>
			<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
				<i class="fi fi-br-download"></i>
				<div class="text">{{ $t('more.down') }}</div>
			</div>
			<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
				<span class="icon iconfont icon-shanchu operate_icon"></span>
				<div class="text">{{ $t('more.delete') }}</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 { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { downloadIamge } from "@/tool/util";

export default defineComponent({
    components:{
    },
	props:{
		moreList:{type:Array,default:()=>[]},
		item:{type:Object,default:()=>{}},
		index:{type:Number,default:0},
	},
	emits:['deleteFile','scaleImage'],
    setup(props,{emit}) {
        const store = useStore();
		const data = reactive({
			show:false
		})
		
		const dataDom = reactive({
		})
		const openList = ()=>{
			data.show = true
			document.addEventListener('click',setShow)
		}
		const setShow = ()=>{
			data.show = false
			document.removeEventListener('click',setShow)
		}
		const setMore = (str:any)=>{
			if(str == 'delete'){
				emit("deleteFile",props.item);
			}else if(str == 'edit'){
				emit("scaleImage",props.index);
			}else if(str == 'down'){
				console.log(props.item);
				downloadIamge(props.item.url)
			}else if(str == 'enlargement'){
				emit("scaleImage",props.index);
			}
			setShow()
		}
        return{
			...toRefs(dataDom),
			...toRefs(data),
			openList,
			setMore,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .more{
		position: relative;
		width: 100%;
		height: 100%;
		> .fi{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0,0,0,.7);
			color: #fff;
			border-radius: .6rem;
		}
		> .more_box{
			position: absolute;
			background: rgba(0,0,0,.7);
			right: 0;
			margin-top: .5rem;
			color: #fff;
			border-radius: .6rem;
			padding: 1rem 0;
			font-size: 1.4rem;
			// width: 12rem;
			text-align: left;
			> .item{
				display: flex;
				align-items: center;
				padding: 1rem 1.3rem;
				> i,> span{
					margin-right: 1rem;
				}
				> .text{
					white-space: nowrap;
				}
				&:hover{
					background: rgba(0,0,0,.3);
				}
			}
		}
	}
</style>