<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="inputCell">
                    <div>开始时间：<span class="timeSpan" @click="selectStartTimeAction">{{ advice_start_time }}</span></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;">
                        <el-autocomplete
                        class="inline-input"
                        v-model="order.advice_desc"
                        :fetch-suggestions="querySearch1"
                        placeholder="请输入内容"
                        ></el-autocomplete>
                    </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>
            <mt-datetime-picker
            ref="anther_start_time"
            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" style="z-index:5000">
                <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>
    </div>
</template>


<script>
import {parseTime} from '@/utils'
import { saveSelfChildDrugLongAdvice } from '@/api/advice'
import {Toast} from 'vant'
export default {
    props: {
      parent_id: {
        type: Number,
        default: () => {
            return 0
        }
     },
     groupno: {
        type: Number,
        default: () => {
            return 0
        }
     },
     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 []
      }
    },
    },
    data(){
        return{
            formTitle:'新增子药',
            advice_start_time:"",
            current_drug_name: "",
            current_drug_spec: "",
            drug_id: 0,
            drug_name_id:0,
            way:0,
            mode: 1,
            order: {
            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
            record_time: '',
            drug_id: '',
            drug_name_id: '',
            way: '',
            group_no:0,
           },
            drugSpec: [],
            start_time: new Date(),
            drug_spec_unit_show:false,
            sub_dialog_key:0,
            frequency_type:'',
            weeks:[],
            drug_spec_unit_options:[],
            startTime:""
        }
    },
    mounted () {
        // console.log('drug_spec_unit_options',this.execution_frequency_options)
        var patient_id = this.$route.query.patient_id
        this.patient_id = patient_id
        this.record_date_str = parseTime(new Date(), '{y}-{m}-{d}')
        this.start_time_str = parseTime(this.start_time, '{y}-{m}-{d} {h}:{i}') + ':00'
        this.record_date_str = parseTime(new Date(), '{y}-{m}-{d}')

        var nowDate = new Date()
        var nowYear = nowDate.getFullYear()
        var nowMonth = nowDate.getMonth() + 1
        var nowDay = nowDate.getDate()
        var hours = nowDate.getHours()
        var min = nowDate.getMinutes()
        var nowTime = nowYear +'-' +(nowMonth < 10 ? '0' + nowMonth : nowMonth) +'-' +(nowDay < 10 ? '0' + nowDay : nowDay) + ' ' + (hours < 10 ? '0' + hours : hours) +':' + (min < 10 ? '0' + min : min) + ':00'
        this.advice_start_time = nowTime
        var startTime = nowYear +'-' +(nowMonth < 10 ? '0' + nowMonth : nowMonth) +'-' +(nowDay < 10 ? '0' + nowDay : nowDay) 
        this.startTime = startTime
    },
    methods:{
        didSelectStartTime: function (time) {
          this.advice_start_time = parseTime(time, '{y}-{m}-{d} {h}:{i}') + ':00'
        },
        selectStartTimeAction(){
            this.$refs.anther_start_time.open()
        },
        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
        },
        back(){
            this.$emit('back')
        },
        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 返回建议列表的数据
            cb(results)
        },
        createFilter (queryString) {
            return (restaurant) => {
                //return (restaurant.drug_name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
                return (restaurant.drug_name.indexOf(queryString) != -1)
            }
        },
     
        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 = ''
        },
        querySearch1 (queryString, cb) {
            var restaurants = this.drugSpec
            restaurants.map(item => {
                item.value = item.drug_spec
            })
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
            // 调用 callback 返回建议列表的数据
            cb(results)
        },
        createFilter1 (queryString) {
            return (restaurant) => {
                return (restaurant.drug_name.toLowerCase().indexOf(queryString.toLowerCase()) === 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(){
          console.log("哈哈哈哈哈",this.parent_id)
          var params = {
            patient_id:parseInt(this.$route.query.patient_id),
            parent_id:this.parent_id,
            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,
            start_time:this.advice_start_time,
            group_no:this.groupno,
            advice_date:this.startTime,
          }
          console.log("params---------------",params)
          saveSelfChildDrugLongAdvice(params).then(response=>{
             if(response.data.state == 1){
               var msg = response.data.data.msg
               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
        },
        showWithNew: function () {
            this.mode = 1;
            this.visibility = true;
            this.drug_id = 0
            this.way = 0
            this.current_drug_name = ""
            this.current_drug_spec = ""
            this.order.title = "";
            this.order.advice_desc = "";
            this.order.drug_spec = "";
            this.order.drug_spec_unit = "";
            this.order.delivery_way = "";
            this.order.execution_frequency = "";
            this.order.single_dose = "";
            this.order.single_dose_unit = "";
            this.order.prescribing_number = "";
            this.order.prescribing_number_unit = "";
            this.order.remark = "";
            this.order.drug_id = 0;
            this.order.way = 0;
        },
        showWithNewSubDrug: function (
            parent_id,
            parent_record_time,
            parent_start_time,
            parent_delivery_way,
            parent_execution_frequency,
            group_no,
        ) {
            this.mode = 3;
            this.visibility = true;

            this.order.group_no = group_no
            this.order.parent_id = parent_id;
            this.order.record_time = parent_record_time;
            this.order.start_time = parent_start_time;
            this.order.title = "";
            this.order.advice_desc = "";
            this.order.remark = "";
            this.order.drug_spec = "";
            this.order.drug_spec_unit = "";
            this.order.delivery_way =
            parent_delivery_way == undefined || parent_delivery_way == null
                ? ""
                : parent_delivery_way;
            this.order.execution_frequency =
            parent_execution_frequency == undefined ||
            parent_execution_frequency == null
                ? ""
                : parent_execution_frequency;
            this.order.single_dose = "";
            this.order.single_dose_unit = "";
            this.order.prescribing_number = "";
            this.order.prescribing_number_unit = "";
            this.drug_id = 0
            this.way = 0
            this.drug_name_id = 0
            this.order.drug_id = 0;
        },

        getUnits(id){
            console.log("drug_spec_unit_options",this.drug_spec_unit_options)
            var name = ""
            for(let i=0;i<this.drug_spec_unit_options.length;i++){
                if(id == this.drug_spec_unit_options[i].id){
                name = this.drug_spec_unit_options[i].name
                }
            }
        return name
      },
    }
}
</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%;
        }
        .inline-input1{
            width: 70%;
            border: 1px solid #DCDFE6;
            border-radius: .25rem;
            padding: 0 15px;
        }
    }
    .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;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: .625rem;
}
.adviceTitle{
    display: flex;
    padding: .3125rem .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 #C0C4CC;
    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;
    }
    .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>