<template>
  <view class="page">
	 
	<view class="navbox">
	  <view class="bg"></view>
	  <view class="namebox">
	    <view class="back" @click="closeSv">
	      <u-icon name="arrow-left" color="#000" size="24"></u-icon>
	    </view>

	    <!-- <view class="logo">logo</view> -->
	    <view class="name">{{editorType=='info'?'病例信息':'总结与讨论'}}</view>
	  </view>
	</view>
	<view class="container">
		<view class="row">
		  <view class="left">{{editorType=='info'?'病例信息':'总结与讨论'}}<text class="tip" v-if="editorType=='result'">(可不填)</text></view>
		  <view class="right" @click="clearMuBan" v-if="editorType=='info'">
		    <u-icon name="trash" color="#6B7280" size="18"></u-icon>
		    清除模板
		  </view>
		</view>
		<view class="editorbox">
			<sv-editor	   
			  :placeholder="placeholder"
			  eid="peditor"
			  @ready="ready"
			  pasteMode="origin"
			  @focus="focus"
			  @blur="blur"
			 
			></sv-editor>
			
		</view>
	</view>
	<view class="toolbar"  >
		<view class="toolbox">
		  <view class="cellbox">
		  	<view class="cell"
		  			    @click="insertImage"
		  			  
		  			  >
		  			    <view class="imgbox" :class="{active:!isIOS}">
							<up--image
							  :src="photoImg"
							  class="headImg"
							  width="32rpx"
							  height="32rpx"
							></up--image>
						</view>
		  			    <view class="name">添加图片</view>
		  			  </view>
		  			  <view
		  			    class="cell"
		  			    @click="insertVideo"
		  			   
		  			  >
					   <view class="imgbox" :class="{active:!isIOS}">
						   <up--image
						     :src="videoImg"
						     class="headImg"
						     width="32rpx"
						     height="32rpx"
						   ></up--image>
					   </view>
		  			   
		  			    <view class="name">添加视频</view>
		  			  </view>
		  			  <view
					  v-if="editorType=='info'"
		  			    class="cell"
		  			  	 
		  			    @click="alertTitle"
		  			  >
		  			   <view class="imgbox" :class="{active:!isIOS}">
						   <up--image
						     :src="addImg"
						     class="headImg"
						     width="32rpx"
						     height="32rpx"
						   ></up--image>
					   </view>
		  			    <view class="name">添加小标题</view>		 
		  	     </view>
		  			   
		   </view>
		   <view class="btn" @click="confirm">确定</view>
		</view>
		<canvas
		  v-if="showCanvas"
		  type="2d"
		  id="pwatermarkCanvas"
		  style="width: 200px; height: 200px; position: fixed; top: -9999px"
		/>
	</view>
	<up-popup
	    :round="10"
	    zIndex="999999"
	    :show="showTitle"
	    mode="bottom"
	    @close="closeTitle"
	    @open="openTitle"
	  >
	    <view class="draftpop titlepop">
	      <view class="titlebox"
	        >添加小标题
	        <view class="close" @click="closeTitle"
	          ><up-icon name="close" color="#4B5563" size="20"></up-icon
	        ></view>
	      </view>
	      <view class="con">
	        <view class="top">
	          <up-icon
	            name="plus-circle"
	            color="#3CC7C0"
	            size="20"
	            @click="insertAllWord"
	          ></up-icon>
	          <view class="desc" @click="insertAllWord">一键添加全部</view>
	        </view>
	        <view class="cellbox">
	          <view class="cell" @click="insertWord('患者信息')">患者信息</view>
	          <view class="cell" @click="insertWord('主诉')">主诉</view>
	          <view class="cell" @click="insertWord('现病史及既往史')"
	            >现病史及既往史</view
	          >
	        </view>
	        <view class="cellbox">
	          <view class="cell" @click="insertWord('检查')">检查</view>
	          <view class="cell" @click="insertWord('临床诊断')">临床诊断</view>
	          <view class="cell" @click="insertWord('治疗经过及结果')"
	            >治疗经过及结果</view
	          >
	        </view>
	      </view>
	    </view>
	  </up-popup>
</view>

</template>

