<template>
  <z-paging
    ref="paging"
    inside-more
    loading-more-no-more-text="咱也是有底线的！"
    :auto-show-back-to-top="false"
    v-model="dataList"
	:refresher-out-rate="0.8"
	:empty-view-super-style="{'paddingBottom':'140rpx'}"
	:refresher-title-style="{'paddingBottom':'60rpx','paddingTop':'10rpx'}"
	:refresher-img-style="{'paddingBottom':'60rpx','paddingTop':'10rpx'}"
    @query="queryList"
  >
    <template #top>
      <backDetailNav :navName="type=='exchange'?'肝胆相照病例交流园地':'肝胆相照临床病例库'"></backDetailNav>
      
    </template>
    <template #bottom>
      <view class="bottom">
        <view class="iptbox"  @click="open">
          <up--image
            :src="chatImg"
            width="46rpx"
			height="46rpx"
            radius="50%"
          ></up--image>
          <view class="iptcon" @click="open">
			  <view class="maskipt" @click="open"></view>
			
			 <up-input
			   @click="open"
			   disabled
			 	:focus="false"
			 type="text"
			   placeholderClass="placeholderClass"
			   placeholder="对病例发表您的看法"
			   class="ipt"
			 />
			
			 
		  </view>
        </view>
        <view class="right">
          <up--image
            @click="toggleCollect"
            :src="info.is_collect ? collectonImg : collectImg"
            width="70rpx"
			height="70rpx"
          ></up--image>
          <view class="imgboxshang" @click="openGivePop">
            <up--image
              :src="shangImg"
              mode="widthFix"
              width="169rpx"
              height="77rpx"
            ></up--image>
          </view>
        </view>
      </view>
    </template>
    <view class="box">
        <view class="title" v-if="type == 'video'">{{ info.video_title }}</view>
        <view class="title" v-else-if="type == 'article'">{{
          info.article_title
        }}</view>
        <view class="title" v-else>{{ info.exchange_title }}</view>
        <view class="content" >
          <view class="info" v-for="item in info.author"  :key ="item" v-if="type == 'video' || type == 'article'">
            <up--image
              :src="item.avatar?item.avatar:headImg"
             
              class="headImg"
              width="46rpx"
              height="46rpx"
              radius="50%"
            ></up--image>
            <view class="name"
              >{{ item.doctor_name }} · {{ item.hospital_name }}</view
            >
          </view>
		  <view class="info" v-else>
		    <up--image
		      :src="info.avatar?info.avatar:headImg"
		     
		      class="headImg"
		      width="46rpx"
		      height="46rpx"
		      radius="50%"
		    ></up--image>
		    <view class="name"
		      >{{ info.user_name }} · {{ info.hospital_name }}</view
		    >
		  </view>
          <view class="deal">
            <view class="left">
              <view class="eyebox">
                <up-icon name="eye" color="#6B7280" size="28rpx"></up-icon>
                <view class="num">{{ info.read_num }}</view>
              </view>
              <view class="collect">
                <up-icon
                  :name="info.is_collect ? 'heart-fill' : 'heart'"
                  :color="info.is_collect ? 'red' : '#6B7280'"
                  size="28rpx"
                ></up-icon>
                <view class="num">{{ info.collect_num }}</view>
              </view>
            </view>
            <view class="time">
              <up-icon name="clock" color="#6B7280" size="28rpx"></up-icon>
              <view class="num">{{ formatDay(info.push_date) }}</view>
            </view>
          </view>
        </view>
        <view class="bar"></view>

        <canvas
          v-if="showCanvas"
          type="2d"
          id="watermarkCanvas"
          style="width: 200px; height: 200px; position: fixed; top: -9999px"
        />
      </view>
    <view class="desc">
		
      <view class="videobox" v-if="type == 'video' && !isH5 ">
		  <!-- #ifdef MP-WEIXIN -->
			<polyv-player
			  v-if="info.video_no"
			  :id="'playerContext'+info.video_no"
			  :playerId="'playerId'+info.video_no"
			  :vid="info.video_no"
			  height="500rpx"
			  autoplay="{{false}}"
			>
			</polyv-player>
          <!-- #endif -->
      </view>
	 
	  <view class="videobox" v-if="type == 'video' && isH5">
		    <!-- #ifdef H5 -->
	    <baoliVideo :vid="info.video_no" ></baoliVideo>
		    <!-- #endif -->
	  </view>
	  
      <view class="videobox" v-else-if="type == 'article'" style="min-height:350rpx">
        <view class="content">
			<up-parse :content="fromatImg(info.article_content)"></up-parse>
		</view>
      </view>
      <view class="videobox" v-else>
        <view class="cloumn" v-if="info.exchange_content">
          <view class="stitle">疾病信息</view>
          <up-parse :content="fromatImg(info.exchange_content)" style="overflow-y: hidden;"></up-parse>
          <!-- <view class="con" v-html="fromatImg(info.exchange_content)"></view> -->
        </view>
        <view class="cloumn" v-if="info.exchange_summary">
          <view class="stitle">总结与讨论</view>
          <up-parse :content="fromatImg(info.exchange_summary)"></up-parse>
          <!-- <view class="con" v-html="fromatImg(info.exchange_summary)"></view> -->
        </view>
        <view class="bar"></view>
        <view class="detail"  v-if="info.exchange_vote && info.exchange_vote.vote_title">
          <view class="votebox" v-if="info.exchange_vote.is_have_voted==0 ">
              <view class="name">在线投票</view>
             <view class="title" >{{ info.exchange_vote.vote_title }}</view>
              <view class="group">
                  <up-radio-group
            v-model="option_id"
            placement="column"
           
          >
           <view class="row"   v-for="item in info.exchange_vote.case_exchange_vote_option" :key="item.option_id">
               <up-radio
               activeColor="#3CC7C0"
               :label="item.option_value"
              :name="item.option_id"
            >
            </up-radio>
           </view>
          </up-radio-group>
           <view class="btn" @click="addVote()">投票</view>
              </view>
          </view>
           <view class="votebox"  v-if="info.exchange_vote.is_enabled==0 || info.exchange_vote.is_have_voted==1 ">
             <view class="name">在线投票</view>
             <view class="title">{{ info.exchange_vote.vote_title }}</view>
             <view class="options">
               <view class="option" v-for="item in info.exchange_vote.case_exchange_vote_option" :key="item.option_id">
                <view class="row">
                  <view class="left">{{item.option_value }}</view>
                  <view class="num">{{item.proportion}}%</view>
                </view>
                <view class="line">
                  <view class="inner" :style="{width:proportion/100 }"></view>
                </view>

               </view>
             </view>
          </view>
         
        </view>
        <!-- <view class="detail" v-if="info.case_exchange_vote && info.case_exchange_vote.vote_title">
            
        </view> -->
      </view>
      <view class="bar"></view>
      <view class="comnum">
        <view class="imgcon">
          <up--image
            :src="commentImg"
            mode="widthFix"
            width="50rpx"
			height="50rpx"
          ></up--image>
        </view>

        <view class="num">全部评论（{{ total }}）</view>
      </view>
      <view class="commentcon">
        <view
          class="item"
          v-for="(item, index) in dataList"
          :key="item.comment_id"
        >
          <up--image
            :src="item.avatar?item.avatar:headImg"
            class="headImg"
            width="86rpx"
            height="86rpx"
            radius="50%"
          ></up--image>
		  
          <view class="info">
            <view class="user">
              <view class="namebox">
			      <view class="name"> {{ item.user_name }}</view>
				   <up--image
				    v-if="doctor_id==item.doctor_id"
				     :src="selfImg"
				      class="selfImg"
				     width="69rpx"
				     height="31rpx"
				    
				   ></up--image>
			  </view>
              <view
                class="dot"
                @click="
                  alertDeal(
                    item.comment_id,
                    item.comment_id,
                    item.user_name,
                    item.is_top,
                    2,
					item.doctor_id
                  )
                "
                >...</view
              >
            </view>
            <view class="question">{{ item.content }}</view>
            <view class="commentImg" v-if="item.comment_image">
              <up-image
                :src="item.comment_image"
                radius="16rpx"
                width="150rpx"
                height="150rpx"
                @click="previewImg(item.comment_image)"
              ></up-image>
            </view>
            <view class="date">{{ formatDate(item.created_at) }}</view>
            <view
              class="commentcon"
              v-if="item.sub_comment && item.sub_comment.length > 0"
            >
              <view
                class="item"
                v-for="(cell, index) in item.sub_comment.slice(0, 3)"
                :key="cell.comment_id"
                style="padding-left: 0;padding-right:0"
              >
                <up--image
                  :src="cell.avatar?cell.avatar:headImg"
                  class="headImg"
                  width="86rpx"
                  height="86rpx"
                  radius="50%"
                ></up--image>
                <view class="info">
                  <view class="user">
                    <view class="namebox">
                        <view class="name"> {{ cell.user_name }}</view>
                    	<up--image
                    	 v-if="doctor_id==cell.doctor_id"
                    	  :src="selfImg"
                    	   class="selfImg"
                    	  width="69rpx"
                    	  height="31rpx"
                    	 
                    	></up--image>			   
                    </view>
                    <view
                      class="dot"
                      @click="
                        alertDeal(
                          cell.comment_id,
                          cell.root_id,
                          cell.user_name,
                          cell.is_top,
                          3,
						  cell.doctor_id
                        )
                      "
                      >...</view
                    >
                  </view>
                  <view
                    class="question"
                    v-html="formatHtml(cell.content)"
                  ></view>
                  <view class="commentImg" v-if="cell.comment_image">
                    <up-image
                      :src="cell.comment_image"
                      radius="16rpx"
                      width="150rpx"
                      height="150rpx"
                      @click="previewImg(cell.comment_image)"
                    ></up-image>
                  </view>
                  <view class="date">{{ formatDate(cell.created_at) }}</view>
                </view>
              </view>
            </view>
            <view
              class="expand"
              @click="openMorePop(item, item.sub_comment, index)"
              v-if="item.sub_comment.length > 3"
              >——展开更多回复<view class="iconbox"><up-icon name="arrow-down" color="#3cc7c0" size="38rpx"></up-icon></view></view
            >
          </view>
        </view>
      </view>
    </view>
  </z-paging>
  <!-- 评论框 -->
  <up-popup
    :zIndex="99"
    :overlayStyle="{ zIndex: 98 }"
    :closeOnClickOverlay="false"
    :show="showCommentDialog"
    :round="10"
    closeable
    mode="bottom"
    @close="close"
    @open="open"
  >
    <view class="poptitle"></view>
    <view class="wraper">
      <up--textarea
	    :focus="false"
	    ref="commentTextarea"
        height="200"
		:cursorSpacing="240"
		adjustPosition
		adjust-keyboard-to="bottom"
        v-model="content"
        :placeholder="placeholder"
      ></up--textarea>
    </view>
    <view class="imgbox" v-if="imgList.length > 0">
      <view class="imgunit">
        <up--image
          :src="imgList[0]"
          radius="6"
          width="150rpx"
          height="150rpx"
          @click="previewImg(imgList[0])"
        ></up--image>
        <view class="close" @click="delImg">
          <up-icon name="close-circle" color="#666" size="16"></up-icon>
        </view>
      </view>
    </view>
    <view class="sendbox">
      <view class="left"  :class="{disabled:imgList.length>=1}">
        <up-upload
		 :disabled="imgList.length>=1"
          :show-upload-list="false"
          @afterRead="afterRead"
          name="imgupload"
          multiple
          :maxCount="1"
          width="40rpx"
          height="77rpx"
        >
          <up--image
		   
            :src="uploadImg"
            mode="widthFix"
            width="40rpx"
            height="77rpx"
          ></up--image>
        </up-upload>
      </view>
      <view class="btn" @click="sendComment">发送</view>
    </view>
  </up-popup>
  <!-- 底部操作 -->
  <up-popup
    :zIndex="60"
    :overlayStyle="{ zIndex: 59 }"
    :closeOnClickOverlay="false"
    :show="showDeal"
    :round="10"
    mode="bottom"
    @close="closeDeal"
    @open="openDeal"
  >
    <view class="dealbox">
      <view class="dealcell" @click="toggleTop" v-if="level == 2 && isArticleAuthor">{{
        is_top ? "取消置顶" : "置顶"
      }}</view>
      <view class="dealcell" @click="openCommentDialog">回复</view>
      <view class="dealcell" v-if="isArticleAuthor || doctor_id==comment_doctorId" @click="delComment">删除</view>
      <view class="bar"></view>
      <view class="dealcell" @click="closeDealPop">取消</view>
    </view>
  </up-popup>
  <!-- 展开更多回复 -->
  <up-popup
    :zIndex="10"
    :overlayStyle="{ zIndex: 9 }"
    :closeOnClickOverlay="false"
    :show="showMore"
    :round="10"
    mode="bottom"
    @close="closeMore"
    @open="openMore"
  >
    <view class="commentPop">
      <view class="title">
        回复
        <view class="close" @click="closeMore">
          <up-icon name="close" color="#666" size="20"></up-icon>
        </view>
      </view>
      <scroll-view class="commentScroll"  :scroll-top="scrollTop" @scroll="scroll" scroll-y="true" @scrolltolower="scrolltolower(mainCommentObj.comment_id)" >
        <view class="unit commentcon">
          <view class="item">
            <up--image
              :src="mainCommentObj.avatar?mainCommentObj.avatar:headImg"
              class="headImg"
              width="86rpx"
              height="86rpx"
              radius="50%"
            ></up--image>
            <view class="info">
              <view class="user">

				<view class="namebox">
				    <view class="name"> {{ mainCommentObj.user_name}}</view>
					<up--image
					 v-if="doctor_id==mainCommentObj.doctor_id"
					  :src="selfImg"
					   class="selfImg"
					  width="69rpx"
					  height="31rpx"
					 
					></up--image>			   
				</view>
                <view
                  class="dot"
                  @click="
                    alertDeal(
                      mainCommentObj.comment_id,
                      mainCommentObj.comment_id,
                      mainCommentObj.user_name,
                      mainCommentObj.is_top,
                      2,
					  mainCommentObj.doctor_id
                    )
                  "
                  >...</view
                >
              </view>
              <view class="question">{{ mainCommentObj.content }}</view>
              <view class="commentImg" v-if="mainCommentObj.comment_image">
                <up-image
                  :src="mainCommentObj.comment_image"
                  radius="16rpx"
                  width="150rpx"
                  height="150rpx"
                  @click="previewImg(mainCommentObj.comment_image)"
                ></up-image>
              </view>
              <view class="date">{{
                formatDate(mainCommentObj.created_at)
              }}</view>
            </view>
          </view>
        </view>
        <view class="commentcon">
          <view
            class="item"
            v-for="(cell, index) in childList"
            :key="cell.comment_id"
          >
            <up--image
              :src="cell.avatar?cell.avatar:headImg"
              class="headImg"
              width="86rpx"
              height="86rpx"
              radius="50%"
            ></up--image>
            <view class="info">
              <view class="user">
                <view class="namebox">
                    <view class="name">{{ cell.user_name}}</view>
                	<up--image
                	 v-if="doctor_id==cell.doctor_id"
                	  :src="selfImg"
                	   class="selfImg"
                	  width="69rpx"
                	  height="31rpx"
                	 
                	></up--image>			   
                </view>
                <view
                  class="dot"
                  @click="
                    alertDeal(
                      cell.comment_id,
                      cell.root_id,
                      cell.user_name,
                      cell.is_top,
                      3,
					  cell.doctor_id
                    )
                  "
                  >...</view
                >
              </view>
              <view class="question" v-html="formatHtml(cell.content)"></view>
              <view class="commentImg" v-if="cell.comment_image">
                <up-image
                  :src="cell.comment_image"
                  radius="16rpx"
                  width="150rpx"
                  height="150rpx"
                  @click="previewImg(cell.comment_image)"
                ></up-image>
              </view>
              <view class="date">{{ formatDate(cell.created_at) }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="bottom" @click="showReplyPop">
        <up-input
          readonly
          :placeholder="'@' + mainCommentObj.user_name + '：'"
          border="surround"
          v-model="value"
        ></up-input>
      </view>
    </view>
  </up-popup>
  <!-- 打赏 -->
  <up-overlay :show="showGive" mask-click-able>
    <view class="zanboxpop">
      <view class="zanwraper">
        <view class="title">打赏</view>
        <view class="count">
          积分余额：
          <text class="num">{{ point }}</text>积分
          <!-- <text class="earn">去赚积分</text> -->
        </view>
        <view class="countbox">
          <view class="minus" @click="changePoint('minus')">-</view>
          <up-input
            placeholder="请输入打赏积分"
            type="number"
            border="surround"
            v-model="givePointValue"
          ></up-input>
          <view class="add" @click="changePoint('add')">+</view>
        </view>
        <view class="btnbox">
          <view class="cancle" @click="showGive = false">取消</view>
          <view class="ok" @click="confirmGive">确定</view>
        </view>
      </view>
    </view>
  </up-overlay>

  <up-overlay :show="showModal" mask-click-able>
    <view class="zanboxpop">
      <view class="zanwraper">
        <view class="title">提示</view>
        <view class="content"> 是否删除该评论？ </view>

        <view class="btnbox">
          <view class="cancle" @click="showModal = false">取消</view>
          <view class="ok" @click="confirmDel">确定</view>
        </view>
      </view>
    </view>
  </up-overlay>
</template>
<script setup>
import { nextTick, reactive, ref } from "vue";
import headImg from "@/static/headImg.png";
import collectonImg from "@/static/collectOn.png";
import collectImg from "@/static/collect.png";
import shangImg from "@/static/shang.png";
import chatImg from "@/static/chat.png";
import uploadImg from "@/static/uploadImg.png";
import backDetailNav from "@/components/backDetailNav/backDetailNav.vue";
import commentImg from "@/static/comment_icon.png";
import selfImg from "@/static/benren.png";
import list from "@/uni_modules/z-paging/components/z-paging/z-paging";
import api from "@/api/api";
import throttle from "@/utils/throttle"
import { onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";
// #ifdef H5
import baoliVideo from "@/components/baoliVideo/baoliVideo.vue";
import { linkFlag } from "../../uni_modules/sv-editor/components/common/utils";
// #endif
const value=ref('');
const isArticleAuthor=ref(false)
const isH5=ref(process.env.UNI_PLATFORM =="h5");
const doctor_id=ref('');
const paging = ref(null);
const dataList = ref([]);
const total = ref(0);
const imgList = ref([]);
const showCanvas = ref(true);
const showCommentDialog = ref(false);
const givePointValue = ref(5);
const canvasWidth = ref(0);
const canvasHeight = ref(0);
const showModal = ref(false);
const content = ref("");
const type = ref("");
const info = reactive({});
const showDeal = ref(false);
const showMore = ref(false);
const showGive = ref(false);
const id = ref("");
const parent_id = ref(null);
const root_id = ref(null);
const is_author = ref(false);
const reply_name = ref("");
const level = ref(1);
const placeholder = ref("请输入评论内容");
const mainCommentObj = reactive({});
const childList = ref([]);
const clickIndex = ref(0);
const is_top = ref(false);
const option_id = ref("");
const point=ref(0)
const comment_doctorId=ref('');
const commentTextarea=ref(null)
const isLock=ref(false);
const confirmGive = () => {
  //showGive.value = false;
   givePoint();
};
const oldScrollTop=ref(0)
const scrollTop=ref(0)
const scroll=(e)=>{
	oldScrollTop.value=e.detail.scrollTop
}
const toTop=()=>{
	scrollTop.value=oldScrollTop.value
	nextTick(()=>{
		scrollTop.value=0
	})
}
const openGivePop=()=>{
  showGive.value=true;
  getUserPoint();
}
const formatDay = (date) => {
  return dayjs(date).format("YYYY-MM-DD");
};
const formatDate = (date) => {
  return dayjs(date).format("YYYY-MM-DD HH:mm");
};
const scrolltolower=(rootId)=>{
	console.log(isLock.value);
	if(!isLock.value){
		
		  let page=mainCommentObj.sub_page+1;
			 mainCommentObj.sub_page=page;
			let params = {
			  page: page,
			  page_size: 5,
			 };
			
			if (type.value == "article") {
			  getArticleComment(params,rootId);
			} else if (type.value == "video") {
			  getVideoComment(params,rootId);
			} else {
			  getExchangeComment(params,rootId);
			}
	}
    
}
const changePoint = (type) => {
  if (type == 'minus') {
        if (givePointValue.value >5) {
          givePointValue.value = givePointValue.value - 5
        } else {
			uni.showToast({
			  icon: "none",
			  title: "每次打赏积分必须大于0",
			});
           givePointValue.value =1;
        }

      }else{
		givePointValue.value = givePointValue.value + 5  
	  }
}

const openMorePop = (obj, list, index) => {
  showMore.value = true;
  childList.value = list;
  isLock.value=false;
  Object.assign(mainCommentObj, obj);
  clickIndex.value = index;
    mainCommentObj.sub_page=1;
   
  
  
};
const getArticleDetail = (id) => {
  api.getArticleDetail(id).then((res) => {
    let result = res.data.data;
    Object.assign(info, result);
	for (let i= 0;  i< info.author.length; i++) {
		 if(info.author[i].doctor_id==doctor_id.value){
			 isArticleAuthor.value=true;
		 }
		
	}
  });
};
const getVideoDetail = (id) => {
  api.getVideoDetail(id).then((res) => {
    let result = res.data.data;
    Object.assign(info, result);
	for (let i= 0;  i< info.author.length; i++) {
		 if(info.author[i].doctor_id==doctor_id.value){
			 isArticleAuthor.value=true;
		 }
		
	}
  });
};
const getExchangeDetail = (id) => {
  api.getExchangeDetail(id).then((res) => {
    let result = res.data.data;
    Object.assign(info, result);
	if(info.doctor_id==doctor_id.value){
		isArticleAuthor.value=true;
	}
  });
};
const getUserPoint=()=>{
  api.getUserPoint().then(res=>{
    point.value=res.data.data

   
  })
}
const givePoint=()=>{
	if(givePointValue.value==null){
		//givePointValue.value =1;
		 uni.showToast({
					icon: "none",
					title: "每次打赏积分必须大于0",
		 });
		return false;
	}
	if (givePointValue.value <=1) {
		 givePointValue.value =1;
		  uni.showToast({
			icon: "none",
			title: "每次打赏积分必须大于0",
		  });
			return false;
	};
	
	if(!(/^[1-9]\d*$/.test(givePointValue.value))){
			 
			  uni.showToast({
			    icon: "none",
			    title: "每次打赏积分必须是大于0的整数",
			  });
			 givePointValue.value = null;
			 return false;
	}
	
  if(point.value<givePointValue.value){
    uni.showToast({
      icon:'none',
      title:'积分不足！'
    })
    return false
  }
  let giveType=1;
  if(type.value=='article'){
      giveType=1
    }else if(type.value=='video'){
    giveType=2
}else{
     giveType=3
}

  api.givePoint({
    id:id.value,
    type:giveType,
    point:givePointValue.value,
  }).then(res=>{
    uni.showToast({
      icon:'none',
      title:'打赏成功！'
    })
	 givePointValue.value = 5;
    showGive.value=false;
  })
}
const getQueryParam=(param,link)=>{
	     const url = link;
	     // 构造正则表达式，匹配 ? 或 & 后面跟随的参数名称和其值
	     const regex = new RegExp('[?&]' + param + '=([^&#]*)', 'i');
	     const result = regex.exec(url);
	     return result ? decodeURIComponent(result[1]) : null;
	   };
onLoad((options) => {
	if(options.scene){
		
	   var decodedURL = decodeURIComponent(options.scene);
	   
	    let idStr=getQueryParam('id',decodedURL);
		
		let typeStr=getQueryParam('type',decodedURL);
		
	   if(idStr){
		   id.value=idStr;
	   }
	    if(typeStr){
			if(typeStr==1){
				 type.value='article';
			}else if(typeStr==2){
				type.value='video';
			}
	 		  
	     }

	}else{
		id.value = options.id;
		type.value = options.type;
	}
  readRecord()
    
  let userInfo=uni.getStorageSync('userInfo');
  if(userInfo.doctor_id){
	  doctor_id.value=userInfo.doctor_id;
  }
  
});
const clearComment = () => {
  parent_id.value = null;
  imgList.value = [];
  content.value = "";
  root_id.value = null;
  placeholder.value="请输入评论内容"
  //is_author.value = false;
  reply_name.value = "";
  level.value = 1;
};
const closeDealPop = () => {
  showDeal.value = false;
  clearComment();
};
const showReplyPop = () => {
  parent_id.value = mainCommentObj.comment_id;
  root_id.value = mainCommentObj.comment_id;
  is_author.value = mainCommentObj.is_author == 1 ? true : false;
  reply_name.value = mainCommentObj.user_name;
  level.value = 2;
  if (level.value == 2 || level.value == 3) {
    placeholder.value = "回复" + reply_name.value + "：";
  }
  showCommentDialog.value = true;
};
const alertDeal = (parentId, rootId, name, top, commentLevel,userId) => {
  parent_id.value = parentId;
  comment_doctorId.value=userId;
  root_id.value = rootId;
  //is_author.value = isAuthor == 1 ? true : false;
  reply_name.value = name;
  level.value = commentLevel;
  is_top.value = top == 1 ? true : false;
  if (level.value == 2 || level.value == 3) {
    placeholder.value = "回复" + name + "：";
  }
  showDeal.value = true;
};
const openCommentDialog = () => {
  showCommentDialog.value = true;
  showDeal.value = false;
};
const queryList = (pageNo, pageSize) => {
  const params = {
    page: pageNo,
    page_size: pageSize,
  };
  // type.value == "article" ? getArticleComment(params) : getVideoComment(params);
  if (type.value == "article") {
    getArticleComment(params);
  } else if (type.value == "video") {
    getVideoComment(params);
  } else {
    getExchangeComment(params);
  }
};

const getArticleComment = (params,rootId='') => {
  const form = {
    article_id: id.value,
	 root_id:rootId,
    is_have_sub_comment: 1,
  };
  api
    .getArticleComment({
      ...form,
      ...params,
    })
    .then((res) => {
	if(!rootId){
		paging.value.complete(res.data.data.data);
		 total.value = res.data.data.total;
		  is_author.value= res.data.data.is_author==1?true:false;
		  setTimeout(() => {
		    if (showMore.value) {
				childList.value=[];
		       openMorePop(
		        dataList.value[clickIndex.value],
		        dataList.value[clickIndex.value].sub_comment,
		        clickIndex.value
		      );
			  toTop();
		    }
		  }, 1500);
		
	}else{
		if(res.data.data.data.length>0){
			
		let arr=mainCommentObj.sub_comment;
		mainCommentObj.sub_comment=mainCommentObj.sub_comment.concat(res.data.data.data);
		childList.value=mainCommentObj.sub_comment;	
		if(res.data.data.data.length<5){
			isLock.value=true;
		}
		}
	}
	      
    })
    .catch((res) => {
      paging.value.complete(false);
    });
};
const sub_list=ref([]);
const getVideoComment = (params,rootId='') => {
  const form = {
    video_id: id.value,
    root_id:rootId,
    is_have_sub_comment:1,
  };
  api
    .getVideoComment({
      ...form,
      ...params,
    })
    .then((res) => {
		if(!rootId){
			paging.value.complete(res.data.data.data);
			 total.value = res.data.data.total;
			  is_author.value= res.data.data.is_author==1?true:false;
			  setTimeout(() => {
			    if (showMore.value) {
					childList.value=[];
			       openMorePop(
			        dataList.value[clickIndex.value],
			        dataList.value[clickIndex.value].sub_comment,
			        clickIndex.value
			      );
				  toTop();
			    }
			  }, 1500);
			
		}else{
			if(res.data.data.data.length>0){
				
			let arr=mainCommentObj.sub_comment;
			mainCommentObj.sub_comment=mainCommentObj.sub_comment.concat(res.data.data.data);
			childList.value=mainCommentObj.sub_comment;	
			if(res.data.data.data.length<5){
				isLock.value=true;
			}
			}
		}
      
         
      
    })
    .catch((res) => {
      paging.value.complete(false);
    });
};
const getExchangeComment = (params,rootId='') => {
  const form = {
    exchange_id: id.value,
	 root_id:rootId,
    is_have_sub_comment: 1,
  };
  api
    .getExchangeComment({
      ...form,
      ...params,
    })
    .then((res) => {
      if(!rootId){
      	paging.value.complete(res.data.data.data);
      	 total.value = res.data.data.total;
      	  is_author.value= res.data.data.is_author==1?true:false;
      	  setTimeout(() => {
      	    if (showMore.value) {
      			childList.value=[];
      	       openMorePop(
      	        dataList.value[clickIndex.value],
      	        dataList.value[clickIndex.value].sub_comment,
      	        clickIndex.value
      	      );
      		  toTop();
      	    }
      	  }, 1500);
      	
      }else{
      	if(res.data.data.data.length>0){
      	let arr=mainCommentObj.sub_comment;
      	mainCommentObj.sub_comment=mainCommentObj.sub_comment.concat(res.data.data.data);
      	childList.value=mainCommentObj.sub_comment;	
      	if(res.data.data.data.length<5){
      		isLock.value=true;
      	}
      	}
      }
            
    })
    .catch((res) => {
      paging.value.complete(false);
    });
};
const open = () => {
  showCommentDialog.value = true;
  };
const close = () => {
  showCommentDialog.value = false;
   clearComment();
};

const openDeal = () => {
  showDeal.value = true;
};
const closeDeal = () => {
  showDeal.value = false;
};

const openMore = () => {
  showMore.value = true;
};
const closeMore = () => {
  showMore.value = false;
  paging.value.refresh();
};
const previewImg = (url) => {
  uni.previewImage({
    current: url,
    urls: [url],
  });
};

const fillTextToImgWx = (base64) => {
  let maskText = "@肝胆相照临床病例库";
  return new Promise((resolve, reject) => {
    wx.createSelectorQuery()
      .select("#watermarkCanvas")
      .fields({
        node: true,
        size: true,
      })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext("2d");
        let textMetrics = ctx.measureText(maskText);
        //水印文字宽度
        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";
            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));
              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;
                  let rb_y = imgHeight - posYmargin;
                  ctx.font = font;
                  ctx.fillStyle = fontColor;
                  ctx.strokeStyle = "#000";
                  //ctx.strokeWidth = strokeWidth;
                  ctx.fillStyle = "#fff";
				   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 base64ToFile = (base64Data, filename) => {
  var arr = base64Data.split(",");
  var type = arr[0].match(/:(.*?);/)[1];
  var fileExt = type.split("/")[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {
    type: type,
  });
};

const generateUUID = () => {
  let d = new Date().getTime();
  if (
    typeof performance !== "undefined" &&
    typeof performance.now === "function"
  ) {
    d += performance.now(); // 使用性能测量 API（performance.now()）获取更高精度的时间戳
  }
  const uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
    /[xy]/g,
    function (c) {
      const r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
    }
  );
  return uuid;
};
const readImages = async (localIds) => {
  let promiseFun = [];
  for (var i = 0; i < localIds.length; i++) {
    //let localData = await doreadImage(localIds[i]);

    let img = null;
    // #ifdef H5 
    let imgBase64 = await getImageBase64(localIds[i].url);
    img = await fillTextToImg(imgBase64);
    
    
    // #endif
    // #ifdef MP-WEIXIN
     img = await fillTextToImgWx(localIds[i].url);
    // #endif 
    promiseFun.push(getOss(img))
  }
  Promise.all(promiseFun).then((res) => {
    uni.showToast({
      title: "上传成功",
      icon:"none"
    });
  });
};
// 图片转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 chooseImg = () => {
  showCanvas.value = true;
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera "], //从相册选择
    success: function (res) {
      uni.getFileSystemManager({
        filePath: res.tempFilePaths[0], // 替换为你的临时文件路径
        success: (res) => {
         // 这里res.file就是File对象
          // 接下来可以使用这个File对象进行上传等操作
        },
        fail: (err) => {
          console.error("获取文件信息失败", err);
        },
      });
      //readImages(res.tempFilePaths);
    },
  });
};
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 = [url];
	              }
	            },
	            fail: (err) => {
	              
	            },
	          });
	        });
	      }
	    });
}
const handleUpload = (file) => {
  let File = file.file;
  readImages(File)

};
const generateRandomNumber = () => {
  let randomNumber = Math.floor(1000 + Math.random() * 9000);
  return randomNumber;
};
const getImageFormat = (imageUrl) => {
  const lastDotIndex = imageUrl.lastIndexOf(".");
  if (lastDotIndex !== -1) {
    return imageUrl.substring(lastDotIndex + 1);
  }
  return "unknown";
};
const afterRead = (file, lists, name) => {
  handleUpload(file);
};
const delImg = (index) => {
  imgList.value = [];
};
const collectArticle = (id) => {
  api.collectArticle(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "收藏成功",
    });
    getArticleDetail(id);
  });
};

