<template>
  <div id="tui-image-editor" ></div>
</template>

<script setup>
import { message, Modal } from 'ant-design-vue';
import { ref,onBeforeUnmount} from 'vue';
import 'tui-image-editor/dist/tui-image-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
import ImageEditor from 'tui-image-editor';
import { caseplatformCaseApi } from '/@/api/business/case/caseplatform-case-api';
const prosp=defineProps({
  imgsrc:{
    type:String,
    default:''
  },
  imgType:{
    type:String,
    default:''
  },
  caseId:{
    type:String,
    default:'',
  },
  caseObj:{
    type:Object,
    default:()=>{},
  }
})
const emit=defineEmits(['freshDetail'])
// tui-image-editor语言配置，汉化文字
const locale_zh = {
  ZoomIn: '放大',
  ZoomOut: '缩小',
  Hand: '手掌',
  History: '历史',
  Resize: '调整宽高',
  Crop: '裁剪',
  DeleteAll: '全部删除',
  Delete: '删除',
  Undo: '撤销',
  Redo: '反撤销',
  Reset: '重置',
  Flip: '镜像',
  Rotate: '旋转',
  Draw: '画',
  Shape: '形状标注',
  Icon: '图标标注',
  Text: '文字标注',
  Mask: '遮罩',
  Filter: '滤镜',
  Bold: '加粗',
  Italic: '斜体',
  Underline: '下划线',
  Left: '左对齐',
  Center: '居中',
  Right: '右对齐',
  Color: '颜色',
  'Text size': '字体大小',
  Custom: '自定义',
  Square: '正方形',
  Apply: '应用',
  Cancel: '取消',
  'Flip X': 'X 轴',
  'Flip Y': 'Y 轴',
  Range: '区间',
  Stroke: '描边',
  Fill: '填充',
  Circle: '圆',
  Triangle: '三角',
  Rectangle: '矩形',
  Free: '曲线',
  Straight: '直线',
  Arrow: '箭头',
  'Arrow-2': '箭头2',
  'Arrow-3': '箭头3',
  'Star-1': '星星1',
  'Star-2': '星星2',
  Polygon: '多边形',
  Location: '定位',
  Heart: '心形',
  Bubble: '气泡',
  'Custom icon': '自定义图标',
  'Load Mask Image': '加载蒙层图片',
  Grayscale: '灰度',
  Blur: '模糊',
  Sharpen: '锐化',
  Emboss: '浮雕',
  'Remove White': '除去白色',
  Distance: '距离',
  Brightness: '亮度',
  Noise: '噪音',
  'Color Filter': '彩色滤镜',
  Sepia: '棕色',
  Sepia2: '棕色2',
  Invert: '负片',
  Pixelate: '像素化',
  Threshold: '阈值',
  Tint: '色调',
  Multiply: '正片叠底',
  Blend: '混合色',
  Width: '宽度',
  Height: '高度',
  'Lock Aspect Ratio': '锁定宽高比例',
};

// 画布组件自定义样式
const customTheme = {
  'common.bi.image': '', // 左上角logo图片
  'common.bisize.width': '0px',
  'common.bisize.height': '0px',
  'common.backgroundImage': 'none',
  'common.backgroundColor': '#fff',
  'common.border': 'none',

  // header
  'header.backgroundImage': 'none',
  'header.backgroundColor': '#f3f4f6',
  'header.border': '0px',
  'header.display': 'none',

  // load button
  'loadButton.backgroundColor': '#fff',
  'loadButton.border': '1px solid #ddd',
  'loadButton.color': '#222',
  'loadButton.fontFamily': 'NotoSans, sans-serif',
  'loadButton.fontSize': '12px',
  'loadButton.display': 'none', // 可以直接隐藏掉

  // download button
  'downloadButton.backgroundColor': '#fdba3b',
  'downloadButton.border': '1px solid #fdba3b',
  'downloadButton.color': '#fff',
  'downloadButton.fontFamily': 'NotoSans, sans-serif',
  'downloadButton.fontSize': '12px',
  'downloadButton.display': 'none', // 可以直接隐藏掉
  // icons default
  'menu.normalIcon.color': '#fff',
  'menu.activeIcon.color': '#4080ff',
  'menu.disabledIcon.color': '#ccc',
  'menu.hoverIcon.color': '#4080ff',
  'submenu.normalIcon.color': 'rgba(255,255,255,.9)',
  'submenu.activeIcon.color': '#4080ff',

  'menu.iconSize.width': '16px',
  'menu.iconSize.height': '16px',
  'submenu.iconSize.width': '18px',
  'submenu.iconSize.height': '18px',

  // submenu primary color
  'submenu.backgroundColor': 'transparent',
  'submenu.partition.color': 'transparent',

  // submenu labels
  'submenu.normalLabel.color': 'rgba(255,255,255,.5)',
  'submenu.normalLabel.fontWeight': 'lighter',
  'submenu.activeLabel.color': '#fff',
  'submenu.activeLabel.fontWeight': 'lighter',

  // checkbox style
  'checkbox.border': '1px solid #ccc',
  'checkbox.backgroundColor': '#fff',

  // rango style
  'range.pointer.color': '#fff',
  'range.bar.color': 'rgba(255,255,255,0.5)',
  'range.subbar.color': '#fff',

  'range.disabledPointer.color': '#414141',
  'range.disabledBar.color': '#282828',
  'range.disabledSubbar.color': '#414141',

  'range.value.color': '#fff',
  'range.value.fontWeight': 'lighter',
  'range.value.fontSize': '11px',
  'range.value.border': '1px solid #496fb9',
  'range.value.backgroundColor': '#496fb9',
  'range.title.color': '#fff',
  'range.title.fontWeight': 'lighter',

  // colorpicker style
  'colorpicker.button.border': '1px solid #fff',
  'colorpicker.title.color': '#fff',
};
const instance = ref(null);
const HandleMainDiagnoseImg=()=>{
  caseplatformCaseApi.updateMainDiagnose({
    caseId:current_caseId.value,
    mainDiagnose:JSON.stringify(caseVO.value.mainDiagnose)
  }).then(res=>{
    message.success('保存成功')
  })
};
const HandleDpmasImg=(dmpsId)=>{
  caseplatformCaseApi.updateDpmas({
    caseId:current_caseId.value,
    dmpsId:dmpsId,
     dpmasImg:dpmasImg
  }).then(res=>{
    message.success('保存成功')
  })
};
const HandleCheckImg=(dmpsId)=>{
  caseplatformCaseApi.updatecheck({
    caseId:current_caseId.value,
    dmpsId:dmpsId,
   checkImg:checkImg
  }).then(res=>{
    message.success('保存成功')
  })
};
const getImageFormat=(imageUrl)=>{
          console.log(imageUrl)
        var parts = imageUrl.split('.');
        return parts[parts.length - 1];
      };