<script setup>
	import photoImg from "@/static/photo.png";
	import throttle from "@/utils/throttle"
	import addImg from "@/static/add.png";
	import videoImg from "@/static/videoicon.png";
	import { initCustomFormatter, nextTick, reactive, ref,watch } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	
	import { getCurrentInstance } from 'vue'
	 
	const instace = getCurrentInstance();
	import api from "@/api/api";
	import dayjs from "dayjs";
	import {
	  addImage,
	  addVideo,
	  addText,
	} from "@/uni_modules/sv-editor/components/common/utils.js";
	import svEditor from "@/uni_modules/sv-editor/components/sv-editor/sv-editor.vue";
	const PeditorCtx=ref(null);
	const htmlContent=ref('');
	const keyboardHeight=ref(0);
	const  videoface=ref('https://caseplatform.oss-cn-beijing.aliyuncs.com/prod/static/shipinfengmian.jpg')
	const editorHeight=ref(300);
	const navName=ref('病例信息');
	const placeholder=ref('患者基本情况，检查结果，诊疗图片或视频');
	const showTitle=ref(false)
	const props=defineProps({
		editorType:{
			type:String,
			default:'info'
		},
		editorCotent:{
			type:String,
			default:''
		}
	})
	const showCanvas=ref(false);
	watch(()=>props.editorType,(newVal)=>{
		console.log(11111111)
		console.log(newVal)
		if(newVal=="info"){
			placeholder.value='患者基本情况，检查结果，诊疗图片或视频'
		}else{
			placeholder.value='分享经验和心得，如：诊断与鉴别诊断易错点，治疗过程难点，病例的相关知识总结及讨论等'
		}
	},{immediate: true })
	const emits=defineEmits(['closeEditor','changeEditor'])
    const isIOS=ref(false);
	const insertWord = (word) => {
	  addText(word);
	  showTitle.value = false;
	};
	const insertAllWord = () => {
	  let word = [
	    "患者信息",
	    "主诉",
	    "现病史及既往史：",
	    "检查",
	    "临床诊断",
	    "治疗经过及结果",
	  ];
	  word.forEach((item) => {
	    addText(item);
	  });
	  showTitle.value = false;
	};
	const ready = (e) => {
		console.log(e);
		
	  PeditorCtx.value = e;
	   
	  if(props.editorType=="info"){
		  if(props.editorCotent){
			  console.log('peditor')
			  console.log(props.editorCotent)
			  PeditorCtx.value.initHtml(props.editorCotent,async (videoUrl) => {
			    let res='';
			  
			    // #ifdef APP || H5
			    // res = await this.PeditorCtx.createVideoThumbnail(videoUrl)
			    // #endif
			    
			  
			    res = await PeditorCtx.value.createCoverThumbnail(videoface.value)
			     
			    return res
			  })
			  setTimeout(async()=>{
				  console.log('qaz')
				  let res=await PeditorCtx.value.getLastContent();
				  console.log(res);
			  },6000)
		  }else{
			
			 let html =
			   "<p>【患者信息】：</p><br/><p>【主诉】：</p><br/><p>【现病史及既往史】：</p><br/><p>【检查】：</p><br/><p>【临床诊断】：</p><br/><p>【治疗经过及结果】：</p><br/><br/>";
			  PeditorCtx.value.initHtml(html);  
		  }
		
	  }else{
		  if(props.editorCotent){
		  			  PeditorCtx.value.initHtml(props.editorCotent,async (videoUrl) => {
		  			    let res='';
		  			  
		  			    // #ifdef APP || H5
		  			    // res = await this.PeditorCtx.createVideoThumbnail(videoUrl)
		  			    // #endif
		  			    
		
		  			    res = await PeditorCtx.value.createCoverThumbnail(videoface.value)
		  			  
		  			    return res
		  			  })
		  }else{
		  			
		  			  let html =
		  			    "";
		  			  PeditorCtx.value.initHtml(html);  
		  }
		  		
	  }
	 
	
	  uni.hideLoading();
	  
	};
	const closeSv =throttle(()=>{
		emits('closeEditor')
	})
	const confirm=async ()=>{
		
		const res = await PeditorCtx.value.getLastContent();
		let html = PeditorCtx.value.exportHtml(res.html.replace('undefined',''));
	
		emits('changeEditor',{
			type:props.editorType,
			content:html
		})
	}
	const foucus=()=>{
		
	}
	const blur=()=>{
		
	}
	const clearMuBan=()=>{
		PeditorCtx.value.initHtml("");
	}
	const updatePosition=(c_keyboardHeight)=>{
	  const toolbarHeight = 50
	  const { windowHeight, platform } = uni.getSystemInfoSync();
	  let c_editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
	  //this.setData({ editorHeight, keyboardHeight })
			 editorHeight.value=c_editorHeight;
			 keyboardHeight.value=c_keyboardHeight;
			 
	}
	onLoad(()=>{
	    const platform =uni.getSystemInfoSync().platform
	     isIOS.value=platform === 'ios'
	    updatePosition(0)
	    let keyboardHeight = 0
	    uni.onKeyboardHeightChange(res => {
	      if (res.height === keyboardHeight) return
	      const duration = res.height > 0 ? res.duration * 1000 : 0
	      keyboardHeight = res.height
	      setTimeout(() => {
	        uni.pageScrollTo({
	          scrollTop: 0,
	          success() {
	            updatePosition(keyboardHeight)
	             PeditorCtx.value.scrollView()
	          }
	        })
	      }, duration)
	
	    })
	  });
	  const fillTextToImgWx = (base64) => {
	    let maskText = "@肝胆相照临床病例库";
	    return new Promise((resolve, reject) => {
	      wx.createSelectorQuery().in(instace.proxy)
	        .select("#pwatermarkCanvas")
	        .fields({
	          node: true,
	          size: true,
	        })
	        .exec((res) => {
	          const canvas = res[0].node;
	          const ctx = canvas.getContext("2d");
	          let textMetrics = ctx.measureText(maskText);
	          console.log(textMetrics);
	          //水印文字宽度
	          let {
	            width: textWidth,
	            actualBoundingBoxAscent,
	            actualBoundingBoxDescent,
	          } = textMetrics;
	          //水印文字高度
	          let textHeight = actualBoundingBoxAscent
	            ? actualBoundingBoxAscent + actualBoundingBoxDescent
	            : textMetrics.fontBoundingBoxAscent +
	              textMetrics.fontBoundingBoxDescent;
	          let imgHeight, imgWidth;
	          let font = ""; //fontsize"px Arial";
	  
	          let fontColor = "#fff";
	          let strokeWidth =10;
	          uni.getImageInfo({
	            src: base64,
	            success: (imageRes) => {
	              // 设置canvas宽高
	              //28;
	                let scale =(imageRes.width / 800) * 30 > 12
	                  ? (imageRes.width / 800) * 30
	                  : 12;
	              font = scale + "px Arial";
	              console.log(imageRes);
	              canvas.width = imageRes.width;
	              canvas.height = imageRes.height;
	              imgHeight = imageRes.height;
	              imgWidth = imageRes.width;
	              // 创建目标图片对象
	              const image = canvas.createImage();
	              image.src = "";
	              image.src = base64;
	              image.onload = () => {
	                // 清除画布
	                //ctx.clearRect(0, 0, canvas.width, canvas.height);
	  
	                // 将图片绘制到canvas上
	                ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
	                let posXmargin =20; //this.data.posXmargin // 自定义离左/右边的距离
	                let posYmargin = 20; // this.data.posYmargin // 自定义离上/下边的距离
	                let randomNumber = 3; //Math.floor(Math.random() * (3 + 1));
	                console.log("randomNumber:" + randomNumber);
	                switch (randomNumber) {
	                  case 0: //左上角
	                    let lt_x = posXmargin;
	                    let lt_y = posYmargin + textHeight;
	                    ctx.font = font;
	                    ctx.storkStyle = "#000";
	                    ctx.strokeWidth = strokeWidth;
	                    ctx.fillStyle = "#fff";
	                    ctx.fillText(maskText, lt_x, lt_y);
	  
	                    //ctx.restore()
	                    //ctx.save()
	                    break;
	                  case 1: //左下角
	                    let lb_x = posXmargin;
	                    let lb_y = imgHeight - posYmargin;
	                    ctx.font = font;
	                    ctx.fillStyle = fontColor;
	                    ctx.strokeStyle = "black";
	                    ctx.strokeWidth = strokeWidth;
	                    ctx.fillStyle = "#fff";
	                    ctx.fillText(maskText, lb_x, lb_y);
	  				 
	                    //ctx.restore()
	                    //ctx.save()
	                    break;
	  
	                  case 2: //右上角
	                    let rt_x =
	                      imgWidth - textWidth * 2.9 - posXmargin <= 0
	                        ? 10
	                        : imgWidth - textWidth * 2.9 - posXmargin;
	                    let rt_y = posYmargin + textHeight * 2;
	                    ctx.font = font;
	                    ctx.fillStyle = fontColor;
	                    ctx.strokeStyle = "#000";
	                    ctx.strokeWidth = strokeWidth;
	                    ctx.fillStyle = "#fff";
	                    ctx.fillText(maskText, rt_x, rt_y);
	                    ctx.restore();
	                    ctx.save();
	                    break;
	                  case 3: //右下角
	                    let rb_x =
	                      imgWidth - scale*10 - posXmargin <= 0
	                        ? 10
	                        : imgWidth - scale*10 - posXmargin;
	  					  console.log(rb_x)
	                    let rb_y = imgHeight - posYmargin;
	                    ctx.font = font;
	                    ctx.fillStyle = fontColor;
	                    ctx.strokeStyle = "#000";
	                    //ctx.strokeWidth = strokeWidth;
	                    ctx.fillStyle = "#fff";
	  				  console.log('rb_x')
	  				  console.log(rb_x)
	  				   ctx.strokeText(maskText,rb_x, rb_y);
	                     ctx.fillText(maskText, rb_x, rb_y);
	  				 
	                    //ctx.restore()
	                    //ctx.save()
	                    break;
	                }
	  
	                //ctx.restore()
	                // 将canvas转为图片
	                //setTimeout(() => {
	                wx.canvasToTempFilePath({
	                  canvas: canvas,
	                  success: function (res) {
	                    // 输出生成的带水印的图片临时路径
	                    resolve(res.tempFilePath);
	                    //wx.previewImage({ urls: [res.tempFilePath] });
	                    
	                  },
	                  fail: function (res) {
	                    // reject(res)
	                    console.error(res);
	                  },
	                });
	  
	                //})
	              };
	            },
	          });
	        });
	    });
	  };
	  
	  const fillTextToImg = (base64) => {
	    const img = new Image();
	    img.src = base64;
	    img.setAttribute("crossOrigin", "Anonymous");
	    return new Promise((resolve, reject) => {
	      img.onload = () => {
	        const canvas = document.createElement("canvas");
	        const ctx = canvas.getContext("2d");
	        canvas.width = img.width;
	        canvas.height = img.height;
	        ctx.fillRect(0, 0, canvas.width, canvas.height);
	        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	        const remFontSize = 30; //canvas.width / 35;
	        ctx.font = remFontSize + "px '微软雅黑'";
	        ctx.textAlign = "right";
	        ctx.strokeStyle = "#000";
	        ctx.fillStyle = "#fff";
	        const uploadTime = new Date();
	        const name = "@肝胆相照临床病例库";
	        const spaceH = remFontSize * 0.1;
	        let randomNumber = 3//Math.floor(Math.random() * (3 + 1));
	        let position = [
	          {
	            top: remFontSize,
	            left: name.length * 30 || 30,
	          },
	          {
	            top: remFontSize,
	            left: canvas.width - remFontSize * 0.1 - spaceH,
	          },
	          {
	            top: canvas.height - remFontSize * 0.5 - spaceH,
	            left: name.length * 30 || 30,
	          },
	          {
	            top: canvas.height - remFontSize * 0.5 - spaceH,
	            left: canvas.width - remFontSize * 0.1 - spaceH,
	          },
	        ];
	        ctx.strokeText(
	          name,
	          position[randomNumber].left,
	          position[randomNumber].top
	        );
	        ctx.fillText(
	          name,
	          position[randomNumber].left,
	          position[randomNumber].top
	        );
	        resolve(canvas.toDataURL("image/jpeg"));
	      };
	    });
	  };
	  const generateRandomNumber = () => {
	    let randomNumber = Math.floor(1000 + Math.random() * 9000);
	    return randomNumber;
	  };
	  // 图片转64代
	  const getImageBase64 = (url) => {
	    return new Promise((resolve, reject) => {
	      const xhr = new XMLHttpRequest();
	      xhr.open("GET", url, true);
	      xhr.responseType = "blob";
	      xhr.onload = function () {
	        if (this.status == 200) {
	          const fileReader = new FileReader();
	          fileReader.onloadend = function () {
	            resolve(fileReader.result); // Base64编码的字符串
	          };
	          fileReader.readAsDataURL(xhr.response); // 将blob转换为base64
	        } else {
	          reject("Could not fetch the file.");
	        }
	      };
	      xhr.onerror = function () {
	        reject("XHR error");
	      };
	      xhr.send();
	    });
	  };
	  const getImageFormat = (imageUrl) => {
	    console.log(imageUrl);
	    const lastDotIndex = imageUrl.lastIndexOf(".");
	    if (lastDotIndex !== -1) {
	      return imageUrl.substring(lastDotIndex + 1);
	    }
	    return "unknown";
	  };
	  const getOss=(temurl)=>{
	  	  api
	  	    .getOss({
	  	      scene: 1,
	  	    })
	  	    .then((rep) => {
	  	      let result = rep.data;
	  	      if (result.code == 200) {
	  	        let { access_id, dir, policy, signature, host } = result.data;
	  	
	  	        let time = dayjs().format("YYYYMMDDHHmmss");
	  	        let random = generateRandomNumber();
	  	        let filename = time + random;
	  	        let imgType = "." + getImageFormat(temurl);
	  	        return new Promise((resolve, reject) => {
	  	          uni.uploadFile({
	  	            url: host, // 仅为示例，非真实的接口地址
	  	            filePath:temurl,
	  	            name: "file",
	  	            formData: {
	  	              OSSAccessKeyId: access_id,
	  	              policy,
	  	              key: dir + time + random + imgType,
	  	              signature,
	  	            },
	  	            success(res) {
	  	              if (res.statusCode === 204) {
	  	              let url = host + "/" + dir + filename + imgType;
	  	              //imgList.value.push(url);
	  	              addImage([url]);
	  	              }
	  	            },
	  	            fail: (err) => {
	  	              console.log(err);
	  	            },
	  	          });
	  	        });
	  	      }
	  	    });
	  }
	  const readImages = async (localIds) => {
		  uni.showLoading({
		    title: "正在上传图片...",
		    mask: true,
		  });
		  
	    console.log(localIds);
	    let promiseFun = [];
	    for (var i = 0; i < localIds.length; i++) {
	      let img = null;
	      // #ifdef H5 
	      let imgBase64 = await getImageBase64(localIds[i]);
	      img = await fillTextToImg(imgBase64);
	      // #endif
	      // #ifdef MP-WEIXIN
	       img = await fillTextToImgWx(localIds[i]);
	      // #endif 
	      promiseFun.push(getOss(img))
	 
	    };
		Promise.all(promiseFun).then((res) => {
		  uni.showToast({
		      title: "上传成功",
			  icon:"none"
		  });
		});
	}
	const insertImage = (file) => {
		showCanvas.value=true;
	  //if (!(!isFocusInfo.value && !isFocusResult.value)) {
	    uni.chooseImage({
	      count: 9, //默认9
	      sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
	      sourceType: ["album"], //从相册选择
	      extension: [".jpg", ".png", ".jpeg"],
	      success: function (res) {
			  
	        readImages(res.tempFilePaths);
	      },
	    });
	  //}
	};
	const HandleAddVideo = async (file) => {
	  uni.showLoading({
	    title: "正在上传视频...",
	    mask: true,
	  });
	  const videos = await addVideo(async (PeditorCtx) => {
	    return new Promise((resolve) => {
	      api
	        .getOss({
	          scene:2,
	        })
	        .then((rep) => {
	          let result = rep.data;
	          if (result.code == 200) {
	            let { access_id, dir, policy, signature, host } = result.data;
	
	            let time = dayjs().format("YYYYMMDDHHmmss");
	            let random = generateRandomNumber();
	            let filename = time + random;
	            let imgType = "." + getImageFormat(file);
	            return new Promise((res, reject) => {
	              uni.uploadFile({
	                url: host, // 仅为示例，非真实的接口地址
	                filePath: file,
	                name: "file",
	                formData: {
	                  OSSAccessKeyId: access_id,
	                  policy,
	                  key: dir + time + random + imgType,
	                  signature,
	                },
	                async success(res) {
	                  if (res.statusCode === 204) {
	                    let url = host + "/" + dir + filename + imgType;
	                    const fileThumbnail = await PeditorCtx.createCoverThumbnail(videoface.value);
	                    resolve([
	                      {
	                        videoUrl: url,
	                        videoImg: fileThumbnail,
	                      },
	                    ]);
	                  }
	                },
	                fail: (err) => {
	                  console.log(err);
	                },
	              });
	            });
	          }
	        });
	    });
	  });
	  if (videos) {
	    uni.hideLoading();
	    uni.showToast({ title: "添加视频成功", icon: "none" });
	  } else {
	    uni.showToast({ title: "添加视频失败", icon: "none" });
	  }
	};
	const insertVideo = (file) => {
	  //if (!(!isFocusInfo.value && !isFocusResult.value)) {
	    uni.chooseVideo({
	      count: 5, //默认9//可以指定是原图还是压缩图，默认二者都有
	      sourceType: ["album"], //从相册选择
	      extension: [".mp4", ".webm", ".ogg"],
	      success: function (res) {
	        console.log(res.tempFilePath);
	        HandleAddVideo(res.tempFilePath);
	        //pFun([res.tempFilePath], "video");
	      },
	    });
	  //}
	}; 
	const closeTitle = () => {
	  showTitle.value = false;
	};
	const openTitle = () => {
	  showTitle.value = true;
	};
	const alertTitle = () => {
		console.log('qqqqqq')
	    showTitle.value = true;
	};
	const initData=(data)=>{
		console.log('init');
		console.log(data)
		htmlContent.value=data;
	}
	
	defineExpose({initData})
