<template>
  <div class="upage">
    <backNav :navName="'发病例交流帖'"></backNav>
    <view class="form">
      <view class="textbox">
        <up--textarea
          autoHeight
          v-model="form.title"
          placeholder="输入标题，可包含患者信息、主诉"
        ></up--textarea>
      </view>
      <view class="row">
        <view class="left"> 病例信息 </view>
        <view class="right">
          <u-icon name="trash" color="#6B7280" size="18"></u-icon>
          清除模板
        </view>
      </view>
      <view class="textcon">
        <view class="textcell">
          <view class="title">【患者信息】：</view>
          <view class="iptbox">
            <up--textarea
              maxlength="-1"
              autoHeight
              v-model="form.title"
              placeholder="请输入患者信息"
            ></up--textarea>
          </view>
        </view>
        <view class="textcell">
          <view class="title">【主诉】：</view>
          <view class="iptbox">
            <up--textarea
              maxlength="-1"
              autoHeight
              v-model="form.title"
              placeholder="请输入主诉"
            ></up--textarea>
          </view>
        </view>
        <view class="textcell">
          <view class="title">【现病史及既往史】：</view>
          <view class="iptbox">
            <up--textarea
              maxlength="-1"
              autoHeight
              v-model="form.title"
              placeholder="请输入现病史及既往史"
            ></up--textarea>
          </view>
        </view>
        <view class="textcell">
          <view class="title">【检查】：</view>
          <view class="iptbox">
            <up--textarea
              maxlength="-1"
              autoHeight
              v-model="form.title"
              placeholder="请输入检查内容"
            ></up--textarea>
          </view>
        </view>
        <view class="textcell">
          <view class="title">【临床诊断】：</view>
          <view class="iptbox">
            <up--textarea
              maxlength="-1"
              autoHeight
              v-model="form.title"
              placeholder="请输入临床诊断"
            ></up--textarea>
          </view>
        </view>
        <view class="textcell">
          <view class="title">【治疗经过及结果】：</view>
          <view class="iptbox">
            <up--textarea
              maxlength="-1"
              autoHeight
              v-model="form.title"
              placeholder="请输入治疗经过及结果"
            ></up--textarea>
          </view>
        </view>
      </view>
      <view class="textcon">
        <view class="row">
          <view class="left">
            总结与讨论 <text class="tip">(可不填)</text>
          </view>
        </view>
        <view class="textcell">
          <view class="iptbox">
            <up--textarea
              maxlength="-1"
              autoHeight
              v-model="form.title"
              placeholder="分享经验和心得，如：诊断与鉴别诊断易错点，治疗过程难点，病例的相关知识总结及讨论等"
            ></up--textarea>
          </view>
        </view>
      </view>
      <view class="textcon">
        <view class="sickbox">
          <view class="sick">
            治疗经过及结果
            <view class="del">
              <up-icon name="close-circle" color="#3CC7C0" size="20"></up-icon>
            </view>
          </view>
          <view class="add">
            <up-icon name="plus" color="#3CC7C0" size="16"></up-icon>
            添加疾病
          </view>
        </view>
        <view class="toolbox">
          <view class="cell">
            <up--image
              :src="photoImg"
              class="headImg"
              width="32rpx"
              height="32rpx"
            ></up--image>
            <view class="name">添加图片</view>
          </view>
          <view class="cell">
            <up--image
              :src="videoImg"
              class="headImg"
              width="32rpx"
              height="32rpx"
            ></up--image>
            <view class="name">添加视频</view>
          </view>
          <view class="cell">
            <up--image
              :src="addImg"
              class="headImg"
              width="32rpx"
              height="32rpx"
            ></up--image>
            <view class="name">添加小标题</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="left">
        <view class="draft">存草稿</view>
        <view class="vote">
          投票
          <up--image
            :src="voteImg"
            class="headImg"
            width="47rpx"
            height="47rpx"
          ></up--image>
        </view>
      </view>
      <view class="right">发布</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="closeVote">保存</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="value"
			  clearable
            ></up-input>
          </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="row">
            <up-input
              placeholder="输入选项，建议少于16个字"
              border="surround"
              v-model="value"
			  clearable
            ></up-input>
          </view>


		  <view class="add">
			   <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">-</view>
				 <view class="day">7</view>
				 <view class="plus">+</view>
			  </view>
		  </view>
		  <view class="tips">友情提醒：为保证投票结果准确性，帖子发布后投票无法修改</view>
		 
        </view>
		 <view class="confirm">确认</view>
		   <view class="del">删除投票</view>
      </view>
    </up-popup>
	

	   <up-popup
		:round="10"
		zIndex="999999"
		: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">
				<view class="title">2025: 肝硬化门静脉高压症食管、胃底静脉曲张破裂出血诊治专家共识</view>
				<view class="smalltitle">版2025 APASL临床实践指南</view>
				<view class="deal">
					<view class="time">编辑于03-11</view>
					<view class="right">
						<view class="del"><up-icon name="trash" color="#4B5563" size="16"></up-icon>删除</view>
						<view class="edit"><up-icon name="edit-pen" color="#fff" size="17"></up-icon>编辑</view>

					</view>
				</view>
			</view>
			
		</view>
	</view>
	</up-popup>
  </div>

</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";
const form = reactive({
  title: "",
});
const value = ref("");

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

</script>

<style lang='scss' scoped>
.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 30rpx 0;
				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;
    .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;
}

.bottom {
  position: fixed;
  bottom: 0;
  border-top: 2rpx solid #e5e7eb;
  width: 100%;
  align-items: center;
  z-index: 3;
  height: 133rpx;
  background: #ffffff;
  display: flex;

  .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;
  overflow-y: scroll;
  :deep(.u-image) {
    background: transparent !important;
  }
  .toolbox {
    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;
      }
    }
  }
  .sickbox {
    display: flex;
    padding: 25rpx 25rpx 0;
  }
  .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;
  }

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