<template>
  <div class="upage">
    <view class="navbox">
      <view class="bg"></view>
      <view class="namebox">
        <view class="back" @click="alertSave">
          <u-icon name="arrow-left" color="#000" size="24"></u-icon>
        </view>
        <!-- <view class="logo">logo</view> -->
        <view class="name">发病例交流帖</view>
      </view>
    </view>
    <!-- <backNav :navName="'发病例交流帖'"></backNav> -->
    <view class="form">
      <view class="textbox">
        <up--textarea
          autoHeight
          v-model="form.exchange_title"
          placeholder="输入标题，可包含患者信息、主诉"
        ></up--textarea>
      </view>
      <view class="row">
        <view class="left"> 病例信息 </view>
        <view class="right" @click="clearMuBan">
          <u-icon name="trash" color="#6B7280" size="18"></u-icon>
          清除模板
        </view>
      </view>
      <view class="textcon page-editor-container" id="editor">
        <sv-editor
          placeholder="患者基本情况，检查结果，诊疗图片或视频"
          eid="editor-id"
          @ready="ready"
          @focus="focusInfo"
          @blur="blurInfo"
        ></sv-editor>
        <!-- <editor
          id="editor"
          placeholder="写点什么吧~~"
          show-img-resize
          show-img-toolbar
          show-img-size
          @ready="ready"
          @focus="OnFocus"
          @statuschange="statuschange"
        ></editor> -->
      </view>
      <view class="textcon" style="border: none">
        <view class="row">
          <view class="left">
            总结与讨论 <text class="tip">(可不填)</text>
          </view>
        </view>
        <view class="textcell">
          <view class="iptbox" id="editorRes">
            <sv-editor
              placeholder="分享经验和心得，如：诊断与鉴别诊断易错点，治疗过程难点，病例的相关知识总结及讨论等"
              eid="editorResult"
              @ready="readyResult"
              @focus="focusResult"
              @blur="focusResult"
            ></sv-editor>
          </view>
        </view>
      </view>
      <view class="textcon" style="border: none">
        <view class="sickbox">
          <view class="sick" v-for="(item,index) in labelList" :key="item.app_iden">
            {{ item.label_name }}
            <view class="del" @click="delLabel(index)">
              <up-icon name="close-circle" color="#3CC7C0" size="20"></up-icon>
            </view>
          </view>
          <view class="add" @click="openLabelPop">
            <up-icon name="plus" color="#3CC7C0" size="16"></up-icon>
            添加疾病
          </view>
        </view>

        <!-- <view class="imgbox">
            <view class="imgcell">
                <up--image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></up--image>
            </view>

        </view> -->
      </view>
    </view>
    <view class="bottom">
      <view class="toolbox">
        <view
          class="cell"
          @click="insertImage"
          :class="{ active: !isFocusInfo && !isFocusResult }"
        >
          <up--image
            :src="photoImg"
            class="headImg"
            width="32rpx"
            height="32rpx"
          ></up--image>
          <view class="name">添加图片</view>
        </view>
        <view
          class="cell"
          @click="insertVideo"
          :class="{ active: !isFocusInfo && !isFocusResult }"
        >
          <up--image
            :src="videoImg"
            class="headImg"
            width="32rpx"
            height="32rpx"
          ></up--image>
          <view class="name">添加视频</view>
        </view>
        <view
          class="cell"
          :class="{ active: !isFocusInfo }"
          @click="alertTitle"
        >
          <up--image
            :src="addImg"
            class="headImg"
            width="32rpx"
            height="32rpx"
          ></up--image>
          <view class="name">添加小标题</view>
        </view>
      </view>
      <view class="bottombtn">
        <view class="left">
          <view class="draft" @click="showDraft = true">草稿箱</view>
          <view class="vote" @click="showVote = true">
            投票
            <up--image
              :src="voteImg"
              class="headImg"
              width="47rpx"
              height="47rpx"
            ></up--image>
          </view>
        </view>
        <view class="right" @click="publish">发布</view>
      </view>
    </view>

    <up-popup
      :round="10"
      :show="showVote"
      mode="bottom"
      @close="closeVote"
      @open="openVote"
    >
      <view class="votepop">
        <view class="titlebox">
          <view class="left" @click="closeVote">取消</view>
          <view class="right" @click="saveVote">保存</view>
        </view>
        <view class="votecon">
          <view class="titlebox">
            <view class="title">投票标题</view>
            <view class="desc">(最多20字)</view>
          </view>
          <view class="row first">
            <up-input
              placeholder="请输入投票标题"
              border="surround"
              v-model="voteData.vote_title"
              clearable
            ></up-input>
          </view>
          <view
            class="row"
            v-for="(item, index) in voteData.case_exchange_vote_option"
            :key="index"
          >
            <up-input
              placeholder="输入选项，建议少于16个字"
              border="surround"
              v-model="item.option_value"
              clearable
            ></up-input>
            <view class="iconbox" @click="delOption(index)">
              <u-icon name="minus-circle" color="red" size="28"></u-icon>
            </view>
          </view>
          <!-- <view class="row">
            <up-input
              placeholder="输入选项，建议少于16个字"
              border="surround"
              v-model="value"
              clearable
            ></up-input>
            
          </view>
          <view class="row">
            <up-input
              placeholder="输入选项，建议少于16个字"
              border="surround"
              v-model="value"
              clearable
            ></up-input>
          </view> -->

          <view class="add" @click="addOption">
            <up-icon name="plus" color="#4B5563" size="18"></up-icon>
            <view class="desc">添加选项</view>
          </view>
          <view class="expire">
            <view class="name">有效期（天）</view>
            <view class="right">
              <view class="minus" @click="changeDay('minus')">-</view>
              <view class="day">{{ voteData.valid_day }}</view>
              <view class="plus" @click="changeDay('plus')">+</view>
            </view>
          </view>
          <view class="tips"
            >友情提醒：为保证投票结果准确性，帖子发布后投票无法修改</view
          >
        </view>
        <view class="confirm" @click="saveVote">确认</view>
        <view class="del" @click="clearVote">删除投票</view>
      </view>
    </up-popup>

    <up-popup
      :round="10"
      zIndex="9"
      :show="showDraft"
      mode="bottom"
      @close="closeDraft"
      @open="openDraft"
    >
      <view class="draftpop">
        <view class="titlebox"
          >草稿箱
          <view class="close" @click="closeDraft"
            ><up-icon name="close" color="#4B5563" size="20"></up-icon
          ></view>
        </view>
        <view class="draftlist">
          <view
            class="cell"
            v-for="(item, index) in draftList"
            :key="item.draft_id"
          >
            <view class="title">{{
              item.exchange_title ? item.exchange_title : "无标题"
            }}</view>

            <view class="row" v-if="item.exchange_content">
              <view class="smalltitle">病例信息</view>
              <view
                class="con ellipsis-two-lines"
                v-html="item.exchange_content"
              ></view>
            </view>
            <view class="row" v-else-if="item.exchange_summary">
              <view class="smalltitle" 
                >总结与讨论</view
              >
              <view
                class="con ellipsis-two-lines"
                v-if="item.exchange_summary"
                v-html="item.exchange_summary"
              ></view>
            </view>

            <view
              class="sickbox"
              v-else-if="item.exchange_label && item.exchange_label.length > 0"
            >
              <view class="smalltitle" v-if="item.exchange_summary"
                >疾病标签</view
              >
              <view
                class="sick"
                v-for="cell in item.exchange_label"
                :key="cell.label_name"
                >{{ cell.label_name }}</view
              >
            </view>
            <view class="row" v-else-if="item.exchange_vote">
              <view class="smalltitle">投票</view>
              <view class="con ellipsis-two-lines">{{
                item.exchange_vote.vote_title
              }}</view>
            </view>
            <view class="deal">
              <view class="time">编辑于{{ fromatDay(item.updated_at) }}</view>
              <view class="right">
                <view class="del" @click="willDelDraft(item.draft_id)"
                  ><up-icon name="trash" color="#4B5563" size="16"></up-icon
                  >删除</view
                >
                <view class="edit" @click="editDraft(index)"
                  ><up-icon name="edit-pen" color="#fff" size="17"></up-icon
                  >编辑</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </up-popup>
  </div>
  <up-popup
    :round="10"
    zIndex="9"
    :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>
  <up-overlay :show="showModal" mask-click-able>
    <view class="zanboxpop">
      <view class="zanwraper">
        <view class="title">提示</view>
        <view class="content" v-if="delType == 'delDraft'">
          是否删除该草稿？
        </view>
        <view class="content" v-else-if="delType == 'saveDraft'">
          是否保存该草稿？
        </view>
        <view class="btnbox">
          <view class="cancle" @click="cancelDel">取消</view>
          <view class="ok" @click="confirmDel">确定</view>
        </view>
      </view>
    </view>
  </up-overlay>
  <up-popup
    :round="10"
    zIndex="9"
    :show="showCase"
    mode="bottom"
    @close="closeCase"
  >
    <view class="votepop casepop">
      <view class="titlebox">
        <view class="left" @click="showCase = false">取消</view>
        <view class="left continue" @click="continueCase" v-show="level != 3"
          >继续选择</view
        >
        <view class="right" @click="confirmCase">确定</view>
      </view>
      <view class="casecon">
        <view v-show="level == 1" >
          <up-radio-group
            v-model="caseValue1"
            
            iconPlacement="right"
            placement="column"
          >
            <view
              class="column"
              v-for="item in labelObj.list1"
              :key="item.app_iden"
            >
              <up-radio
                activeColor="#3CC7C0 "
                :label="item.label_name"
                :name="item.app_iden"
              ></up-radio>
            </view>
          </up-radio-group>
        </view>
        <view v-show="level == 2" >
          <up-radio-group
            v-model="caseValue2"
            iconPlacement="right"
            placement="column"
          >
            <view
              class="column"
              v-for="item in labelObj.list2"
              :key="item.app_iden"
            >
              <up-radio
                activeColor="#3CC7C0 "
                :label="item.label_name"
                :name="item.app_iden"
              ></up-radio>
            </view>
          </up-radio-group>
        </view>
        <view v-show="level == 3" >
          <up-radio-group
            v-model="caseValue3"
           
            iconPlacement="right"
            placement="column"
          >
            <view
              class="column"
              v-for="item in labelObj.list2"
              :key="item.app_iden"
            >
              <up-radio
                activeColor="#3CC7C0 "
                :label="item.label_name"
                :name="item.app_iden"
              ></up-radio>
            </view>
          </up-radio-group>
        </view>
      </view>
    </view>
  </up-popup>