const collectVideo = (id) => {
  api.collectVideo(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "收藏成功",
    });
    getVideoDetail(id);
  });
};

const collectExchange = (id) => {
  api.exchangeCollect(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "收藏成功",
    });
    getExchangeDetail(id);
  });
};
const cancelCollectArticle = (id) => {
  api.cancelCollectArticle(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "已取消收藏",
    });
    getArticleDetail(id);
  });
};
const cancelCollectVideo = (id) => {
  api.cancelCollectVideo(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "已取消收藏",
    });
    getVideoDetail(id);
  });
};
const cancelCollectExchange = (id) => {
  api.cancelCollectExchange(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "已取消收藏",
    });
    getExchangeDetail(id);
  });
};
const toggleCollect = throttle(() => {
  if (type.value == "video") {
    info.is_collect ? cancelCollectVideo(id.value) : collectVideo(id.value);
  } else if (type.value == "article") {
    info.is_collect ? cancelCollectArticle(id.value) : collectArticle(id.value);
  } else {
    info.is_collect
      ? cancelCollectExchange(id.value)
      : collectExchange(id.value);
  }
});

const addArticleComment = (id, data) => {
  api.addArticleComment(id, data).then((res) => {
	 if(res.data.data.status==1){
		 uni.showToast({
		   icon: "none",
		   title: "评论成功",
		 });
		 clearComment();
		 showCommentDialog.value = false;
		 paging.value.refresh();
	 }else if(res.data.data.status==2){
		 uni.showToast({
		   icon: "none",
		   title: "评论成功，积分+5",
		 });
		 clearComment();
		 showCommentDialog.value = false;
		 paging.value.refresh();
	 }else if(res.data.data.status==0){
		 uni.showToast({
		   icon: "none",
		   title: "评论失败",
		 });
		 
	 }
   
    
  });
};
const addVideoComment = (id, data) => {
  api.addVideoComment(id, data).then((res) => {
   if(res.data.data.status==1){
   		 uni.showToast({
   		   icon: "none",
   		   title: "评论成功",
   		 });
   		 clearComment();
   		 showCommentDialog.value = false;
   		 paging.value.refresh();
   }else if(res.data.data.status==2){
   		 uni.showToast({
   		   icon: "none",
   		   title: "评论成功，积分+5",
   		 });
   		 clearComment();
   		 showCommentDialog.value = false;
   		 paging.value.refresh();
   }else if(res.data.data.status==0){
   		 uni.showToast({
   		   icon: "none",
   		   title: "评论失败",
   		 });
   		 
   }
  });
};
const addExchangeComment = (id, data) => {
  api.addExchangeComment(id, data).then((res) => {
   if(res.data.data.status==1){
   		 uni.showToast({
   		   icon: "none",
   		   title: "评论成功",
   		 });
   		 clearComment();
   		 showCommentDialog.value = false;
   		 paging.value.refresh();
   }else if(res.data.data.status==2){
   		 uni.showToast({
   		   icon: "none",
   		   title: "评论成功，积分+5",
   		 });
   		 clearComment();
   		 showCommentDialog.value = false;
   		 paging.value.refresh();
   }else if(res.data.data.status==0){
   		 uni.showToast({
   		   icon: "none",
   		   title: "评论失败",
   		 });
   		 
   }
  });
};
const delArticleComment = (id) => {
  api.delArticleComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "删除成功",
    });
    paging.value.refresh();
  });
};
const delVideoComment = (id) => {
  api.delVideoComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "删除成功",
    });
    paging.value.refresh();
  });
};
const fromatImg = (val) => {
	if(val){
		return val.replace(/\<img|\<\s+img/gi, '<img class="imgstyle"');
	}else{
		 return '';
	}
 
};
const delExchangeComment = (id) => {
  // 调用删除评论的API
  api.delExchangeComment(id).then((res) => {
    // 显示提示框，提示删除成功
    uni.showToast({
      icon: "none",
      title: "删除成功",
    });
    // 刷新分页组件
    paging.value.refresh();
  });
};
const topArticleComment = (id) => {
  api.topArticleComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "置顶成功",
    });
	showDeal.value = false;
	paging.value.refresh();
  });
 
};
const topVideoComment = (id) => {
  api.topVideoComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "置顶成功",
    });
	showDeal.value = false;
	paging.value.refresh();
  });

};
const topExchangeComment = (id) => {
  api.topExchangeComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "置顶成功",
    });
	showDeal.value = false;
	paging.value.refresh();
  });
  
};
const cancelTopArticleComment = (id) => {
  api.cancelTopArticleComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "取消置顶成功",
    });
	showDeal.value = false;
	paging.value.refresh();
  });

};
const cancelTopVideoComment = (id) => {
  api.cancelTopArticleComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "取消置顶成功",
    });
	showDeal.value = false;
	paging.value.refresh();
  });

};
const cancelTopExchangeComment = (id) => {
  api.cancelTopExchangeComment(id).then((res) => {
    uni.showToast({
      icon: "none",
      title: "取消置顶成功",
    });
	showDeal.value = false;
	paging.value.refresh();
  });

};
const delComment = () => {
  showModal.value = true;
  showDeal.value = false;
};
const confirmDel = () => {
  if (type.value == "article") {
    delArticleComment(parent_id.value);
  } else if (type.value == "video") {
    delVideoComment(parent_id.value);
  } else {
    delExchangeComment(parent_id.value);
  }
  showModal.value = false;
};

