<template>
  <div v-if="visibility">
    <div v-if="sub_dialog_key == 0" class="Dialog">
      <div class="DialogTit">
        <div class="back" @click="backAction">
          <span class="iconfont">&#xe720;</span>返回
        </div>
        <h1 class="name">{{ dialog_title }}</h1>
        <span class="success" @click="comfirmAction">保存</span>
      </div>
      <div class="DialogContent choose advice-top">
        <div class="content clearfix">
          <div class="newContent">
            <div class="cell" v-show="order.parent_id == 0">
              <label>开始时间</label>
              <el-input
                style="width:96%"
                :value="start_time_str"
                readonly
                @focus="selectStartTimeAction"
              ></el-input>
            </div>

            <div class="cell">
              <label>医嘱名称</label>
              <el-autocomplete
                style="width:100%;"
                class="inline-input"
                v-model="order.title"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
                @input="changeDrugName"
              ></el-autocomplete>
              <!--<el-input style="width:96%" v-model="order.title"></el-input>-->
              <!--<el-select-->
                <!--v-model="order.title"-->
                <!--filterable-->
                <!--clearable-->
                <!--allow-create-->
                <!--placeholder="请选择(输入可搜索)"-->
                <!--style="width:200px"-->
                <!--@change="changeDrugName"-->
              <!--&gt;-->
                <!--<el-option-->
                  <!--v-for="item,index in all_drug"-->
                  <!--:key="index"-->
                  <!--:label="item.drug_name"-->
                  <!--:value="item.drug_name"-->
                <!--&gt;</el-option>-->
              <!--</el-select>-->
            </div>


            <div class="cell">
              <label>药品规格</label>
              <el-autocomplete
                style="width:2.6rem;"
                class="inline-input"
                v-model="order.advice_desc"
                :fetch-suggestions="querySearch1"
                placeholder="请输入内容"
                @select="handleSelect1"
                @input="changeDrugDesc"
              ></el-autocomplete>
              <!--<el-input style="width:96%" v-model="order.advice_desc"></el-input>-->

              <!--<el-select-->
                <!--v-model="order.advice_desc"-->
                <!--filterable-->
                <!--clearable-->
                <!--allow-create-->
                <!--placeholder="请选择(输入可搜索)"-->
                <!--style="width:140px"-->
                <!--@change="changeDrugDesc"-->

              <!--&gt;-->
                <!--<el-option-->
                  <!--v-for="item,index in drugSpec"-->
                  <!--:key="index"-->
                  <!--:label="item.drug_spec"-->
                  <!--:value="item.drug_spec"-->
                <!--&gt;</el-option>-->
              <!--</el-select>-->

              <input
                type="text"
                placeholder="单位"
                readonly
                class="inputBox"
                style="width:35%"
                v-model="order.drug_spec_unit"
                @focus="selectDrugSpecUnitAction"
              />
            </div>

            <div class="cell">
              <label>开药数量</label>
              <input
                type="number"
                class="inputBox"
                style="width:60%"
                onclick="this.select()"
                v-model="order.prescribing_number"
              />
              <input
                type="text"
                placeholder="单位"
                readonly
                class="inputBox"
                style="width:35%"
                v-model="order.prescribing_number_unit"
                @focus="selectPrescribingNumUnitAction"
              />
            </div>

            <div class="cell">
              <label>单次用量</label>
              <input
                type="number"
                onclick="this.select()"
                class="inputBox"
                style="width:60%"
                v-model="order.single_dose"
              />
              <input
                type="text"
                placeholder="单位"
                readonly
                class="inputBox"
                style="width:35%"
                v-model="order.single_dose_unit"
                @focus="selectSingleDoseAction"
              />
            </div>

            <div class="cell" v-show="order.parent_id == 0">
              <label>给药途径</label>
              <el-input
                placeholder="选择给药途径"
                readonly
                :disabled="mode == 3"
                v-model="order.delivery_way"
                @focus="selectDeliveryWayAction"
              ></el-input>
            </div>
            <!-- <div> -->

            <div class="cell" v-show="order.parent_id == 0">
              <label>执行频率</label>
              <el-input
                placeholder="选择执行频率"
                readonly
                style="width:100%"
                :disabled="mode == 3"
                v-model="order.execution_frequency"
                @focus="selectExecFrequencyAction"
              ></el-input>
            </div>

            <div class="cell" v-show="order.parent_id == 0">
              <label>医嘱嘱托</label>
              <input
                class="inputBox"
                style="width:100%"
                v-model="order.remark"
              />
            </div>
            <!-- </div> -->
          </div>
        </div>
      </div>
    </div>

    <single-option-dialog
      :visibility="sub_dialog_key == 1"
      title="用量单位"
      @did-selected="didSelectSingleDoseUnit"
      @back="didCloseSingleOptionDialog"
      :options="single_dose_unit_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>

    <single-option-dialog
      :visibility="sub_dialog_key == 5"
      title="药品规格"
      @did-selected="didSelectDrugSpecUnit"
      @back="didCloseSingleOptionDialog"
      :options="drug_spec_unit_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>

    <single-option-dialog
      :visibility="sub_dialog_key == 2"
      title="开药数量单位"
      @did-selected="didSelectPrescribingNumUnit"
      @back="didCloseSingleOptionDialog"
      :options="prescribing_number_unit_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>

    <single-option-dialog
      :visibility="sub_dialog_key == 3"
      title="给药途径"
      @did-selected="didSelectDeliveryWay"
      @back="didCloseSingleOptionDialog"
      :options="delivery_way_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>

    <single-option-dialog
      :visibility="sub_dialog_key == 4"
      title="执行频率"
      @did-selected="didSelectExecFrequency"
      @back="didCloseSingleOptionDialog"
      :options="execution_frequency_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>

    <mt-datetime-picker
      ref="start_time_picker"
      type="datetime"
      @confirm="didSelectStartTime"
      v-model="start_time"
    ></mt-datetime-picker>
  </div>
