<template>
  <div class="page_doctorAdvice">
    <div class="box">
      <div class="info">
        <div class="photo">
          <img :src="patientForm.avatar" alt/>
        </div>
        <div class="infoRight">
          <div class="rightTop">
            <span class="name">{{patientForm.name}}</span>
            <span>{{patientForm.sex}}</span>&ensp;|
            <span>{{patientForm.age}}岁</span>
          </div>
          <div class="rightBottom">
            <p class="num">
              [透析号：
              <span>{{patientForm.dialysis_no}}</span>]
            </p>
            <div class="imgList">
              <img src="../../assets/images/b1.png" alt v-show="yiShow" />
              <img src="../../assets/images/b2.png" alt v-show="meiShow" />
              <img src="../../assets/images/b3.png" alt v-show="bingShow" />
              <img src="../../assets/images/b4.png" alt  v-show="aiShow"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search">
      <el-input placeholder="输入医嘱内容" prefix-icon="el-icon-search" v-model="searchVal" v-on:input="watchNum"></el-input>
    </div>
    <div class="time">
      <van-cell @click="showPopup(1)">
        {{ startTime }}
        <van-icon name="arrow-down" />
      </van-cell>
      <van-popup v-model="show1" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate1"
          type="date"
          @cancel="show1=false"
          @confirm="chooseStartTime"
        />
      </van-popup>
      <div class="line">-</div>
      <van-cell @click="showPopup(2)">
        {{ endTime }}
        <van-icon name="arrow-down" />
      </van-cell>
      <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate2"
          type="date"
          @cancel="show2=false"
          @confirm="chooseEndTime"
        />
      </van-popup>
    </div>
    <div class="statOrder">

      <div class="statOrderOne" v-for="(item,index) in this.doctorAdvice" :key="item.id">
        <van-swipe-cell>
          <van-cell :border="false">
               <template>
               <div class="custom-title">{{RecordTime(item.advice_date)}}</div>
            </template>
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <van-icon
              slot="right-icon"
              name="ellipsis"
              style="line-height: inherit;"
              @click="onClick(1)"
            />
          </van-cell>
          <template slot="right">
            <van-button square type="danger" text="删除" @click="deleteDoctorAdvice(item.id)"/>
          </template>
        </van-swipe-cell>
        <van-action-sheet v-model="show3" :actions="actions" cancel-text="取消"></van-action-sheet>
        <div class="msg">
            <span v-if="item.advice_type==1">长嘱</span>
            <span v-else-if="item.advice_type==3">临嘱</span>
            <span v-else></span>
          <!-- <span>18:00</span> -->
          <div v-if="item.parent_id==0">
          <p>医嘱内容:{{item.advice_name}}&nbsp;药品规格:{{item.advice_desc}}{{item.drug_spec_unit}}</p>
          <p>开药数量:{{item.prescribing_number}}{{item.prescribing_number_unit}}&nbsp;单次用量: <span v-if="item.single_dose!=0">{{item.single_dose}}{{item.single_dose_unit}}</span></p>
           <p>频率:<span v-if="item.parent_id==0">{{item.execution_frequency}}</span>&nbsp;用法:<span v-if="item.parent_id==0">{{item.delivery_way}}</span></p>
           <p>执行时间:  <span  v-if="item.execution_state==1"> {{item.execution_time | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>&nbsp;终止时间: <span v-if="item.stop_state==1"> {{item.stop_time | parseTime('{y}-{m}-{d} {h}:{i}')}}</span></p>
           <p>执行护士:  <span v-if="item.parent_id==0">{{item.execution_staff}}</span></p>
           </div>
         <div v-if="item.parent_id!=0">
           <p>▲ {{item.advice_name}}</p>
         </div> 
      
          <div class="doctorAll">
            <div class="doctor">
              <span>开嘱医生:</span>
              <span>{{doctor_name}}</span>
              <span>开嘱时间:</span>
              <span>{{RecordTime(item.created_time)}}</span>
              <span>核对护士:</span>
              <span v-if="item.parent_id==0">{{item.checker}}</span>
              <span>校对时间:</span>
               <span v-if="item.check_state==1">{{item.created_time | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
            </div>
          </div>
        </div>
  
      </div>

    </div>
    <div class="add">
      <img src="../../assets/images/add2.png" alt />
    </div>
  </div>
</template>


<script>
const moment = require('moment')
import { GetDoctroAdvice, toSeacherDoctorAdvice, deleteDoctorAdvice } from '@/api/login/login'
import { uParseTime } from '@/utils/tools'
export default {
  data() {
    return {
      searchVal: '',
      startTime: moment(new Date()).format('YYYY-MM-DD'),
      endTime: moment(new Date()).format('YYYY-MM-DD'),
      show1: false,
      show2: false,
      currentDate1: new Date(),
      currentDate2: new Date(),
      show3: false,
      actions: [
        { name: '编辑' },
        { name: '删除' }
      ],
      time: '2016-10-2',
      patientForm: {
        name: '',
        sex: '',
        age: '',
        dialysis_no: '',
        avatar: ''
      },
      doctorAdvice: [],
      yiShow: false,
      meiShow: false,
      bingShow: false,
      aiShow: false,
      doctor_name: ''
    }
  },
  methods: {
    showPopup(index) {
      if (index === 1) {
        this.show1 = true
      } else if (index === 2) {
        this.show2 = true
      }
    },
    chooseStartTime(value) {
      this.startTime = moment(value).format('YYYY-MM-DD')
      console.log('starttime', this.startTime)
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.GetDoctroAdvice(patientid, orgid, this.startTime)
      this.show1 = false
    },
    chooseEndTime(value) {
      this.endTime = moment(value).format('YYYY-MM-DD')
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      this.GetDoctroAdvice(patientid, orgid, this.endTime)
      this.show2 = false
    },
    onClick(index) {
      if (index === 1) {
        this.show3 = true
      } else if (index === 2) {
        this.show3 = true
      }
    },
    RecordTime(time) {
      // return uParseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
      return uParseTime(time, '{y}-{m}-{d}')
    },
    GetDoctroAdvice(patientid, orgid) {
      GetDoctroAdvice(patientid, orgid, this.startTime, this.endTime, this.searchVal).then(response => {
        if (response.data.state === 1) {
          var doctoradvice = response.data.data.doctoradvice
          this.doctorAdvice = doctoradvice
          var patients = response.data.data.patients
          this.patientForm.name = patients.name
          this.patientForm.age = patients.age
          this.patientForm.avatar = patients.avatar
          var diseases = response.data.data.diseases
          console.log('diseases', diseases)
          for (let index = 0; index < diseases.length; index++) {
            if (diseases[index].disease_id === 2) {
              this.yiShow = true
            }
            if (diseases[index].disease_id === 3) {
              this.bingShow = true
            }
            if (diseases[index].disease_id === 4) {
              this.aiShow = true
            }

            if (diseases[index].disease_id === 6) {
              this.meiShow = true
            }
          }
          if (patients.gender === 1) {
            this.patientForm.sex = '男'
          }
          if (patients.gender === 2) {
            this.patientForm.sex = '女'
          }
          this.patientForm.dialysis_no = patients.dialysis_no
          console.log('doctoradvice', doctoradvice)
          console.log('patients', patients)
          var role = response.data.data.role
          console.log('role', role)
          this.doctor_name = role.user_name
        }
      })
    },
    watchNum() {
      var patientid = this.$route.query.patientid
      var orgid = this.$route.query.orgid
      toSeacherDoctorAdvice(patientid, orgid, this.searchVal).then(response => {
        if (response.data.state === 1) {
          var doctorAdvice = response.data.data.doctoradvice
          console.log('doctoradvice', doctorAdvice)
          this.doctorAdvice = doctoradvice
        }
      })
    },
    deleteDoctorAdvice(id, index) {
      deleteDoctorAdvice(id, index).then(response => {
        if (response.data.state === 1) {
          var msg = response.data.data.msg
          console.log('msg', msg)
          this.doctorAdvice.splice(index, 1)
        }
      })
    }
  },
  created() {
    var patientid = this.$route.query.patientid
    var orgid = this.$route.query.orgid
    console.log('paitientid是什么', patientid)
    console.log('orgid是什么', orgid)
    this.GetDoctroAdvice(patientid, orgid)
  }
}
</script>

<style lang="scss">
.page_doctorAdvice {
  overflow: hidden;
  height: 100%;
  overflow-y: auto;
  .box {
    width: 100%;
    height: 9.1875rem;
    background: #fcfcfc;
    padding-top: 1.25rem;
    box-sizing: border-box;
  }
  .info {
    width: 21.375rem;
    height: 6.1875rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    margin: 0 auto;
    box-shadow: 0px 2px 12px 0px #f5f5f5;
    .photo {
      float: left;
      width: 3.75rem;
      height: 3.75rem;
      margin: 1.125rem 1rem 0 1.125rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .infoRight {
      float: left;
      padding-top: 1.625rem;
      box-sizing: border-box;
      .rightTop {
        margin-bottom: 0.75rem;
      }
      .name {
        font-size: 1.0625rem;
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        margin-right: 1rem;
      }
      span {
        font-size: 0.875rem;
        color: rgba(60, 60, 60, 1);
      }
      .rightBottom {
        height: 1.4375rem;
        line-height: 1.4375rem;
        .num {
          float: left;
          font-size: 0.875rem;
          color: rgba(60, 60, 60, 1);
        }
        .imgList {
          float: left;
          margin-left: 0.875rem;
          img {
            width: 1.4375rem;
            height: 1.4375rem;
            margin: 0 0.125rem;
          }
        }
      }
    }
  }
  .search {
    width: 21.375rem;
    height: 2.125rem;
    background: rgba(244, 244, 244, 1);
    border-radius: 17px;
    margin: 0 auto;
    .el-input__inner {
      height: 2.125rem;
      line-height: 2.125rem;
      border: none;
      background: rgba(244, 244, 244, 1);
      border-radius: 17px;
      padding-left: 2.5rem;
      color: rgba(155, 155, 155, 1);
      font-size: 0.9375rem;
    }
    .el-input__prefix {
      margin-top: 0.0625rem;
      font-size: 1.25rem;
    }
    .el-input__icon {
      line-height: 2.125rem;
    }
  }
  .time {
    color: #9b9b9b;
    margin-left: 1rem;
    margin-top: 0.75rem;
    width: 342px;
    // height:2.125rem;
    overflow: hidden;
    .van-cell {
      width: 8.5rem;
      height: 2.125rem;
      line-height: 2.125rem;
      background: #f4f4f4;
      border-radius: 17px;
      margin-bottom: 0.75rem;
      padding: 0 1rem;
      font-size: 0.875rem;
      float: left;
      .van-icon-arrow-down {
        float: right;
        line-height: 2.125rem;
      }
    }
    .line {
      float: left;
      line-height: 2.125rem;
    }
  }
  .statOrder {
    width: 21.5625rem;
    margin: 0 auto;
    .statOrderOne {
      padding-bottom: 1.25rem;
      border-top: 1px dashed #e6e6e6;
      border-bottom: 1px dashed #e6e6e6;
    }
    .van-cell {
      padding: 10px 6px;
    }
    // .edit {
    //   float: right;
    //   width: 4.5625rem;
    //   height: 1.875rem;
    //   background: rgba(81, 119, 238, 0.2);
    //   border-radius: 15px;
    //   color: #5177ee;
    //   text-align: center;
    //   line-height: 1.875rem;
    //   margin-left: 8.75rem;
    // }
    // .title {
    //   border-top: 1px solid #e6e6e6;
    //   display: flex;
    //   height: 3.125rem;
    //   align-items: center;
    // }
    // .el-icon-arrow-down {
    //   margin-left: 0.5rem;
    // }
    // .year {
    //   margin-left: 0.625rem;
    //   font-size: 0.9375rem;
    //   font-weight: 600;
    //   color: rgba(0, 0, 0, 1);
    // }
    .msg {
      font-size: 0.75rem;
      color: rgba(60, 60, 60, 1);
      font-weight: 600;
      padding-top: 0.75rem;
      padding-bottom: 1rem;
      // border-top: 1px dashed #e6e6e6;
      span {
        margin-left: 0.375rem;
      }
      p {
        font-size: 0.875rem;
        margin: 0.625rem 0;
        color: rgba(0, 0, 0, 1);
      }
    }
    .doctorAll {
      display: flex;
      justify-content: space-between;
      margin-top: 0.25rem;
      font-size: 0.75rem;
      font-weight: 400;
      color: rgba(155, 155, 155, 1);
      .doctor {
        float: left;
      }
    }
    .el-collapse-item__content {
      padding-bottom: 1rem;
    }
    .el-collapse {
      border-top: none;
    }
    .none {
      padding-bottom: 0;
    }
  }
  .add {
    width: 4.5rem;
    height: 4.5rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 9px 0px rgba(7, 30, 102, 0.15);
    border-radius: 50%;
    position: fixed;
    right: 1.125rem;
    bottom: 4.25rem;
    img {
      width: 100%;
    }
  }
}
</style>