const toggleTop = () => {
  if (type.value == "article") {
    is_top.value
      ? cancelTopArticleComment(parent_id.value)
      : topArticleComment(parent_id.value);
  } else if (type.value == "video") {
    is_top.value
      ? cancelTopVideoComment(parent_id.value)
      : topVideoComment(parent_id.value);
  } else {
    is_top.value
      ? cancelTopExchangeComment(parent_id.value)
      : topExchangeComment(parent_id.value);
  }
};
const sendComment = throttle(() => {
  if (!content.value) {
    uni.showToast({
      icon: "none",
      title: "请输入评论内容",
    });
    return false;
  }
  const postData = {
    content:
      level.value == 3
        ? "回复" + reply_name.value + "：" + content.value
        : content.value,
  };
  if (imgList.value.length > 0) {
    postData.comment_image = imgList.value[0];
  }
  if (parent_id.value !== null) {
    postData.parent_id = parent_id.value;
  }
  if (root_id.value !== null) {
    postData.root_id = root_id.value;
  }
  if (type.value == "article") {
    addArticleComment(id.value, postData);
  } else if (type.value == "video") {
    addVideoComment(id.value, postData);
  } else {
    addExchangeComment(id.value, postData);
  }
});
const formatHtml = (val) => {
  if (/^回复.+：/.test(val)) {
    return val.replace(
      /[^回复]([^：]+)/,
      `<font style="color:#3CC7C0">$&</font>`
    );
  }
  return val;
};
const addVote = () => {
  if (!option_id.value) {
    uni.showToast({
      icon: "none",
      title: "请选择投票选项！",
    });
    return false;
  }
  api
    .addVote(id.value, {
      option_id: option_id.value,
    })
    .then((res) => {
      uni.showToast({
        icon: "none",
        title: "投票成功！",
      });
      getExchangeDetail(id.value);
    });
};
const readRecord= async()=>{
  let flag=1;
  if(type.value=='article'){
    flag=1;
  }else if(type.value=='video'){
    flag=2;
}else{
    flag=3;
}

   const res=api.readRecord({
     type:flag,
     id:id.value
     })
	 if(res){
		 if (type.value == "article") {
		   getArticleDetail(id.value);
		 } else if (type.value == "video") {
		   getVideoDetail(id.value);
		 } else {
		   getExchangeDetail(id.value);
		 }
	 }
  }