</template>

<script>
  import SingleOptionDialog from "../new_order/single_option_dialog";
  import {Toast} from "vant";
  import {parseTime} from "@/utils";
  import {GetAllDrug} from "@/api/drug/drug"

  export default {
    name: "subModifyOrderForm",
    components: {
      SingleOptionDialog
    },
    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 {
        visibility: false,
        sub_dialog_key: 0,
        start_time_str: "",
        start_time: new Date(),
        drug_id: 0,
        way:0,
        mode: 1,
        order: {
          id: 0,
          parent_id: 0,
          // start_time: "",
          // record_time: "",
          advice_doctor: 0,
          title: "",
          advice_desc: "",
          drug_spec: "",
          drug_spec_unit: "",
          remark: "",
          delivery_way: "",
          execution_frequency: "",
          single_dose: "",
          single_dose_unit: "",
          prescribing_number: "",
          prescribing_number_unit: ""
        }
      };
    },
    computed: {
      dialog_title: function () {
        if (this.mode == 1) {
          return "修改子药";
        }
      }
    },
    methods: {
      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

          }
        }
      },
      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);
      },
      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.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.order.advice_desc = ''
        this.drugSpec = []


      },
      changeDrugDesc(name) {
        this.drug_id = 0
        this.way = 0


      },
      didSelectStartTime: function (time) {
        this.start_time_str = parseTime(time, "{y}-{m}-{d} {h}:{i}") + ":00";
      },
      selectStartTimeAction: function () {
        this.$refs.start_time_picker.open();
      },
      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;
      },
      dismiss: function () {
        this.visibility = false;
        this.sub_dialog_key = 0;
      },
      backAction: function () {
        this.visibility = false;
        this.sub_dialog_key = 0;
        this.$emit("back");
      },
      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,
          });
        }
      },

      selectSingleDoseAction: function () {
        this.sub_dialog_key = 1;
      },
      didSelectSingleDoseUnit: function (index) {
        if (index == -1) {
          this.order.single_dose_unit = "";
        } else {
          this.order.single_dose_unit = this.single_dose_unit_options[index].name;
        }

        this.didCloseSingleOptionDialog();
      },
      selectDrugSpecUnitAction: function () {
        this.sub_dialog_key = 5;
      },
      didSelectDrugSpecUnit: function (index) {
        if (index == -1) {
          this.order.drug_spec_unit = "";
        } else {
          this.order.drug_spec_unit = this.drug_spec_unit_options[index].name;
        }

        this.didCloseSingleOptionDialog();
      },
      selectPrescribingNumUnitAction: function () {
        this.sub_dialog_key = 2;
      },
      didSelectPrescribingNumUnit: function (index) {
        if (index == -1) {
          this.order.prescribing_number_unit = "";
        } else {
          this.order.prescribing_number_unit = this.prescribing_number_unit_options[
            index
            ].name;
        }

        this.didCloseSingleOptionDialog();
      },
      selectDeliveryWayAction: function () {
        this.sub_dialog_key = 3;
      },
      didSelectDeliveryWay: function (index) {
        this.didCloseSingleOptionDialog();
        if (index == -1) {
          this.order.delivery_way = "";
          return;
        }
        this.order.delivery_way = this.delivery_way_options[index].name;
      },
      selectExecFrequencyAction: function () {
        this.sub_dialog_key = 4;
      },
      didSelectExecFrequency: function (index) {
        this.didCloseSingleOptionDialog();
        this.order.execution_frequency = this.execution_frequency_options[
          index
          ].name;
      }, 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)
            }

            this.medicals = medicalList
            this.base_drug_list = base_drug_list
            this.private_drug_config = private_drug_cofig
            this.base_drug_cofig = base_drug_cofig


          }
        })
      },


      didCloseSingleOptionDialog: function () {
        this.sub_dialog_key = 0;
      }
    }, created() {
      var patient_id = this.$route.query.patient_id
      this.GetAllDrug(patient_id)
    }
  };