</template>
<script setup>
import { reactive, ref } from "vue";
import backNav from "@/components/backNav/backNav";
import photoImg from "@/static/photo.png";
import addImg from "@/static/add.png";
import videoImg from "@/static/videoicon.png";
import voteImg from "@/static/vote.png";
import api from "@/api/api";
import dayjs from "dayjs";
import { onLoad } from "@dcloudio/uni-app";
import svEditor from "@/uni_modules/sv-editor/components/sv-editor/sv-editor.vue";
//import SvEditorToolbar from "@/uni_modules/sv-editor/components/sv-editor/sv-editor-toolbar.vue";
import {
  addImage,
  addVideo,
  addText,
} from "@/uni_modules/sv-editor/components/common/utils.js";
const isLock = ref(false);
const isFlag = ref(false);
const delId = ref("");
const showModal = ref(false);
const delType = ref("delDraft"); //delDraft saveDraft
const showCase = ref(false);
const caseValue1 = ref("");
const caseValue2 = ref("");
const caseValue3 = ref("");
const level = ref(1);
const isPublish = ref(false);
const labelObj = reactive({
  list1: [],
  list2: [],
  list3: [],
});
const form = reactive({
  exchange_title: "",
  exchange_content: "",
  exchange_summary: "",
  case_exchange_vote: {},
  case_exchange_label: [],
});
const voteData = reactive({
  vote_title: "",
  valid_day: 7,
  case_exchange_vote_option: [
    {
      option_value: "",
    },
  ],
});
const value = ref("");

