<template>
    <div>
        <div class="newDoctorAdvice">
            <van-sticky>
                <div class="newDoctorAdviceTitle">
                    <span @click="back">返回</span>
                    <span>{{ formTitle }}</span>
                    <span @click="comfirmAction">保存</span>
                </div>
            </van-sticky>
            <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="请输入内容"
                        @select="handleSelect1"
                        @input="changeDrugDesc"
                        ></el-autocomplete>
                        <input
                            type="text"
                            placeholder="单位"
                            readonly
                            class="commonInput"
                            v-model="order.drug_spec_unit"
                            @focus="selectDrugSpecUnitAction"
                        />
                    </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
                            type="number"
                            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>
            <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 prescribing_number_unit_options" :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 single_dose_unit_options" :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 {Toast} from 'vant'
import {GetAllDrug} from "@/api/drug/drug"
export default {
    props: {
        drug_spec_unit_options: {
            type: Array,
            default: function () {
                return []
            }
        },
        delivery_way_options: {
            type: Array,
            default: function () {
                return []
            }
        },
        execution_frequency_options: {
            type: Array,
            default: function () {
                return []
            }
        },
        single_dose_unit_options: {
            type: Array,
            default: function () {
                return []
            }
        },
        prescribing_number_unit_options: {
            type: Array,
            default: function () {
                return []
            }
        },
        base_drug_list: {
            type: Array,
            default: function () {
                return []
            }
        },
        all_drug: {
            type: Array,
            default: function () {
                return []
            }
        },
        medicals: {
            type: Array,
            default: function () {
                return []
            }
        },
        base_drug_config: {
            type: Object,
            default: function () {
                return null
            }
        },
        private_drug_config: {
            type: Object,
            default: function () {
                return null
            }
        }
    },
    data(){
        return{
            formTitle:'修改子药',

            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: "",

                // 在新增子药才用到的字段
                parent_id: 0, // 父医嘱ID
                start_time: "",
                record_time: "",
                drug_id:"",
                drug_name_id:"",
                way:"",
            },
            drugSpec: [],

            drug_spec_unit_show:false,
            sub_dialog_key:0
        }
    },
    created() {
    //   var patient_id = this.$route.query.patient_id
    //   this.GetAllDrug(patient_id)
    },
    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'
    },
    methods:{
        back(){
            this.$emit('back')
        },
        querySearch (queryString, cb) {

            var restaurants = this.all_drug
            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)
            }
        },
        handleSelect (item) {
            this.drug_id = 0
            this.way = 0
            this.current_drug_name = name
            this.order.advice_desc = ''
            this.drugSpec = []
            for (let i = 0; i < this.all_drug.length; i++) {
                if (this.all_drug[i].drug_name == item.drug_name) {
                    this.drugSpec = this.all_drug[i].drug_specs
                }
            }
        },
        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)
            }
        },
        handleSelect1 (item) {
            this.drug_id = 0
            this.way = 0
            for (let i = 0; i < this.drugSpec.length; i++) {
                if (this.drugSpec[i].drug_spec == item.drug_spec) {
                    this.order.advice_desc = this.drugSpec[i].drug_spec
                    this.order.prescribing_number = this.drugSpec[i].prescribing_number
                    this.order.single_dose = this.drugSpec[i].single_dose
                    this.order.delivery_way = this.drugSpec[i].delivery_way
                    this.order.execution_frequency = this.drugSpec[i].execution_frequency
                    this.drug_id = this.drugSpec[i].id
                    this.way = this.drugSpec[i].type
                    if (this.drugSpec[i].drug_name_id) {
                        this.drug_name_id = this.drugSpec[i].drug_name_id
                    } else {
                        this.drug_name_id = 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 () {
            if(this.way == 2){ //自备药
            var arr = this.order.title.split("(自备药)")
            this.order.title = arr[0]
            }

            if (this.order.title.length == 0) {
            Toast.fail("请填写医嘱内容");
            return;
            }

            if (this.mode == 1) {
            this.$emit("did-modify", {
                id: this.order.id,
                parent_id: this.order.parent_id,
                title: this.order.title,
                advice_desc: this.order.advice_desc.toString(),
                remark: this.order.remark,
                delivery_way: this.order.delivery_way,
                execution_frequency: this.order.execution_frequency,
                single_dose: this.order.single_dose,
                single_dose_unit: this.order.single_dose_unit,
                prescribing_number: this.order.prescribing_number,
                prescribing_number_unit: this.order.prescribing_number_unit,
                start_time: this.start_time_str,
                drug_spec: this.order.drug_spec,
                drug_spec_unit: this.order.drug_spec_unit,
                doctor_advice: this.order.advice_doctor,
                drug_id: this.drug_id,
                way: this.way,
            });
            }
        },

        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
        },
        showWithModify: function (order) {
            var patient_id = this.$route.query.patient_id
            // this.GetAllDrug(patient_id)


            this.mode = 1;
            this.visibility = true;
            this.drug_id = order.drug_id

            this.way = order.way

            this.order.id = order.id;
            this.order.parent_id = order.parent_id;
            if( this.way  == 2){
            this.order.title = order.title+"(自备药)";
            }else{
            this.order.title = order.title
            }
            this.order.advice_desc = order.advice_desc;
            this.order.remark = order.remark;
            this.order.advice_doctor = order.advice_doctor

            this.start_time_str =
            parseTime(order.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";

            this.order.drug_spec = order.drug_spec;
            this.order.drug_spec_unit = order.drug_spec_unit;
            this.order.delivery_way =
            order.delivery_way == undefined || order.delivery_way == null
                ? ""
                : order.delivery_way;
            this.order.execution_frequency =
            order.execution_frequency == undefined ||
            order.execution_frequency == null
                ? ""
                : order.execution_frequency;
            this.order.single_dose = order.single_dose;
            this.order.single_dose_unit = order.single_dose_unit;
            this.order.prescribing_number = order.prescribing_number;
            this.order.prescribing_number_unit = order.prescribing_number_unit;
        },
        GetAllDrug(id) {
            const params = {
            patient_id: id
            }
            GetAllDrug(params).then(response => {
            if (response.data.state == 1) {
                this.all_drug = []
                var medicalList = response.data.data.private_drug_list
                var base_drug_list = response.data.data.base_drug_list
                var base_drug_cofig = response.data.data.base_drug_cofig
                var private_drug_cofig = response.data.data.private_drug_cofig

                if(private_drug_cofig != null && private_drug_cofig.drug_start == 1) {
                    for (let i = 0; i < medicalList.length; i++) {
                        if (medicalList[i].drug_specs != null) {
                        for (let a = 0; a < medicalList[i].drug_specs.length; a++) {
                            medicalList[i].drug_specs[a]['type'] = 2
                        }
                        }
                        let obj = {
                        drug_name: "",
                        drug_desc: "",
                        delivery_way: "",
                        execution_frequency: "",
                        single_dose: "",
                        single_dose_unit: "",
                        prescribing_number: "",
                        prescribing_number_unit: "",
                        type_id: "",
                        type: "",
                        drug_specs: [],
                        }
                        medicalList[i].drug_name = medicalList[i].drug_name + "(自备药)"
                        obj.drug_name = medicalList[i].drug_name
                        obj.delivery_way = medicalList[i].delivery_way
                        obj.execution_frequency = medicalList[i].execution_frequency
                        obj.single_dose = medicalList[i].single_dose
                        obj.prescribing_number = medicalList[i].prescribing_number
                        obj.type_id = medicalList[i].id
                        obj.type = 2
                        obj.drug_specs = medicalList[i].drug_specs

                        this.all_drug.push(obj)
                    }
                }


                for (let i = 0; i < base_drug_list.length; i++) {
                    if (base_drug_list[i].drug_specs != null) {
                        for (let a = 0; a < base_drug_list[i].drug_specs.length; a++) {
                        base_drug_list[i].drug_specs[a]['type'] = 1
                        }
                    }
                    let obj = {
                        drug_name: "",
                        drug_desc: "",
                        delivery_way: "",
                        execution_frequency: "",
                        single_dose: "",
                        single_dose_unit: "",
                        prescribing_number: "",
                        prescribing_number_unit: "",
                        type_id: "",
                        type: "",
                        drug_specs: [],
                    }

                    obj.drug_name = base_drug_list[i].drug_name
                    obj.delivery_way = base_drug_list[i].delivery_way
                    obj.execution_frequency = base_drug_list[i].execution_frequency
                    obj.single_dose = base_drug_list[i].single_dose
                    obj.prescribing_number = base_drug_list[i].prescribing_number
                    obj.type_id = base_drug_list[i].id
                    obj.type = 1
                    obj.drug_specs = base_drug_list[i].drug_specs
                    this.all_drug.push(obj)
                    }


                }
            })
        },
    }
}
</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;
    margin-bottom: .625rem;
    border-bottom: 1px solid #e5e5e5;
}
.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{
    .v-modal{
        z-index: 4009 !important;
    }
}
.el-autocomplete-suggestion{
    z-index: 4011 !important;
}
.inputCell{
    .el-input{
        font-size: 1rem !important;
    }
}
</style>