<template>
    <div>
        <div class="newDoctorAdvice">
            <van-sticky>
                <div class="newDoctorAdviceTitle">
                    <span @click="back" style="color:#323233;font-size: .875rem;"><i class="iconfont icon-zuojiantou jiantou" style="color:#323233;"></i>返回</span>
                    <span style="font-weight:bold;">修改医嘱</span>
                    <span style="color:#323233;font-size: .875rem;" @click="comfirmAction">保存</span>
                </div>
            </van-sticky>
            <div>
                <div class="adviceTitle">
                    <div>开始时间：<span class="timeSpan" @click="selectStartTimeAction">{{ advice_start_time }}</span></div>
                    <div>开嘱医生: {{ $store.getters.user.user.user_name  }}</div>
                </div>
                <div class="inputCell">
                    <p>医嘱内容：</p>
                    <el-autocomplete
                    style="width:100%;"
                    v-model="order.title"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
                    @input="changeDrugName"
                    ></el-autocomplete>
                </div>
                <div class="inputCell">
                    <p>药品规格：</p>
                    <div style="display:flex;justify-content: space-between;">

                      <input class="inline-input1" v-model="order.advice_desc"  placeholder="请输入内容"/>

                    </div>
                </div>
                <div class="inputCell">
                    <p>开药数量：</p>
                    <div style="display:flex;justify-content: space-between;">
                        <input
                            type="number"
                            class="inline-input1"
                            v-model="order.prescribing_number"
                        />
                        <input
                            type="text"
                            placeholder="单位"
                            readonly
                            class="commonInput"
                            v-model="order.prescribing_number_unit"
                            @focus="selectPrescribingNumUnitAction"
                        />
                    </div>
                </div>
                <div class="inputCell">
                    <p>单次用量：</p>
                    <div style="display:flex;justify-content: space-between;">
                        <input
                            class="inline-input1"
                            v-model="order.single_dose"
                        />
                        <input
                            type="text"
                            placeholder="单位"
                            readonly
                            class="commonInput"
                            v-model="order.single_dose_unit"
                            @focus="selectSingleDoseAction"
                        />
                    </div>
                </div>
                <div class="inputCell" v-show="order.parent_id == 0">
                    <p>给药途径：</p>
                    <el-input
                        placeholder="选择给药途径"
                        readonly
                        :disabled="mode == 3"
                        v-model="order.delivery_way"
                        @focus="selectDeliveryWayAction"
                    ></el-input>
                </div>
                <div class="inputCell" v-show="order.parent_id == 0">
                    <p>执行频率：</p>
                    <el-input
                        placeholder="选择执行频率"
                        readonly
                        :disabled="mode == 3"
                        v-model="order.execution_frequency"
                        @focus="selectExecFrequencyAction"
                    ></el-input>
                </div>
                <div class="inputCell" v-show="order.parent_id == 0">
                    <p>医嘱嘱托：</p>
                    <el-input
                        style="width:100%"
                        v-model="order.remark"
                    ></el-input>
                </div>
                <div class="inputCell">
                  <p>周期提醒 :</p>
                  <el-radio-group class="el_radio" v-model="frequency_type" style="font-size: 14px;">
                    <el-radio :label="1">每次必推</el-radio>
                    <el-radio :label="2">天数频率</el-radio>
                    <el-radio :label="3">星期频率</el-radio>
                  </el-radio-group>
                </div>
                <div class="inputCell" v-if="frequency_type ==2">
                  <el-input
                        style="width:200px"
                        v-model="order.day_count"
                    ></el-input>
                    天/次
                </div>
                <div class="inputCell" v-if="frequency_type ==3">
                  <el-checkbox-group v-model="weeks" >
                    <el-checkbox label="周一" name="type"></el-checkbox>
                    <el-checkbox label="周二" name="type"></el-checkbox>
                    <el-checkbox label="周三" name="type"></el-checkbox>
                    <el-checkbox label="周四" name="type"></el-checkbox>
                    <el-checkbox label="周五" name="type"></el-checkbox>
                    <el-checkbox label="周六" name="type"></el-checkbox>
                    <el-checkbox label="周日" name="type"></el-checkbox>
                  </el-checkbox-group>
                </div>
            </div>
            <mt-datetime-picker
            ref="start_time_picker"
            type="datetime"
            @confirm="didSelectStartTime"
            v-model="start_time"
            class="startTimePicker datetimePicker"
            ></mt-datetime-picker>
            <van-popup v-model="drug_spec_unit_show" class="listBoxPopup newListBoxPopup">
                <div class="listBox" v-if="sub_dialog_key == 5">
                    <div @click="chooseDrugSpecUnit('')">请选择</div>
                    <div v-for="(item,index) in drug_spec_unit_options" :key="index" @click="chooseDrugSpecUnit(item.name)">{{ item.name }}</div>
                </div>
                <div class="listBox" v-if="sub_dialog_key == 2">
                    <div @click="choosePrescribingNumberUnit('')">请选择</div>
                    <div v-for="(item,index) in unitsOption" :key="index" @click="choosePrescribingNumberUnit(item.name)">{{ item.name }}</div>
                </div>
                <div class="listBox" v-if="sub_dialog_key == 1">
                    <div @click="chooseSingleDoseUnit('')">请选择</div>
                    <div v-for="(item,index) in unitsOption" :key="index" @click="chooseSingleDoseUnit(item.name)">{{ item.name }}</div>
                </div>
                <div class="listBox" v-if="sub_dialog_key == 4">
                    <div @click="chooseExecutionFrequency('')">请选择</div>
                    <div v-for="(item,index) in execution_frequency_options" :key="index" @click="chooseExecutionFrequency(item.name)">{{ item.name }}</div>
                </div>
                <div class="listBox" v-if="sub_dialog_key == 3">
                    <div @click="chooseDeliveryWay('')">请选择</div>
                    <div v-for="(item,index) in delivery_way_options" :key="index" @click="chooseDeliveryWay(item.name)">{{ item.name }}</div>
                </div>
            </van-popup>
        </div>


       <van-popup
        v-model="infor_visibility"
        class="advicePopup"
        get-container="#today_panel"
      >
        <infor-sub-menu
        :visibility="infor_visibility"
        v-on:menu-cancle-three="menuCancleFour"
        v-on:menu-comfirm-three="menuComfirmFour"
        >
      </infor-sub-menu>
      </van-popup>
    </div>