</script>

<style lang='scss' scoped>
	.row{
	  padding: 30rpx 30rpx 0;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  .left{
	    font-size: 38rpx;
	    color: #000000;
	  }
	  .tip {
	    color: #9ca3af;
	    font-size: 32rpx;
	  }
	  .right{
	    display: flex;
	    align-items: center;
	    color: #6b7280;
	    font-size: 31rpx;
	  }
	}
	.navbox {
	  padding-bottom: 20rpx;
	  background-color: #f9fafb;
	  position: relative;
	  height: 200rpx;
	  background: radial-gradient(
	    60% 90% at 4% 2%,
	    #43c9c3 0%,
	    rgba(255, 255, 255, 0) 100%
	  );
	  .bg {
	    z-index: 0;
	    top: 0;
	    bottom: 0;
	    width: 100%;
	    position: absolute;
	    background: radial-gradient(
	      43% 90% at 84% 6%,
	      #ffd6c9 0%,
	      rgba(255, 255, 255, 0) 100%
	    );
	  }
	  .namebox {
	    padding-top: 102rpx;
	    justify-content: center;
	    margin: 0rpx 30rpx 0rpx;
	    position: relative;
	    display: flex;
	    .back {
	      position: absolute;
	      left: 0;
	    }
	    .name {
	      margin-left: 16rpx;
	      font-size: 30rpx;
	      color: #111827;
	    }
	  }
	  .search {
	    margin: 40rpx 30rpx 0rpx;
	    display: flex;
	
	    align-items: center;
	    justify-content: space-between;
	    .searchwrap {
	      display: flex;
	      align-items: center;
	      flex: 1;
	      padding-left: 28rpx;
	      margin-right: 23rpx;
	      height: 80rpx;
	      background: #fbfbfb;
	      box-shadow: 0px 4rpx 10rpx 0px rgba(153, 153, 153, 0.5);
	      border-radius: 40rpx;
	
	      .ipt {
	        margin-left: 15rpx;
	        font-size: 28rpx;
	      }
	    }
	  }
	}
	
	.container {
	  position: absolute; 
	  top: 180rpx; 
	  left: 0; 
	  bottom:200rpx;
	  width: 100%;
	}
	
	.editorbox{
	  width: 100%;
	  height: 100%;
	  font-size: 16px;
	  box-sizing:border-box;
	  overflow-y: scroll;
	  padding: 10rpx 30rpx 10rpx ;
	 
	}
	
	.ql-active {
	  color: #22C704;
	}
	.btn{
		flex:1;
		width:180rpx;
		background:#3cc7c0;
		display:flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color:#fff;
		height: 60rpx;
		border-radius: 8rpx;
	}
	.iconfont {
	  display: inline-block;
	  width: 30px;
	  height: 30px;
	  cursor: pointer;
	  font-size: 20px;
	}
	
	.toolbar {
	  box-sizing: border-box;
	  padding: 0 10px;
	  height: 50px;
	  width: 100%;
	  position: fixed;
	  left: 0;
	  right: 100%;
	  bottom: 0;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  border: 1px solid #ECECEC;
	  border-left: none;
	  border-right: none;
	}
	