const showVote = ref(false);
const showDraft = ref(false);
const showTitle = ref(false);
const draftList = ref([]);
const imgList = ref([]);
const videoList = ref([]);
const editorCtx = ref(null);
const editorCtxResult = ref(null);
const isFocusInfo = ref(true);
const isFocusResult = ref(false);
const labelList = ref([]);
const goBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const closeCase = () => {
  showCase.value = false;
};
const addOption = () => {
  voteData.case_exchange_vote_option.push({
    option_value: "",
  });
};
const delOption = (index) => {
  voteData.case_exchange_vote_option.splice(index, 1);
};
const changeDay = (type) => {
  if (type === "minus") {
    if (voteData.valid_day <= 1) return;
    voteData.valid_day--;
  } else if (type === "plus") {
    voteData.valid_day++;
  }
};
const clearVote = () => {
  voteData.vote_title = "";
  voteData.case_exchange_vote_option = [
    {
      option_value: "",
    },
  ];
  voteData.valid_day = 7;
  form.case_exchange_vote.vote_title = "";
  form.case_exchange_vote.case_exchange_vote_option = [
    {
      option_value: "",
    },
  ];
  form.case_exchange_vote.valid_day = 7;
};
const saveVote = () => {
  console.log(voteData);
  if (voteData.vote_title == "") {
    uni.showToast({
      title: "请输入投票标题",
      icon: "none",
    });
    return false;
  }
  if (voteData.vote_title.length > 20) {
    uni.showToast({
      title: "投票标题不能超过20个字符",
      icon: "none",
    });
    return false;
  }
  if (voteData.case_exchange_vote_option.length == 0) {
    uni.showToast({
      title: "请添加投票选项",
      icon: "none",
    });
    return false;
  }

  for (let i = 0; i < voteData.case_exchange_vote_option.length; i++) {
    if (voteData.case_exchange_vote_option[i].option_value == "") {
      uni.showToast({
        title: "投票选项不能为空",
        icon: "none",
      });
      return false;
    }
    if (voteData.case_exchange_vote_option[i].option_value.length > 16) {
      uni.showToast({
        title: "第" + (i + 1) + "个投票选项超过16个字符",
        icon: "none",
      });
      return false;
    }
  }
  if (voteData.case_exchange_vote_option.length < 2) {
    uni.showToast({
      title: "至少添加两个选项",
      icon: "none",
    });
    return false;
  }
  Object.assign(form.case_exchange_vote, voteData);
  showVote.value = false;
};
const fromatDay = (value) => {
  var date = new Date();
  var year = date.getFullYear();
  let Y = dayjs().format("YYYY");
  if (year == Y) {
    return dayjs(value).format("MM-DD");
  } else {
    return dayjs(value).format("YYYY-MM-DD");
  }
};