</template>

<script>
import {parseTime} from '@/utils'
import InforSubMenu from "@/pages/main/dialog/subMenu/InforSubMenu"
import {updateLongMobileAdvice} from '@/api/advice'
import { saveMobileInformation } from '@/api/dialysis'
import moment from "moment"
import {Toast} from 'vant'
export default {
  props: {
    drugList: {
      type: Array,
      default: function () {
        return []
      }
    },
    unitsOption:{
      type: Array,
      default: function () {
        return []
      }
    },
    prescribing_number_unit_options:[],
    delivery_way_options: {
      type: Array,
      default: function () {
        return []
      }
    },
    execution_frequency_options: {
      type: Array,
      default: function () {
        return []
      }
    },
    adviceObj: {
      type: Object
    },
  },
  components:{
    InforSubMenu
  },
  data () {
    return {
      formTitle: '新增医嘱',
      record_date_str: '',
      start_time: new Date(),
      start_time_str: '',
      mode: 1,
      order: {
        id:0,
        title: '',
        advice_desc: '',
        drug_spec: '',
        drug_spec_unit: '',
        delivery_way: '',
        execution_frequency: '',
        single_dose: '',
        single_dose_unit: '',
        prescribing_number: '',
        prescribing_number_unit: '',
        remark: '',
        group_no: '',
        day_count:0,
        // 在新增子药才用到的字段
        parent_id: 0, // 父医嘱ID
        start_time: '',
        record_time: '',
        drug_id: '',
        drug_name_id: '',
        way: '',
        group_no:0,
      },
      drugSpec: [],
      advices: [],
      group_no: 0,
      patient_id: 0,
      frequency_type:0,
      weeks:[],
      drug_spec_unit_show: false,
      sub_dialog_key: 0,
      infor_visibility:false,
      advice_start_time:"",
      startTime:""
    }
  },
  created(){
     console.log("haaaaaaaaaaaaaaaaaaaaaaa")
  },
  mounted () {
    console.log("开始世纪东方",this.adviceObj )
   

  },
  methods: {
    showWithModify(val){
     console.log("处方安抚阿道夫阿道夫阿道夫地方阿道夫",val.advice_name)

     this.weeks = []
      var arr = val.week_day.split(",")
      if(arr!=null&&arr.length>0){
        this.weeks = arr
      }
      this.advice_start_time = ""
      this.advice_start_time = parseTime(val.start_time, '{y}-{m}-{d} {h}:{i}') + ':00'
    
      this.startTime = parseTime(val.advice_date, '{y}-{m}-{d}')
      this.order.id = val.id,
      this.order.title = val.advice_name
      this.order.advice_desc = val.advice_desc
      this.order.prescribing_number = val.prescribing_number
      this.order.prescribing_number_unit = val.prescribing_number_unit
      this.order.single_dose = val.single_dose 
      this.order.single_dose_unit = val.single_dose_unit
      this.order.delivery_way =val.delivery_way
      this.order.execution_frequency = val.execution_frequency
      this.order.remark = val.remark
      this.frequency_type =val.frequency_type
      this.order.day_count = val.day_count
    
    
      var patient_id = this.$route.query.patient_id
      this.patient_id = patient_id
      this.record_date_str = parseTime(new Date(), '{y}-{m}-{d}')
    },
    menuComfirmFour:function(start_time,remark){
       var params = {
         patient_id:this.$route.query.patient_id,
         record_date:parseInt(this.$route.query.date),
         start_time:start_time,
         module:4,
         remark:remark,
       }
      
      saveMobileInformation(params).then(response=>{
        if(response.data.state == 1){
           this.infor_visibility = false
           Toast.success('申请成功')
        }
      })
    },
    menuCancleFour:function(){
     this.infor_visibility = false
    
    },
    back () {
      this.$emit('close')
    },
    selectStartTimeAction: function () {
      this.$refs.start_time_picker.open()
    },
    didSelectStartTime: function (time) {
      this.advice_start_time = parseTime(time, '{y}-{m}-{d} {h}:{i}') + ':00'
    },
    querySearch (queryString, cb) {
     
      var restaurants = this.drugList
      restaurants.map(item => {
        item.value = item.drug_name
      })
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      console.log('results', results)
      cb(results)
    },
    createFilter (queryString) {
     
      return (restaurant) => {
        console.log("restaurant23223232323",restaurant)
        return (restaurant.drug_name.toLowerCase().indexOf(queryString.toLowerCase()) !=-1)
      }
    },
    getUnits(id){
     console.log("单位",this.unitsOption)
     var name = ""
      for(let i=0;i<this.unitsOption.length;i++){
        if(id == this.unitsOption[i].id){
           name = this.unitsOption[i].name
        }
      }
      return name
    },
    handleSelect (item) {
     
      this.drug_id = item.id
      console.log('itme33333333', item)
      this.current_drug_name = name
      var specai_name = item.dose + item.dose_unit +"*" +item.min_number + item.min_unit +"/" + item.max_unit
      this.order.advice_desc = specai_name
      this.order.drug_spec_unit = ""
      this.order.prescribing_number = item.prescribing_number
      this.order.prescribing_number_unit = item.prescribing_number_unit
      this.order.single_dose = item.single_dose
      this.order.single_dose_unit =this.getUnits(item.drug_dose_unit) 
      this.order.delivery_way  = item.delivery_way
      this.order.execution_frequency = item.execution_frequency
    },
    changeDrugName (name) {
      this.drug_id = 0
      this.way = 0
      this.drug_name_id = 0
      this.current_drug_name = name
      this.order.advice_desc = ''
      this.drugSpec = []
      this.current_drug_name = ''
    },
   
    createFilter1 (queryString) {
      return (restaurant) => {
        return (restaurant.drug_name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    changeDrugDesc (name) {
      // this.drug_id = 0
      //  this.way = 0
      // this.drug_name_id = 0
    },
    selectDrugSpecUnitAction: function () {
      this.sub_dialog_key = 5
      this.drug_spec_unit_show = true
    },
    selectPrescribingNumUnitAction: function () {
      this.sub_dialog_key = 2
      this.drug_spec_unit_show = true
    },
    selectSingleDoseAction: function () {
      this.sub_dialog_key = 1
      this.drug_spec_unit_show = true
    },
    selectDeliveryWayAction: function () {
      this.sub_dialog_key = 3
      this.drug_spec_unit_show = true
    },
    selectExecFrequencyAction: function () {
      this.sub_dialog_key = 4
      this.drug_spec_unit_show = true
    },
    comfirmAction: function () {
       
        var frequency_week =""
       if(this.weeks!=null && this.weeks.length>0){
         frequency_week =  this.weeks.join()
       }
      
       var params = {
         id:this.order.id,
         start_time:this.advice_start_time,
         advice_name:this.order.title,
         advice_desc:this.order.advice_desc,
         prescribing_number:parseInt(this.order.prescribing_number),
         prescribing_number_unit:this.order.prescribing_number_unit,
         single_dose:parseFloat(this.order.single_dose),
         single_dose_unit:this.order.single_dose_unit,
         delivery_way:this.order.delivery_way,
         execution_frequency:this.order.execution_frequency,
         remark:this.order.remark,
         frequency_type:this.frequency_type,
         frequency_week:frequency_week,
         advice_date:this.startTime,
         day_count:parseInt(this.order.day_count) 
       }
       console.log("params====",params)
       updateLongMobileAdvice(params).then(response=>{
          if(response.data.state == 1){
          
            Toast.success('保存成功')
            this.$emit('child-event');
            
          }
       })
    },

    chooseDrugSpecUnit (name) {
      this.order.drug_spec_unit = name
      this.drug_spec_unit_show = false
    },
    choosePrescribingNumberUnit (name) {
      this.order.prescribing_number_unit = name
      this.drug_spec_unit_show = false
    },
    chooseSingleDoseUnit (name) {
      this.order.single_dose_unit = name
      this.drug_spec_unit_show = false
    },
    chooseExecutionFrequency (name) {
      this.order.execution_frequency = name
      this.drug_spec_unit_show = false
    },
    chooseDeliveryWay (name) {
      this.order.delivery_way = name
      this.drug_spec_unit_show = false
    },
   
  },
  
}
</script>

<style lang="scss" scoped>
.newDoctorAdvice{
    height: 100%;
    display: flex;
    flex-direction: column;
    >:last-child{
        flex: 1;
        overflow-y: auto;
    }
    .inputCell{
        padding: 0 .875rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .625rem;
        >p{
            width: 5.2rem;
            display: inline-table;
        }
        >div{
            flex: 1;
        }
        .inline-input{
            width: 70%;
            height: 2.5rem;
        }
        .inline-input1{
            width: 70%;
            border: 1px solid #DCDFE6;
            border-radius: .25rem;
            padding: 0 15px;
            height: 2.5rem;
        }
    }
    .commonInput{
        height: 2.5rem;
        border: 1px solid #DCDFE6;
        border-radius: .25rem;
        width: 25%;
        font-size: 1rem;
        padding: 0 .3125rem;
    }
}
.newDoctorAdviceTitle{
    height: 3.125rem;
    display: flex;
    justify-content: space-between;
    padding: 0 .875rem;
    align-items: center;
    font-size: 1rem;
    background: #fff;
}
.adviceTitle{
    display: flex;
    padding: .5rem .875rem;
    font-size: .875rem;
    justify-content: space-between;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: .625rem;
    >div:first-child{
        display: flex;
        align-items: center;
    }
    >div:last-child{
        display: flex;
        align-items: center;
    }
}
.timeSpan{
    padding: .3125rem;
    border: 1px solid #e5e5e5;
    border-radius: .25rem;
}
.newListBoxPopup{
    width: 60%;
    height: 60%;
    left: 50% !important;
    top: 50% !important;
    transform: translate3d(-50%,-50%,0) !important;
    overflow-y: auto;
    border-radius: .625rem;
}
.listBox{
    >div{
        padding: 1rem .625rem;
        border-bottom: 1px solid #e5e5e5;
        text-align: center;
    }
}
</style>

<style lang="scss">
.newDoctorAdvice{
    .startTimePicker{
        z-index: 4100 !important;
    }
    .v-modal{
        z-index: 4009 !important;
    }
    .el-input__inner{
        height: 2.5rem;
        line-height: 2.5rem;
    }
    .datetimePicker{
        .picker-item{
            font-size: .875rem !important;
            height: 44px;
            line-height: 44px;

        }
        .mint-datetime-action{
            font-size: .9375rem !important;
        }

    }
}
.el-autocomplete-suggestion{
    z-index: 4011 !important;
}
.inputCell{
    .el-input{
        font-size: 1rem !important;
    }
}
.el_radio{
  .el-radio__label{
    font-size: 14px !important;
  }
}
</style>
