<template>
  <z-paging
    ref="paging"
    inside-more
    loading-more-no-more-text="咱也是有底线的！"
    :auto-show-back-to-top="true"
    v-model="dataList"
    @query="queryList"
  >
    <template #top>
      <dNav></dNav>
      <view class="box">
        <view class="title" v-if="type == 'video'">{{ info.video_title }}</view>
        <view class="title" v-else>{{ info.article_title }}</view>
        <view class="content">
          <view class="info">
            <up--image
              :src="headImg"
              mode="widthFix"
              class="headImg"
              width="46rpx"
              height="46rpx"
              radius="50%"
            ></up--image>
            <view class="name"
			v-if="info.author"
              >{{ info.author.doctor_name }} ·
              {{ info.author.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="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">1</view>
            </view>
          </view>
        </view>
        <view class="bar"></view>
        <view class="detail">
          <polyv-player
            id="{{'playerContext'+info.video_no}}"
            playerId="{{'playerId'+info.video_no}}}"
            vid="{{info.video_no}}"
            autoplay="{{false}}"
          >
          </polyv-player>
          <view class="votebox">
             <view class="name">在线投票</view>
             <view class="title">肝胆相照临床病例库肝胆相照临床病例库肝胆</view>
             <view class="options">
               <view class="option">
                <view class="row">
                  <view class="left">治疗有效性</view>
                  <view class="num">0%</view>
                </view>
                <view class="line">
                  <view class="inner" style="width: 10%"></view>
                </view>

               </view>

             </view>
          </view>
        </view>

        <!-- 评论框 -->
        <up-popup
          :zIndex="11"
          :overlayStyle="{ zIndex: 10 }"
          :closeOnClickOverlay="false"
          :show="showCommentDialog"
          :round="10"
          closeable
          mode="bottom"
          @close="close"
          @open="open"
        >
          <view class="poptitle"></view>
          <view class="wraper">
            <up--textarea
              height="200"
              v-model="comment"
              placeholder="请输入评论内容"
            ></up--textarea>
          </view>
          <view class="imgbox">
            <view class="imgunit">
              <up--image
                :src="shangImg"
                radius="6"
                width="150rpx"
                height="150rpx"
                @click="previewImg"
              ></up--image>
              <view class="close">
                <up-icon name="close-circle" color="#666" size="16"></up-icon>
              </view>
            </view>
          </view>
          <view class="sendbox">
            <view class="left"
              ><up--image
                :src="uploadImg"
                mode="widthFix"
                width="40rpx"
                height="77rpx"
                @click="chooseImg"
              ></up--image
            ></view>
            <view class="btn">发送</view>
          </view>
        </up-popup>
        <canvas
          v-if="showCanvas"
          type="2d"
          id="watermarkCanvas"
          style="width: 200px; height: 200px; position: fixed; top: -9999px"
        />
      </view>
    </template>
    <template #bottom>
      <view class="bottom">
        <view class="iptbox">
          <up--image
            :src="chatImg"
            mode="widthFix"
            width="46rpx"
            radius="50%"
          ></up--image>
          <up-input
            @focus="open"
            type="text"
            placeholderClass="placeholderClass"
            placeholder="对病例发表您的看法"
            class="ipt"
          />
        </view>
        <view class="right">
          <up--image
			@click="toggleCollect"
            :src="collectImg"
            mode="widthFix"
            width="38rpx"
          ></up--image>
          <view class="imgboxshang">
            <up--image
              :src="shangImg"
              mode="widthFix"
              width="169rpx"
              height="77rpx"
            ></up--image>
          </view>
        </view>
      </view>
    </template>
    <view class="desc">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="qq">
          {{ index }}
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { reactive, ref } from "vue";
import headImg from "@/static/headImg.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 list from "@/uni_modules/z-paging/components/z-paging/z-paging";
import api from "@/api/api";
import { onLoad } from "@dcloudio/uni-app";
const paging = ref(null);
const dataList = ref([]);
const showCanvas = ref(false);
const showCommentDialog = ref(false);
const canvasWidth = ref(0);
const canvasHeight = ref(0);
const comment = ref("");
const type = ref("");
const info = reactive({});
const getArticleDetail = (id) => {
  api.getArticleDetail(id).then((res) => {
    let result = res.data.data;
    Object.assign(info, result);
  });
};
const getVideoDetail = (id) => {
  api.getVideoDetail(id).then((res) => {
    let result = res.data.data;
    Object.assign(info, result);
  });
};
onLoad((options) => {
  type.value = options.type;
  if (type.value == "article") {
    getArticleDetail(options.id);
  } else {
    getVideoDetail(options.id);
  }
});
const queryList = (pageNo, pageSize) => {
  const params = {
    pageNo: pageNo,
    pageSize: pageSize,
    type: 1,
  };
  // 此处请求仅为演示，请替换为自己项目中的请求
  api
    .queryList(params)
    .then((res) => {
      // console.log(res)
      // dataList.value=dataList.value.concat(res.data.list)
      // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
      paging.value.complete(res.data.list);
    })
    .catch((res) => {
      // 如果请求失败写paging.value.complete(false);
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false);
    });
};
const open = () => {
  showCommentDialog.value = true;
  console.log("open");
};
const close = () => {
  showCommentDialog.value = false;
  console.log("close");
};
const previewImg = () => {
  uni.previewImage({
    current: "https://example.com/image1.jpg",
    urls: ["https://example.com/image1.jpg", "https://example.com/image2.jpg"],
  });
};
const fillTextToImgWx = (base64) => {
  let maskText = "@zjd嗯嗯嗯嗯嗯嗯3评论暂时真实的334";

  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);
        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 = 3;
        uni.getImageInfo({
          src: base64,
          success: (imageRes) => {
            // 设置canvas宽高
            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 = 10; //this.data.posXmargin // 自定义离左/右边的距离
              let posYmargin = 10; // 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.fillStyle = fontColor;
                  ctx.storkStyle = "black";
                  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 = "black";
                  ctx.strokeWidth = strokeWidth;
                  ctx.fillStyle = "#fff";
                  ctx.fillText(maskText, rt_x, rt_y);
                  ctx.restore();
                  ctx.save();
                  break;
                case 3: //右下角
                  let rb_x =
                    imgWidth - textWidth * 2.9 - posXmargin <= 0
                      ? 10
                      : imgWidth - textWidth * 2.9 - posXmargin;
                  let rb_y = imgHeight - posYmargin;
                  ctx.font = font;
                  ctx.fillStyle = fontColor;
                  ctx.strokeStyle = "black";
                  ctx.strokeWidth = strokeWidth;
                  ctx.fillStyle = "#fff";
                  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] });
                  showCanvas.value = false;
                },
                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 = "@zjd";
      const spaceH = remFontSize * 0.1;
      let randomNumber = 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) => {
  console.log(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]);
    img = await fillTextToImg(imgBase64);
    console.log(img);
    uni.previewImage({ urls: [img] });
    /* #endif */
    /* #ifdef MP-WEIXIN */
    let imgpromise = await fillTextToImgWx(localIds[i]);

    console.log(22222);
    //console.log(imgBase64);
    /* #endif */

    //let imgFile = base64ToFile(img, new Date().getTime() + ".jpg");
    // console.log(imgFile)
    //promiseFun.push(uploadImg(imgFile));
  }
  Promise.all(promiseFun).then((res) => {
    uni.showToast({
      duration: 1000,
      message: "上传成功",
    });
  });
};
// 图片转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) {
      console.log(333);
      readImages(res.tempFilePaths);
    },
  });
};
const collectArticle=(id)=>{
	api.collectArticle(id).then((res)=>{
		uni.showToast({
			icon:'none',
			title:'收藏成功'
		})
	})
}
const cancelCollectArticle=(id)=>{
	api.cancelCollectArticle(id).then((res)=>{
		uni.showToast({
			icon:'none',
			title:'已取消收藏'
		})
	})
}
const collectVideo=(id)=>{
	api.collectVideo(id).then((res)=>{
		uni.showToast({
			icon:'none',
			title:'收藏成功'
		})
	})
}
const cancelCollectVideo=(id)=>{
	api.cancelCollectVideo(id).then((res)=>{
		uni.showToast({
			icon:'none',
			title:'已取消收藏'
		})
	})
}
const toggleCollect=()=>{
	if(type.value=='video'){
		info.is_collect?cancelCollectVideo():collectVideo()
	}else{
		info.is_collect?cancelCollectArticle():collectArticle()
	}
}
</script>

<style lang='scss' scoped>
.votebox{
  padding:30rpx;
  background:#fff;
  .name{
    font-size: 36rpx;
    color: #000000;
    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;
      justify-content: space-between;
    }
    .line{
      width: 100%;
     height: 15rpx;
      background: #F3F4F6;
       border-radius: 19rpx;
       overflow: hidden;
       .inner{
         height: 15rpx;
         background: #3CC7C0;
         border-radius: 19rpx;
       }
    }
    
  }
}
.imgboxshang {
  display: flex;
  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;
  .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 {
  padding-bottom: 80rpx;
}

.bottom {
  position: fixed;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 40rpx 30rpx;
  align-items: center;
  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;
    align-items: center;

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

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

.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;
  }

  .info {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #4b5563;
    line-height: 38rpx;

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

    .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;
  }
}
</style>