const ready = (e) => {
  editorCtx.value = e;

  let html =
    "<p>【患者信息】：</p><br/><p>【主诉】：</p><br/><p>【现病史及既往史】：</p><br/><p>【检查】：</p><br/><p>【临床诊断】：</p><br/><p>【治疗经过及结果】：</p><br/>";
  editorCtx.value.initHtml(html);
};
const readyResult = (e) => {
  editorCtxResult.value = e;
  //editorCtxResult.value.initHtml("")
};
const clearMuBan = () => {
  console.log("清空模板");

  editorCtx.value.initHtml("");
};
const focusInfo = () => {
  isFocusInfo.value = true;
};
const blurInfo = () => {
 setTimeout(() => {
  isFocusInfo.value = false;
}, 2000)
};
const focusResult = () => {
  isFocusResult.value = true;
};
const blurResult = () => {
  isFocusResult.value = false;
};
const closeVote = () => {
  showVote.value = false;
};

const openVote = () => {
  showVote.value = true;
};
const closeDraft = () => {
  showDraft.value = false;
};

const openDraft = () => {
  showDraft.value = true;
};
const closeTitle = () => {
  showTitle.value = false;
};
const openTitle = () => {
  showTitle.value = true;
};
const alertTitle = () => {
  if (isFocusInfo.value) {
     showTitle.value = true;
  }
};
const pFun = (files) => {
  uni.showLoading({
    title: "正在上传图片...",
    mask: true,
  });

  let promiseFun = [];
  for (let i = 0; i < files.length; i++) {
    promiseFun.push(handleUpload(files[i]));
  }
  Promise.all(promiseFun).then((res) => {
    uni.hideLoading();

    // setTimeout(()=>{
    //    console.log(imgList.value.length)
    //   addImage(imgList.value)
    // })
  });
};