</script>

<style lang='scss' scoped>
.videobox {
  padding: 20rpx 30rpx;
  .cloumn{
    padding-bottom: 30rpx;
	.stitle{
		font-size: 32rpx;
		font-weight: bold;
	}
  }
  :deep(.video) {
    display: flex;
    justify-content: center;
  }
  .con {
    :deep(.img) {
      width: 100%;
    }
  }
}
.zanboxpop {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .zanwraper {
    width: 630rpx;
    margin: 0 auto;
    padding-bottom: 50rpx;
    background: #f5f6f9;
    border-radius: 16rpx;
    .title {
      margin-top: 48rpx;
      text-align: center;
      font-weight: 500;
      font-size: 36rpx;
      color: rgba(0, 0, 0, 0.85);
    }
    .content {
      padding: 30rpx 0;
      background: #f5f6f9;
      text-align: center;
	  :deep(.imgstyle){
		  max-width: 100%!important;
	  }
	  :deep(._block){
		  text-align: left!important;
	  }
    }
    .count {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.65);
      .num {
        color: #ff0000;
        font-size: 32rpx;
      }
      .earn {
        font-size: 32rpx;
        color: #3cc7c0;
      }
    }
    .countbox {
      display: flex;
      width: 100%;
      margin: 30rpx 0px 40rpx;
      padding: 0 40rpx;
      justify-content: center;
      box-sizing: border-box;
      .minus {
        flex-shrink: 0;
        margin-left: 10rp;
        width: 90rpx;
        height: 90rpx;
        font-size: 60rpx;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        border-radius: 12rpx;
        border: 2rpx solid #e9e9e9;
      }
      .add {
        flex-shrink: 0;
        width: 90rpx;
        margin-left: 10rpx;
        height: 90rpx;
        font-size: 60rpx;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: #3cc7c0;
        border-radius: 12rpx;
        border: 2rpx solid #3cc7c0;
      }
      :deep(.u-input__content__field-wrapper__field) {
        height: 60rpx;

        font-size: 34rpx !important;
        text-align: center !important;
      }
      :deep(.u-input) {
        background: #f2f2f2;
        width: 200rpx !important;
        flex: none;
      }
      :deep(.u-input--radius) {
        border-radius: 24rrpx;
      }
    }
    .btnbox {
      margin: 0px 40rpx 0px;
      display: flex;
      justify-content: space-between;
      .cancle {
        color: rgba(0, 0, 0, 0.3);
        width: 256rpx;
        height: 88rpx;
        background: #f5f6f9;
        border-radius: 25px;
        border: 2rpx solid rgba(0, 0, 0, 0.15);
        font-weight: 500;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.85);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .ok {
        color: #fff;
        width: 256rpx;
        height: 88rpx;
        background: #3cc7c0;
        border-radius: 25px;
        border: 2rpx solid #3cc7c0;
        font-weight: 500;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.commentPop {
  height: calc(100vh - 400rpx);
  display: flex;
  flex-direction: column;
  .commentScroll {
    flex: 1;
    overflow-y: scroll;
    margin-bottom: 96rpx;
  }
  .bottom {
    border-top: 2rpx solid #efefef;
    height: 96rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    :deep(.u-input__content__field-wrapper__field) {
      height: 50rpx;
    }
    :deep(.u-input) {
      background: #f2f2f2;
    }
    :deep(.u-input--radius) {
      border-radius: 40rpx;
    }
  }
  .title {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    position: relative;
    border-bottom: 2rpx solid #e7e7e7;
    .close {
      position: absolute;
      right: 20rpx;
      top: 30rpx;
    }
  }
  .unit {
    .item {
      margin-top: 12rpx;
      border-bottom: 2rpx solid rgb(231, 231, 231);
    }
  }
}
.dealbox {
  .dealcell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 112rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
    border-bottom: 2rpx solid #efefef;
  }
}
.expand {
  display: flex;
  font-size: 32rpx;
  padding: 12rpx 0;
  color: #3cc7c0;
}
.commentcon {
  .item {
    display: flex;
    padding: 30rpx 35rpx 16rpx;
    .info {
      margin-left: 24rpx;
      flex: 1;
	  
      .user {
        display: flex;
        align-items: center;
        justify-content: space-between;
		.namebox{
			display: flex;
			align-items: center;
			:deep(.u-image) {
			  background: none !important;
			  padding-bottom: 16rpx;
			}
			.selfImg{
				padding-bottom: 6rpx;
			}
			.name {
				margin-right: 6rpx;
			  font-size: 34rpx;
			}
		}
        
        .dot {
          font-size: 32rpx;
		  padding:0 14rpx;
        }
      }
      .question {
        margin-top: 15rpx;
        font-size: 30rpx;
        margin-bottom: 0px;
        line-height: 54rpx;
        color: #333;
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-all;
      }
      .commentImg {
        margin-top: 16rpx;
      }
      .date {
        font-size: 30rpx;
        color: #666666;
        line-height: 34px;
      }
    }
  }
}
.comnum {
  padding: 0 30rpx;
  background: #fff;
  display: flex;
  height: 100rpx;
  align-items: center;
  border-bottom: 1px solid #e7e7e7;
  .imgcon {
    margin-top: 10rpx;
  }
  :deep(.u-image) {
    background: none !important;
  }
  .num {
    margin-left: 10rpx;
    font-size: 32rpx;
  }
}
.content {
  // padding: 30rpx;
  background-color: #fff;
}
.votebox {
  padding: 30rpx;
  background: #fff;
  :deep(.u-radio__label-wrap){
    flex:1;
  }
  :deep(.u-radio){
    padding: 16rpx;
  }
  .group{
    margin-top: 20rpx;
    .row{
      border-radius: 20rpx;
    border: 2rpx solid #B8B8B8;
   
    background: #fff;
     margin-bottom:24rpx;
    }
  }
  .btn {
    margin: 50rpx 40rpx 0;
    height: 92rpx;
    background: #3cc7c0;
    border-radius: 46rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #ffffff;
  }
  .name {
    font-size: 32rpx;
    color: #000000;
	font-weight: bold;
    line-height: 46rpx;
  }
  .title {
    margin-top: 24rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 46rpx;
  }
  .option {
    margin-top: 26rpx;
    .row {
      font-size: 27rpx;
      color: #4b5563;
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      justify-content: space-between;
	  .left{
		  width:80%;
	  }
    }
    .line {
      width: 100%;
      height: 15rpx;
      background: #f3f4f6;
      border-radius: 19rpx;
      overflow: hidden;
      .inner {
        height: 15rpx;
        background: #3cc7c0;
        border-radius: 19rpx;
      }
    }
  }
}
.imgboxshang {
  display: flex;
   margin-left: 8rpx;
  align-items: center;
}
.imgbox {
  margin: 0 30rpx 30rpx;
  .imgunit {
    width: 150rpx;
    height: 150rpx;
    position: relative;
    .close {
      position: absolute;
      top: 0rpx;
      right: 0;
    }
  }
}
.poptitle {
  height: 88rpx;
  border-bottom: 1rpx solid #e7e7e7;
}
.sendbox {
  display: flex;
  justify-content: space-between;
  margin: 0 30rpx 30rpx;
  .left.disabled{
	 :deep(.u-image__image){
		 opacity: 0.5;
	 }
  }
  .btn {
    width: 120rpx;
    height: 58rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3cc7c0;
    font-weight: 400;
    font-size: 30rpx;
    color: #fff;
    border-radius: 12rpx;
  }
}
.wraper {
  margin: 0rpx 12rpx;
}
.desc {
  width:100%;
  overflow-x:hidden;
  padding-bottom: 80rpx;
  :deep(.imgstyle){
	  max-width:100%;
	  position: relative; 
	  left:50%;
	  transform: translateX(-50%);
  }
  :deep(._block){
  		  text-align: left!important;
		  text-indent: 0px!important;
  }
}

.bottom {
  position: fixed;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 40rpx 30rpx;
  align-items: center;
  z-index:999;
  border-top: 2rpx solid #f9fafb;
  background: #fff;
  bottom: 0;

  :deep(.u-image) {
    background: none !important;
  }

  :deep(.placeholderClass) {
    font-size: 30rpx;
    color: #4b5563;
  }

  .right {
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    background: #fff;

    .imgbox {
      margin-left: 20rpx;
    }
  }

  .iptbox {
    flex: 1;
    padding-left: 30rpx;
    background: #f3f4f6;
    border-radius: 38px;
    height: 77rpx;
    display: flex;
	overflow: hidden;
    align-items: center;
    .iptcon{
		position: relative;
		.maskipt{
			position: absolute;
			width:100%;
			height:100%;
			z-index:1
		}
	}
    .ipt {
      margin-left: 15rpx;
    }
  }
}

.bar {
  width: 100%;
  background: #f9fafb;
  height: 20rpx;
}

.box {
  background: #fff;
  /* height: calc(100vh - 220rpx);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch; */
  .title {
    position: relative;
    z-index: 1;
    padding: 35rpx 30rpx 0;
    background: #fff;
    margin-top: -40rpx;
    font-weight: 400;
    font-size: 38rpx;
    color: #111827;
    line-height: 54rpx;
	margin-bottom: 20rpx;
  }

  .info {
    display: flex;
    align-items: center;
     /* #ifdef H5 */
      margin-bottom: 8rpx;
     /* #endif */
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #4b5563;
    line-height: 28rpx;

    :deep(.u-image) {
      margin-top: 8rpx;
    }

    .name {
      margin-left: 15rpx;
    }
  }
}

.deal {
  margin-top: 12rpx;
  padding: 0 30rpx 20rpx;
  display: flex;
  color: #6b7280;
  font-size: 24rpx;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;
  }

  .collect {
    display: flex;
    align-items: center;
  }

  .eyebox {
    width: 160rpx;
    display: flex;
    align-items: center;
  }

  .time {
    display: flex;
    align-items: center;
  }

  .num {
    margin-left: 8rpx;
  }
}
.iconbox{
	margin-top: 5rpx;
}
:deep(._root){
	overflow-x: hidden!important;
}
</style>