<template>
  <div class="CheckItemMain">
    <div class="userInfo">
	<div  v-if="list!=null && list.length>0">
		<div style="font-size: 20px; font-weight: 700; color: #fff;"><el-icon><Avatar /></el-icon> 患者信息</div>
		<div class="userInfo1">
		  <div>姓名：<span>{{list[0].user_name}}</span></div>
		  <div>性别：<span v-if="list[0].user_sex==1">男</span><span v-else>女</span></div>
		  <div>电话：<span>{{list[0].user_phone}}</span></div>
		  <div>登记号：<span>{{list[0].reg_num}}</span></div>
		</div>
	</div>
	
      
	  <div class="date">
	    <el-date-picker size="large" @change="DateChange()" style="width: 100%; border-radius: 20px;height: 60px;" v-model="searchInfo.dateRange"
	                    type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
	                    value-format="YYYY-MM-DD" />
	  </div>
    </div>
 
    

    <div class="list">
      <div class="info" v-for="(item,index) in list" :key="index">
        <div class="entrust_title"><div>检查项目：{{item.entrust}}</div> 
		   <div v-if="item.list_status==0"  class="tips">待预约</div>
		   <div v-if="item.list_status==1"  class="tips" style="color: #4edb5a;">已预约</div>
		   <div v-if="item.list_status==2"  class="tips" style="color: #4edb5a;">已登记</div>
		   <div v-if="item.list_status==3"  class="tips" style="color: #ccc;">已完成</div>
		</div>
        <div class="iteminfo"> 
			<div style="height: 60px;line-height: 60px;font-size: 20px;" >医嘱时间：{{item.entrust_date}} 申请科室：{{item.reservation_department}} </div>
			<div v-if="item.reservation_date && item.list_status>0"> 
				<div class="label">预约时段：</div>
				<div class="value">{{item.reservation_date}} {{item.period_begin_time.substring(0,5)}}~{{item.period_end_time.substring(0,5)}}</div>
			</div>
			<el-button v-if="item.list_status==0" type="success" size="large" class="button dian" @click="ToPlanList(1,item)">开始预约</el-button>
			<div v-if="item.list_status==1">
				<el-button  type="success" size="large" class="button red" @click="Cancel(item)" >取消</el-button>
				<el-button   type="success" size="large" class="button blue"  @click="ToPlanList(2,item)">改约</el-button>
			</div>
			
        </div>
      </div>
	  <div v-if="list==null || list.length==0">
		  <el-empty description="暂无记录" />
	  </div>
    </div>

  </div>
</template>
<script setup>
  import {
  EntrustGetList,GetServiceDateTime,H5_CancelYuYue
} from "@/api/api.js";
  import {
  ElMessage,ElMessageBox
} from 'element-plus'
  import {
  ref,nextTick,onMounted
} from 'vue'
  let searchInfo=ref({
    dateRange:[]
  })
  //获取服务器时间
  const GetServiceDate = () => {
    GetServiceDateTime().then(res => {
      if (res.status) {
        let datetime = res.data.datetime.substr(0, 10)
        let date_l_n=getDatesAroundSameDay(datetime)
        searchInfo.value.dateRange = [date_l_n.previousMonth, date_l_n.nextMonth]
        Getlist()
      }
    })
  }
  let list=ref(null);
  const Getlist=()=>{
    EntrustGetList({searchInfo:searchInfo.value}).then(res=>{
      list.value=res.data.list;
    })
  }
  const DateChange=()=>{
	   
	  Getlist()
  }
  const ToPlanList=(do_type,item)=>{
  	let data={
  		do_type:do_type,
  		appointment_type:2,
  		regnum:item.reg_num,
  		entrustid:[item.entrust_id],
  		episodeid:item.episodeid
  	}
	window.location.href ='./#/planList?data=' + encodeURIComponent(JSON.stringify(data))
   
  }
  const Cancel=(item)=>{
	   ElMessageBox.confirm(
	      '确定取消吗?',
	      'Warning',
	      {
	        confirmButtonText: '确定',
	        cancelButtonText: '关闭',
	        type: 'warning',
	      }
	    )
	      .then(() => {
	       H5_CancelYuYue({MainListId:item.id}).then(res => {
	       			  console.log(res)
	       			  if(res.status){
	       				   Getlist()
	       			  } 
	       })	
	      })
	      .catch(() => {
	        
	      })
  }
onMounted(()=>{
  GetServiceDate();

})

  function getDatesAroundSameDay(givenDateString) {
    // 将给定的日期字符串转换为Date对象
    const givenDate = new Date(givenDateString);

    // 获取给定日期的月份
    const thisMonth = givenDate.getMonth();

    // 计算前一个月和后一个月的日期，同时保持日期相同
    const prevMonth = new Date(givenDate.getFullYear(), thisMonth, givenDate.getDate());
    prevMonth.setMonth(thisMonth - 1);

    const nextMonth = new Date(givenDate.getFullYear(), thisMonth, givenDate.getDate());
    nextMonth.setMonth(thisMonth + 1);

    // 格式化日期
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }

    // 返回结果
    return {
      previousMonth: formatDate(prevMonth),
      nextMonth: formatDate(nextMonth)
    };
  }
</script>
<style   scoped>
	.CheckItemMain{
		height: calc(100vh ) ;
		background-color: #eef7fa;
		padding-top: 30px;
	}
  .userInfo{
    border:1px solid #ccc;
    border-radius: 4px;
    padding: 20px;
	background-color: #33cdc9;
	margin-bottom: 50px;

  }
  .userInfo1{
	  display: flex;
	  justify-content: space-around;
	  	 color:#fff;
  }
  .userInfo1 span{
	 font-size: 22px; 

  }
  .date{
    padding: 8px;
    text-align: center;
    width: 50%;
    margin-top: 16px;
	transform: translate(50% ,55px );
  }
  .list{
    padding: 0px 20px 20px 20px;
  }
  .info{
    border: 1px solid #33cdc9;
    border-radius: 16px;
    margin-top: 16px;
	background-color: #fff;
	
  }
  .entrust_title{
    color: #666;
    font-size: 18px;
    background-color: #33cdc9;
    border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
	padding-top: 8px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 8px;
	color: #fff;
	border-radius: 16px 16px 0 0 ;
 
  }
  .iteminfo{
	  padding: 18px;
	  display: flex;
	  justify-content: space-between;
		justify-items: center;
 
  }
  .tips{
	  background-color: #fff ;
	  border-radius: 15px;
	  
	  color: #33cdc9;
	  width: 150px;
	  height: 30px;
	  line-height: 30px;
	  text-align: center;
	  font-size: 18px;
	  font-weight: 700;
  }
  .button{
	  font-size: 18px;width:150px;height:  60px;border: 0px;
  }
  .dian{
	  background-color: #33cdc9;
  }
  .red{
  	background-color: coral;
  }
  .blue{
  	background-color: #39a6cd;
  }
</style>