const saveDraft = async () => {
  if (isLock.value) return false;
  isLock.value = true;
  const res = await editorCtx.value.getLastContent();
   form.exchange_content = res.html;
  
  const resResult = await editorCtx.value.getLastContent();
  form.exchange_summary = resResult.html;
   if(labelList.value.length>0){
    form.case_exchange_label = labelList.value;
   }
  api.saveDraft(form).then((res) => {
    isLock.value = false;
    uni.showToast({
      title: "保存成功",
      icon: "none",
    });
    getDraftList();
  });
};
const editDraft = (index) => {
  let draft = draftList.value[index];
  let {
    exchange_content,
    exchange_title,
    exchange_label,
    exchange_summary,
    exchange_vote,
  } = draft;
  editorCtx.value.initHtml(exchange_content);
  form.exchange_content = exchange_content;
  form.exchange_title = exchange_title;
  form.case_exchange_label = exchange_label;
  labelList.value = exchange_label;
  form.exchange_summary = exchange_summary;
  form.case_exchange_vote = exchange_vote;
  editorCtxResult.value.initHtml(exchange_content);
  Object.assign(voteData, draft);
  showDraft.value = false;
};
const willDelDraft = (id) => {
  delId.value = id;
  delType.value = "delDraft";
  showModal.value = true;
};
const confirmDel = () => {
  showModal.value = false;
  if (delType.value == "delDraft") {
    delDraft(delId.value);
  } else if (delType.value == "saveDraft") {
    saveDraft();
  }
};
const cancelDel = () => {
  showModal.value = false;
  if (delType.value == "saveDraft") {
    goBack();
  }
};
const delDraft = (id) => {
  api.delDraft(id).then((res) => {
    uni.showToast({
      title: "删除成功",
      icon: "none",
    });
  });
  getDraftList();
};
const alertSave = async () => {
  if(isPublish.value){
    goBack()
  }else{
       const res = await editorCtx.value.getLastContent();
  //let html = editorCtx.value.exportHtml(res.html);
  //const initInfo=  "<p>【患者信息】：</p><br/><p>【主诉】：</p><br/><p>【现病史及既往史】：</p><br/><p>【检查】：</p><br/><p>【临床诊断】：</p><br/><p>【治疗经过及结果】：</p><br/>";
  const resContent = await editorCtxResult.value.getLastContent();
  //let reshtml = editorCtxResult.value.exportHtml(resContent.html);
  if (
    form.exchange_title ||
    res.html ||
    resContent.html ||
    (form.case_exchange_vote &&
      form.case_exchange_vote.vote_title &&
      form.case_exchange_label &&
      form.case_exchange_label.length > 0)
  ) {
    delType.value = "saveDraft";
    showModal.value = true;
  } else {
    goBack();
  }
  }
 
};
const publish = async () => {
  const initInfo =
    "<p>【患者信息】：</p><br/><p>【主诉】：</p><br/><p>【现病史及既往史】：</p><br/><p>【检查】：</p><br/><p>【临床诊断】：</p><br/><p>【治疗经过及结果】：</p><br/>";
  if (form.exchange_title == "") {
    uni.showToast({
      title: "请输入标题",
      icon: "none",
    });
    return false;
  }
  const res = await editorCtx.value.getLastContent();
  let html = editorCtx.value.exportHtml(res.html);
  if (html == initInfo) {
    uni.showToast({
      title: "请编辑病例信息",
      icon: "none",
    });
    return false;
  }
  if (!(form.case_exchange_vote && form.case_exchange_vote.vote_title)) {
    delete form.case_exchange_vote;
  }
  if (
    !form.case_exchange_label ||
    (form.case_exchange_label && form.case_exchange_label.length == 0)
  ) {
    delete form.case_exchange_label;
  }
  form.case_exchange_label = labelList.value;
  if (isLock.value) return false;
  isFlag.value = true;
  form.exchange_content = html;
  const resContent = await editorCtxResult.value.getLastContent();
  let reshtml = editorCtxResult.value.exportHtml(resContent.html);
  form.exchange_summary = reshtml=="<p><br></p>"?'':reshtml;
  api.addExchange(form).then((res) => {
    uni.showToast({
      title: "发布成功",
      icon: "none",
      duration: 2000,
    });
    isFlag.value = false;
    isPublish.value = true;
	uni.navigateBack()
  });
};
const handleUpload = (file) => {
  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(file);
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            url: host, // 仅为示例，非真实的接口地址
            filePath: file,
            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 insertWord = (word) => {
  addText(word);
  showTitle.value = false;
};
const insertAllWord = () => {
  let word = [
    "患者信息",
    "主诉",
    "现病史及既往史：",
    "检查",
    "临床诊断",
    "治疗经过及结果",
  ];
  word.forEach((item) => {
    addText(item);
  });
  showTitle.value = false;
};
const generateRandomNumber = () => {
  let randomNumber = Math.floor(1000 + Math.random() * 9000);
  return randomNumber;
};
const getImageFormat = (imageUrl) => {
  console.log(imageUrl);
  const lastDotIndex = imageUrl.lastIndexOf(".");
  if (lastDotIndex !== -1) {
    return imageUrl.substring(lastDotIndex + 1);
  }
  return "unknown";
};
const insertImage = (file) => {
  if (!(!isFocusInfo.value && !isFocusResult.value)) {
    uni.chooseImage({
      count: 9, //默认9
      sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ["album"], //从相册选择
      extension: [".jpg", ".png", ".jpeg"],
      success: function (res) {
        pFun(res.tempFilePaths);
      },
    });
  }
};
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 HandleAddVideo = async (file) => {
  uni.showLoading({
    title: "正在上传视频...",
    mask: true,
  });
  const videos = await addVideo(async (editorCtx) => {
    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;
                    console.log(editorCtx);
                    let imgUrl =
                      "https://cn.bing.com//th?id=OHR.FlamingosNamibia_ZH-CN3639748956_1920x1080.jpg";
                    const fileThumbnail = await editorCtx.createCoverThumbnail(
                      imgUrl
                    );
                    resolve([
                      {
                        videoUrl: url,
                        videoImg: fileThumbnail,
                      },
                    ]);
                  }
                },
                fail: (err) => {
                  console.log(err);
                },
              });
            });
          }
        });
    });
  });
  if (videos) {
    uni.showLoading();
    uni.showToast({ title: "添加视频成功", icon: "success" });
  } else {
    uni.showToast({ title: "添加视频失败", icon: "error" });
  }
};
const getDraftList = () => {
  api.getDraftList().then((res) => {
    draftList.value = res.data.data.data;
  });
};
const getCaseLabel = (lev,pid=0) => {
  api.getCaseLabel({
    pid:pid
  }).then((res) => {
    if (lev == 1) {
      labelObj.list1 = res.data.data;
    } else if (lev == 2) {
      labelObj.list2 = res.data.data;
    } else if (lev == 3) {
      labelObj.list3 = res.data.data;
    }
    level.value = lev;
  });
};
const confirmCase = () => {
  if (level.value == 1 && caseValue1.value == "") {
    uni.showToast({ title: "请选择疾病", icon: "none" });
    return false;
  }
  if (level.value == 2 && caseValue2.value == "") {
    uni.showToast({ title: "请选择疾病", icon: "none" });
    return false;
  }
  if (level.value == 3 && caseValue3.value == "") {
    uni.showToast({ title: "请选择疾病", icon: "none" });
    return false;
  }
  showCase.value = false;
  if(level.value == 1){
    let label = labelObj.list1.find((item) => item.app_iden == caseValue1.value);
    console.log(label);
      labelList.value.push({
            app_iden:label.app_iden,
            label_name:label.label_name,
      });
  }
  if(level.value == 2 ){
    let label = labelObj.list2.find((item) => item.app_iden == caseValue2.value);
      labelList.value.push({
            app_iden:label.app_iden,
            label_name:label.label_name,
      });
  }
  if(level.value == 3 ){
    let label = labelObj.list3.find((item) => item.app_iden == caseValue3.value);
      labelList.value.push({
            app_iden:label.app_iden,
            label_name:label.label_name,
      });
  }
  //去重
  labelList.value=labelList.value.filter((item, index) => labelList.value.findIndex(i => i.app_iden === item.app_iden) === index);
   caseValue1.value = "";
   caseValue2.value = "";
   caseValue3.value = "";

};
const continueCase = () => {
  if (level.value == 1 && caseValue1.value == "") {
    uni.showToast({ title: "请选择疾病", icon: "none" });
    return false;
  }
 
  if (level.value == 2 && caseValue2.value == "") {
    uni.showToast({ title: "请选择疾病", icon: "none" });
    return false;
  }
  if (level.value == 3 && caseValue3.value == "") {
    uni.showToast({ title: "请选择疾病", icon: "none" });
    return false;
  }
  if(level.value == 1 ){
    getCaseLabel(2,caseValue1.value);
  }else if(level.value == 2 ){
    getCaseLabel(3,caseValue2.value);
  }

};
const delLabel = (index) => {
  labelList.value.splice(index, 1);
};
const openLabelPop=()=>{
    showCase.value=true;
    getCaseLabel(1,0);
}
onLoad(() => {
  getDraftList();
 
});

