<template>
    <div class="page_newCourse2">
        <van-sticky>
            <div class="newCourseTitle">
                <i class="iconfont icon-zuojiantou jiantou" @click="toReturn()"></i>
                <span class="titleName">新增病程</span>
                <span @click="saveCourseManagement">完成</span>
            </div>
        </van-sticky>
        <div>
            <div class="newCell" @click="clickstartShow()">
              <div class="newCellTitle">
                病程日期
              </div>
              <div class="newCellValue">
                {{ startTime }}
              </div>
              <i class="iconfont icon-zuojiantou youjiantou"></i>
            </div>
            <div class="newCell">
              <div class="newCellTitle fieldLabel">
                病程标题
              </div>
              <div class="newCellValue">
                <div class="fieldBody" style="overflow: visible;">
                  <input class="fieldInput" type="text" v-model="title">
                </div>
              </div>
            </div>
            <!-- <van-cell title="病程日期" is-link v-model="startTime" @click="clickstartShow()" />
            <van-field v-model="title" label="病程标题" /> -->
        </div>
        <div class="grey"></div>
        <div class="courseMain">
            <div class="courseMainTitle">病程内容</div>
            <div class="templateTitle" @click="typeShow=true">{{course_content}}</div>
            <textarea style="width: 100%;margin-top: 10px;border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px;font-size: 0.53rem;" name="" id="" cols="30" rows="10" v-model="content"></textarea>
        </div>

         <van-popup
            v-model="startShow"
            position="bottom"
            :style="{ height: '40%' }"
        >
            <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="getstartTime"
            @cancel="startShow = false"
            />
       </van-popup>

        <van-popup
          v-model="typeShow"
          position="bottom"
          :style="{ height: '40%' }"
        >
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="onCancel"
            @confirm="onConfirm"
          />
        </van-popup>
    </div>
</template>
<script>
import { saveCourseManagementTwo } from '@/api/patient/patient'
import { Toast } from 'vant'
export default {
  data () {
    return {
      title: '',
      startShow: false,
      typeShow: false,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      startTime: '请选择',
      start_time: '',
      columns: [],
      course_content: '',
      content: '',
      patientid: 0,
      template: '',
      date: 0,
      patient_name: ''
    }
  },
  methods: {
    getstartTime (value) {
      this.page = 1
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      let hour = value.getHours()
      let minuters = value.getMinutes()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 1 && hour <= 9) {
        hour = `0${hour}`
      }

      if (minuters >= 1 && minuters <= 9) {
        minuters = `0${minuters}`
      }

      this.startTime = `${year}-${month}-${day} ${hour}:${minuters}`
      this.start_time = `${year}-${month}-${day} ${hour}:${minuters}`
      this.startShow = false
    },
    clickstartShow () {
      this.startShow = true
    },
    onCancel () {
      this.typeShow = false
    },

    onConfirm (value) {
      console.log('value', value)
      var content = ''
      for (let i = 0; i < this.template.length; i++) {
        if (value == this.template[i].title) {
          content = this.template[i].content
        }
      }
      console.log('content', content)
      this.content = content.replace(/<[^>]+>/g, '')
      this.course_content = value
      this.typeShow = false
    },
    saveCourseManagement () {
      if (this.start_time == '') {
        this.$toast('请选择病程日期')
        return false
      }
      if (this.title == '') {
        this.$toast('请选择病程标题')
        return false
      }
      if (this.content == '') {
        this.$toast('请选择病程内容')
        return false
      }
      const params = {
        start_time: this.start_time,
        title: this.title,
        course_content: this.course_content,
        content: this.content,
        patientid: this.patientid
      }
      console.log('params', params)
      saveCourseManagementTwo(params).then(response => {
        if (response.data.state == 1) {
          var record = response.data.data.record
          console.log('record', record)
          this.$toast('保存成功')
          this.$router.push('/details?patient_id=' + this.patientid + '&date=' + this.date + '&patient_name=' + this.patient_name + '&active1=' + 0 + '&active2=' + 3)
        }
      })
    },
    toReturn () {
      this.$router.push('/details?patient_id=' + this.patientid + '&date=' + this.date + '&patient_name=' + this.patient_name + '&active1=' + 0 + '&active2=' + 3)
    }

  },
  created () {
    this.patientid = parseInt(this.$route.query.patientid)
    this.date = parseInt(this.$route.query.date)
    this.patient_name = this.$route.query.patient_name
    // 获取病程内容
    var template = this.$store.getters.configlist.course_disease
    console.log('template', template)
    this.template = template
    var name = []
    for (let i = 0; i < template.length; i++) {
      name.push(template[i].title)
    }
    this.columns = name
  }
}
</script>
<style lang="scss" scoped>
.page_newCourse2{
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .newCourseTitle {
    background: #fff;
    padding: 0 0.6rem;
    height: 1.67rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .jiantou {
    font-size: 0.8rem;
    font-weight: 600;
  }
  .titleName {
    font-size: 0.6rem;
    font-weight: 600;
  }
  span{
    font-size: 0.6rem;
  }
  .grey{
      height: 0.67rem;
      background: #fafafa;
  }
  .courseMain{
      height: 100%;
      background: #fff;
      padding: 0.33rem 0.53rem;
  }
  .courseMainTitle{
      font-size: 0.53rem;
  }
  .templateTitle{
      width:100%;
      height: 1.67rem;
      line-height: 1.67rem;
      padding: 0 0.33rem;
      border: 1px solid #e5e5e5;
      margin-top: 0.33rem;
      border-radius: 5px;
      display: inline-block;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow:ellipsis;
      font-size: 0.53rem;
  }
  .newCellTitle::before {
    position: absolute;
    left: 8px;
    color: #ee0a24;
    font-size: 14px;
    content: "*";
  }
  .newCell{
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0.33rem 0.53rem;
    overflow: hidden;
    color: #323233;
    font-size: 0.53rem;
    line-height: 0.8rem;
    background-color: #fff;
    .youjiantou{
      transform:rotate(180deg);
    }
  }
  .newCellTitle{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .newCellValue{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    position: relative;
    overflow: hidden;
    color: #969799;
    text-align: right;
    vertical-align: middle;
    word-wrap: break-word;
  }
  .fieldLabel{
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 0.4rem;
    // color: #646566;
    text-align: left;
    word-wrap: break-word;
  }
  .fieldInput{
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
  }

}
</style>

<style lang="scss">
.page_newCourse2{
  .van-picker__toolbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 44px;
  }
  .van-picker__cancel, .van-picker__confirm {
    height: 100%;
    padding: 0 16px;
    font-size: 14px;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
  .van-picker-column {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    font-size: 16px;
  }
  .van-picker-column__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 4px;
    color: #000;
  }
}
</style>