const  getOss=()=>{
   caseplatformCaseApi.getOssSign(1).then(res=>{
        let { accessid, dir,policy,signature,host} = res;
          let imgUrl = file;
  })
}
const save = () => {
  instance.value.resetZoom();
  const base64String = instance.value.toDataURL(); // base64 文件
  const data = window.atob(base64String.split(',')[1]);
  const ia = new Uint8Array(data.length);
  for (let i = 0; i < data.length; i++) {
    ia[i] = data.charCodeAt(i);
  }
  const blob = new Blob([ia], { type: 'image/png' }); // blob 文件
  //下面懒得弄组件直接用当前时间弄得文件名，如果后台写了这里可以随便，也可以使用uuid进行生成
  // const file = new File([blob], new Date().getTime() + '.jpeg', { type: blob.type });
  // fileToBase64(file).then((res) => {
  //   newSrc.value = res;
  // });
  if(props.imgType==='mainDiagnose'){
    HandleMainDiagnoseImg();
  }
};

const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
};
const init = (src) => {
  instance.value = new ImageEditor(document.querySelector('#tui-image-editor'), {
    includeUI: {
      loadImage: {
        path: src,
        name: '编辑图片',
      },
      menu: ['draw', 'text'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
      initMenu: 'draw', // 默认打开的菜单项
      menuBarPosition: 'bottom', // 菜单所在的位置
      locale: locale_zh, // 本地化语言为中文
      theme: customTheme, // 自定义样式
    },
    cssMaxWidth: 1000, // canvas 最大宽度
    cssMaxHeight: 600, //
    usageStatistics: false,
  });

  document.getElementsByClassName('tui-image-editor-main')[0].style.top = '45px'; // 调整图片显示位置
  //document.getElementsByClassName('tie-btn-reset tui-image-editor-item help')[0].style.display = 'none'; // 隐藏顶部重置按钮
  document.getElementsByClassName('tie-text-align-button')[0].style.display = 'none'; // 隐藏文字对齐选项

  // // 调整图片显示位置
  // document.getElementsByClassName("tui-image-editor-main")[0].style.top = "0px";
  // //隐藏重置按钮
  document.getElementsByClassName('tie-btn-reset tui-image-editor-item help')[0].style.display = 'none';
  //隐藏移动按钮
  document.getElementsByClassName('tie-btn-hand tui-image-editor-item help')[0].style.display = 'none';
  //隐藏历史记录按钮
  document.getElementsByClassName('tie-btn-history tui-image-editor-item help')[0].style.display = 'none';
  //隐藏单个删除按钮
  document.getElementsByClassName('tie-btn-delete tui-image-editor-item')[0].style.display = 'none';
};

onBeforeUnmount(() => {
  if (instance.value) {
    instance.value.destroy();
    instance.value = null;
  }
});
defineExpose({init,save})

</script>

<style>
.tui-image-editor-help-menu {
  background: skyblue !important;
}
.tui-image-editor-container .tui-image-editor-controls {
  display: flex !important;
  align-items: center !important;
  background: transparent;
  height: 40px !important;
}
.tui-image-editor-container .color-picker-value {
  width: 20px !important;
  height: 20px !important;
}
.tui-image-editor-container.bottom .tui-image-editor-submenu > div {
  padding-bottom: 0 !important;
}
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li {
  display: flex !important;
}
.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline {
  display: flex !important;
  align-items: center;
}
.tui-image-editor-menu {
  width: 300px !important;
  height: 50px;
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  background: skyblue !important;
}

.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item,
.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active {
  padding: 0 !important;
  width: 25px;
  height: 25px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.tui-image-editor-container {
  background: transparent !important;
}
.tui-image-editor-submenu-item {
  display: flex !important;
  justify-content: center !important;
  width: 800px !important;
  margin: 0 auto !important;
  align-items: center !important;
  background: skyblue !important;
}
.tui-image-editor-container .tui-image-editor-range {
  top: 0 !important;
}
.tui-image-editor-container .tui-image-editor-range-value {
  margin-top: 0;
}
.editorcon {
  width: 100%;
  height: 100%;
  position: relative;
}
.save {
  position: absolute;
  right: 195px;
  top: 14px;
  z-index: 999;
  cursor: pointer;
  color:#fff;
  font-size: 17px;
  opacity: 0.8;
}
</style>
