<template>
  <div class="imgecell">
    <div class="mask"></div>
    <div class="tool">
      <eye-outlined style="color: #fff; font-size: 16px; cursor: pointer" @click="priviewImg" />
      <form-outlined style="color: #fff; font-size: 16px; margin-left: 10px; cursor: pointer" @click="showeditor"  v-privilege="'case-system:case:mainDiagnose'" v-if="type=='mainDiagnose'"/>
       <form-outlined style="color: #fff; font-size: 16px; margin-left: 10px; cursor: pointer" @click="showeditor" v-privilege="'case-system:case:checkPermission'" v-else-if="type=='dpmas'"/>
        <form-outlined style="color: #fff; font-size: 16px; margin-left: 10px; cursor: pointer" @click="showeditor" v-privilege="'case-system:case:checkdataImg'" v-else/>
    </div>

    <img class="viewimg" :src="src" alt="" />
    <a-image
      :width="100"
      :style="{ display: 'none' }"
      :preview="{
        visible,
        onVisibleChange: priviewImg,
      }"
      :src="src"
    />
  </div>


</template>

<script setup>

import { ref} from 'vue';
const props = defineProps({
  src: {
    type: String,
    default: '',
  },
  type:{
     type: String,
    default: '',
  },
  imgIndex:{
    type: Number,
    default: 0,
  },
  dpmasId:{
    type: Number,
    default: 0,
  },
});

 const emits = defineEmits(['openEditor']);
const visible = ref(false);
const priviewImg = (value) => {
  visible.value = value;
};
const showeditor = () => {
  emits('openEditor', {
    src:props.src,
    type:props.type,
    imgIndex:props.imgIndex,
    dpmasId:props.dpmasId
  });
}
</script>
<style lang="less" >
#tui-image-editor {
  height: 100%;
  width: 100%;
  position: relative;
}
.editbox {
  width: 100%;
  height: 100%;
  z-index: 999;
  position: fixed;
  top: 0;
  bottom: 0;
}
.editbox .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
}
.viewimg {
  width: 100px;
  height: 100px;
  object-fit: cover;

}
.imgecell {
  margin-top: 4px;
  position: relative;
  width: 100px;
  height: 100px;
    border-radius: 4px;
  margin-right: 12px;
  overflow: hidden;
}
.imgecell .tool {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgecell .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
}

</style>