.page{
	position: fixed;
	width:100%;
	height:100vh;
	background-color: #fff;
	bottom:0;
	z-index:999;
}
.toolbox {
 /* border-top: 2rpx solid #f3f4f6; */
  padding: 22rpx 30rpx;
  width:100%;
  box-sizing:border-box;
  display: flex;
  align-items: center;
  .cellbox{
	  width:480rpx;
	display: flex;
	align-items: center;  
	/* justify-content: space-between; */
  }
  .imgbox{
	 
	  width:32rpx;
	  height:32rpx;
  }
  .imgbox.active{
	  margin-top: -9rpx;
  }
  .cell {
	  width:134rpx;
    margin-right: 20rpx;
    display: flex;
	flex-wrap: nowrap;
    align-items: center;
    .name {
      font-size: 25rpx;
      margin-left: 4rpx;
      color: #4b5563;
	  white-space: nowrap;
    }
  }
  .cell:last-child{
	  margin-right: 0;
  }
  .cell.active {
    opacity: 0.65;
  }
}
 
 
 .draftpop {
   .titlebox {
     text-align: center;
     padding: 30rpx;
     font-size: 31rpx;
     color: #111827;
     position: relative;
     .close {
       position: absolute;
       top: 20rpx;
       right: 30rpx;
     }
   }
   .draftlist {
     height: calc(100vh - 500rpx);
     overflow-y: scroll;
     .cell {
       padding-bottom: 34rpx;
       border-bottom: 2rpx solid #e5e7eb;
       .title {
         margin: 15rpx 30rpx 0;
         font-size: 36rpx;
         color: #111827;
         line-height: 46rpx;
       }
       .smalltitle {
         margin: 4px 0rpx 0;
         font-size: 30rpx;
         color: #666666;
         line-height: 38rpx;
       }
       .con {
         font-size: 30rpx;
         color: #666666;
         line-height: 38rpx;
         font-size: 30rpx;
         color: #666666;
         line-height: 38rpx;
       }
       .deal {
         margin: 36rpx 30rpx 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
         .time {
           font-size: 26rpx;
           color: #9ca3af;
         }
         .right {
           display: flex;
           align-items: center;
         }
         .del {
           width: 138rpx;
           height: 62rpx;
           background: #f3f4f6;
           display: flex;
           border-radius: 20rpx;
           align-items: center;
           font-size: 27rpx;
           color: #4b5563;
           justify-content: center;
         }
         .edit {
           margin-left: 23rpx;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 192rpx;
           height: 62rpx;
           font-size: 27rpx;
           color: #ffffff;
           background: #3cc7c0;
           border-radius: 20rpx;
         }
       }
     }
   }
 }
.titlepop {
  .top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 30rpx;
    margin-bottom: 30rpx;
    font-size: 30rpx;
    color: #3cc7c0;
  }
  .con {
    padding-bottom: 50rpx;
  }
  .cellbox {
    margin: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    .cell {
      width: 200rpx;
      height: 60rpx;
      border-radius: 25rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #e5e7eb78;
      font-size: 24rpx;
    }
  }
}
.upage :deep(.ql-container) {
  padding-bottom: 25rpx;
  height: calc(100vh - 600rpx)!important;
}
.upage :deep(.ql-container){
	padding-bottom: 25rpx;
	 height: calc(100vh - 700rpx);
}
.upage :deep(.ql-container) img{
	 max-width:100%;
	 position: relative;
	 left:50%;
	 transform: translateX(-50%);
}
.upage :deep(.ql-container) image{
	 max-width:100%;
	 position: relative;
	 left:50%;
	 transform: translateX(-50%);
}
/* #ifdef H5 */
	:deep(.ql-editor){
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  width:100%;
	}
/* #endif */
</style>