</script>

<style style="stylesheet/scss" lang="scss" scoped>
  .content {
  .cell {
  @media only screen and (max-width: 415px) {
  height: 2.4rem;
  }
  float: left;
  width: 4.5rem;

  margin: 0.35rem 0.3rem 0.1rem 0.4rem;
  label {
  display: block;
  height: 0.9rem;
  line-height: 0.9rem;
  color: $title-color;
  font-size: 0.45rem;
  }
  .el-input__inner {
  font-size: 0.32rem;
  }
  select {
  width: 100%;
  padding: 0.2rem 0;
  border: 1px $border-color solid;
  border-radius: 2px;
  padding-left: 5px;
  }

  .inputBox {
  border: 1px $border-color solid;
  border-radius: 2px;
  padding: 0.14rem 0;
  padding-left: 5px;
  @media only screen and (max-width: 767px) {
  padding: 0.08rem 0;
  }
  }

  .textarea {
  width: 100%;
  height: 1.22rem;
  border: 1px $border-color solid;
  border-radius: 2px;
  padding-left: 5px;
  }
  }

  .doctor-name {
  line-height: 0.7rem;
  font-size: 0.35rem;
  margin-left: 0.4rem;
  }
  }
</style>
<
style lang

=
"scss"
>
.content {

.newContent {

.cell {

.inputBox {

@media only screen and (max-width: 767px) {
  padding:

10.6px

0 !important;
  padding-left:

5px

!important;
  font-size:

0.42rem

!important;
}

}
.el-input__inner {
  font-size: 0.42rem;
}

.is-disabled {

.el-input__inner {
  color: #999;
}

}
}
}
}
</style>