// const previewImg = () => {
//   uni.previewImage({
//     current: "https://example.com/image1.jpg",
//     urls: ["https://example.com/image1.jpg", "https://example.com/image2.jpg"],
//   });
// };
</script>

<style lang='scss' scoped>
.casepop{
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 750rpx);
  .continue{
    color: #2878ff !important;
  }
}
.casecon {
  flex:1;
  overflow-y: scroll;
   padding-top: 10rpx;
   min-height: 350rpx;
 
  .column {
    padding: 0 30rpx;
    border-bottom: 2rpx solid #e5e7eb;
  }
}
.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;
      }
    }
  }
}

.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;
    }
    .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;
      }
    }
  }
}
.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;
    }
  }
}
#editor {
  padding: 0 30rpx;
  height: calc(100vh - 600rpx);
}
#editorRes {
  min-height: 300rpx;
  :deep(.sv-editor-wrapper) {
    flex: 1;
    min-height: 300rpx;
  }
}
.myVideo {
  width: 100%;
  border-radius: 15rpx;
}
.imgbox {
  margin: 0 30rpx 30rpx;
  position: relative;
  .close {
    position: absolute;
    top: 0rpx;
    right: 0;
    z-index: 9999;
  }
  .imgunit {
    width: 150rpx;
    height: 150rpx;
    position: relative;
    .close {
      position: absolute;
      top: 0rpx;
      right: 0;
    }
  }
}
.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;
        }
      }
    }
  }
}
.expire {
  margin-top: 46rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .name {
    font-size: 31rpx;
    color: #111827;
  }
  .right {
    display: flex;
    align-items: center;
    .day {
      min-width: 50rpx;
      text-align: center;
    }
    .minus {
      width: 62rpx;
      height: 62rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      border-radius: 50%;
      font-size: 50rpx;
    }
    .plus {
      display: flex;
      align-items: center;
      font-size: 50rpx;
      justify-content: center;
      width: 62rpx;
      height: 62rpx;
      background: #f5f5f5;
      border-radius: 50%;
    }
  }
}
.row {
  padding: 0 30rpx;
  margin-bottom: 23rpx;

  :deep(.u-input) {
    background: #f5f5f5;
  }
  :deep(.u-input--radius) {
    border-radius: 15rpx;
  }
  :deep(.u-input__content__field-wrapper__field) {
    height: 92rpx;
  }
}
.first {
  margin-bottom: 47rpx;
}
.votepop {
  .confirm {
    margin: 39rpx 30rpx 0;
    height: 92rpx;
    background: #3cc7c0;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    font-size: 31rpx;
    color: #ffffff;
    justify-content: center;
  }
  .del {
    margin: 30rpx 30rpx 30rpx;
    height: 92rpx;
    background: #fff;
    border-radius: 15rpx;
    font-size: 31rpx;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tips {
    margin-top: 30rpx;
    font-size: 27rpx;
    color: #9ca3af;
    line-height: 38rpx;
    padding: 0 30rpx;
  }
  .add {
    margin: 0 30rpx;
    display: flex;
    align-items: center;
    height: 92rpx;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 15rpx;
    font-size: 31rpx;
    color: #4b5563;
    .desc {
      margin-left: 10rpx;
    }
  }
  .titlebox {
    padding: 0 30rpx;
    height: 86rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #f3f4f6;
    .left {
      font-size: 31rpx;
      color: #4b5563;
    }
    .right {
      font-size: 31rpx;
      color: #3cc7c0;
    }
  }
  .votecon {
    max-height: calc(100vh - 530rpx);
    overflow-y: scroll;
    .row {
      display: flex;
      align-items: center;
      .iconbox {
        margin-left: 15rpx;
        align-items: center;
      }
    }
    .titlebox {
      border: none;
      margin: 30rpx 0 20rpx;
      .title {
        font-size: 31rpx;
        color: #111827;
      }
      .desc {
        font-size: 27rpx;
        color: #9ca3af;
      }
    }
  }
}
.upage {
  display: flex;
  flex-direction: column;
  height: 100vh;
  :deep(.u-image) {
    background: transparent !important;
  }
}
.toolbox {
  border-top: 2rpx solid #f3f4f6;
  padding: 22rpx 30rpx;
  display: flex;
  align-items: center;
  .cell {
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    .name {
      font-size: 25rpx;
      margin-left: 4rpx;
      color: #4b5563;
    }
  }
  .cell.active {
    opacity: 0.65;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 3;
  background: #ffffff;

  .bottombtn {
    display: flex;
    align-items: center;
    border-top: 2rpx solid #e5e7eb;
    height: 133rpx;
  }

  .right {
    margin-right: 30rpx;
    flex: 1;
    margin-left: 32rpx;
    height: 86rpx;
    background: #3cc7c0;
    border-radius: 23rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31rpx;
    color: #ffffff;
  }
  .left {
    margin-left: 30rpx;
    display: flex;
    .draft {
      width: 162rpx;
      height: 86rpx;
      background: rgba(0, 0, 0, 0);
      border-radius: 16rpx;
      border: 2rpx solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vote {
      margin-left: 25rpx;
      width: 162rpx;
      height: 86rpx;
      background: rgba(0, 0, 0, 0);
      border-radius: 16rpx;
      border: 2rpx solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.form {
  height: calc(100vh - 133rpx);
  margin: -20rpx 0rpx 134rpx;
  padding-bottom: 80rpx;
  overflow-y: scroll;

  .sickbox {
    display: flex;
    padding: 25rpx 25rpx 0;
    margin-bottom: 20rpx;
  }
  .add {
    display: flex;
    font-size: 26rpx;
    justify-content: center;
    align-items: center;
    color: #3cc7c0;
    margin-left: 18rpx;
  }
  .sick {
    position: relative;
    padding: 0 60rpx 0 30rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9f9f9;
    border-radius: 40rpx;
    font-size: 25rpx;
    color: #3cc7c0;
    .del {
      position: absolute;
      right: 12rpx;
    }
  }
  .textcon {
    border-bottom: 2rpx solid #f3f4f6;
  }
  .textbox {
    padding: 0 30rpx;
    border-bottom: 2rpx solid #f3f4f6;

    :deep(.u-textarea__field) {
      min-height: 55rpx !important;
    }
  }

  .textcell {
    padding: 0 30rpx;
    margin-top: 25rpx;
    .titlebox {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

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