<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" style="width:91%">
              <label>医嘱内容</label>
              <!-- <input class="inputBox" style="width:96%" v-model="order.title" /> -->
              <!-- <el-input v-model="order.title"></el-input> -->
              <el-autocomplete
                style="width:100%;"
                class="inline-input"
                v-model="order.title"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
                @input="changeDrugName"
              ></el-autocomplete>

              <!-- <el-select
                v-model="order.title"
                filterable
                clearable
                allow-create
                placeholder="请选择(输入可搜索)"
                style="width:100%;"
                @change="changeDrugName"
              >
                <el-option
                  v-for="(item,index) in all_drug"
                  :key="index"
                  :label="item.drug_name"
                  :value="item.drug_name"
                ></el-option>
              </el-select> -->
            </div>
            <div class="cell">
              <label>药品规格</label>
              <!--<input class="inputBox" style="width:62.5%" v-model="order.advice_desc">-->

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

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

              >
                <el-option
                  v-for="(item,index) in drugSpec"
                  :key="index"
                  :label="item.drug_spec"
                  :value="item.drug_spec"
                ></el-option>
              </el-select> -->
              <el-autocomplete
                style="width:2.6rem;"
                class="inline-input"
                v-model="order.advice_desc"
                :fetch-suggestions="querySearch1"
                placeholder="请输入内容"
                @select="handleSelect1"
                @input="changeDrugDesc"
              ></el-autocomplete>

              <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%"
                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"
                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 class="cell" v-show="order.parent_id == 0">
              <label>执行频率</label>
              <el-input
                placeholder="选择执行频率"
                readonly
                :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>

    <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>
  </div>
</template>

<script>
import SingleOptionDialog from './single_option_dialog'
import {Toast} from 'vant'
import {GetAllDrug, getDrugDescByDrugName, getSelfMedicalList} from '@/api/drug/drug'

export default {
  name: 'OrderForm',
  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,
      current_drug_name: '',
      current_drug_spec: '',
      drug_id: 0,
      way: 0,
      drug_name_id: 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: []
    }
  },
  computed: {
    dialog_title: function () {
      if (this.mode == 1) {
        return '新增医嘱内容'
      } else if (this.mode == 2) {
        return '修改医嘱内容'
      } else {
        return '新增子药'
      }
    }
  },
  methods: {
    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
    },
    showWithEdit: function (order) {
      this.mode = 2
      this.visibility = true
      this.drug_id = order.drug_id
      this.way = order.way
      this.drug_name_id = order.drug_name_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.drug_spec = order.drug_spec
      this.order.drug_spec_unit = order.drug_spec_unit
      this.order.delivery_way = order.delivery_way
      this.order.execution_frequency = 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
      this.order.remark = order.remark
    },
    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 = ''
    },
    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 == 1) {
        this.drug_name_id = this.drug_id
      }
      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.all_drug.length > 0) {
        var arr = []
        for (let i = 0; i < this.all_drug.length; i++) {
          if (this.order.title == this.all_drug[i].drug_name) {
            arr = this.all_drug[i].drug_specs
          }
        }
   
        if (arr.length > 0) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].drug_spec == this.order.advice_desc) {
              this.drug_id = arr[i].id
              this.way = 2
            }
          }
        }
      }
      if (this.mode == 1) {
        this.$emit('did-create-new', {
          title: this.order.title,
          advice_desc: this.order.advice_desc.toString(),
          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,
          remark: this.order.remark,
          drug_spec: this.order.drug_spec,
          drug_spec_unit: this.order.drug_spec_unit,
          drug_id: this.drug_id,
          way: this.way,
          drug_name_id: this.drug_name_id
        })
      } else if (this.mode == 2) {
        this.$emit('did-modify', {
          title: this.order.title,
          advice_desc: this.order.advice_desc.toString(),
          drug_spec: this.order.drug_spec,
          drug_spec_unit: this.order.drug_spec_unit,
          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,
          drug_id: this.drug_id,
          way: this.way,
          remark: this.order.remark,
          drug_name_id: this.drug_name_id

        })
      } else if (this.mode == 3) {
        this.$emit('did-create-subdrug', {
          group_no: this.order.group_no,
          parent_id: this.order.parent_id,
          record_time: this.order.record_time,
          start_time: this.order.start_time,
          title: this.order.title,
          advice_desc: this.order.advice_desc.toString(),
          drug_spec: this.order.drug_spec,
          drug_spec_unit: this.order.drug_spec_unit,
          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,
          drug_id: this.drug_id,
          way: this.way
        })
      }
    },

    selectSingleDoseAction: function () {
      this.sub_dialog_key = 1
    },
    didSelectSingleDoseUnit: function (index) {
      this.didCloseSingleOptionDialog()
      if (index == -1) {
        this.order.single_dose_unit = ''
      } else {
        this.order.single_dose_unit = this.single_dose_unit_options[index].name
      }
    },
    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) {
      this.didCloseSingleOptionDialog()

      if (index == -1) {
        this.order.prescribing_number_unit = ''
      } else {
        this.order.prescribing_number_unit = this.prescribing_number_unit_options[
          index
        ].name
      }
    },
    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()
      if (index == -1) {
        this.order.execution_frequency = ''
        return
      }
      this.order.execution_frequency = this.execution_frequency_options[
        index
      ].name
    },

    didCloseSingleOptionDialog: function () {
      this.sub_dialog_key = 0
    },
    rand (min, max) {
      return Math.floor(Math.random() * (max - min)) + min
    },
    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_config
          var private_drug_cofig = response.data.data.private_drug_config

          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: '',
                custom_id: '',
                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.custom_id = this.rand(10000000, 99999999)
              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: '',
              custom_id: '',
              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.custom_id = this.rand(10000000, 99999999)
            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
      })
    },
    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 = ''
 
    },
    changeDrugDesc (name) {
      this.drug_id = 0
      this.way = 0
      this.drug_name_id = 0
    },
    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
        }
      }
    },
    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
          }
        }
      }
    }

  },
  created () {
  }
}
</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 0rem 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: 4px;
    padding: 0.14rem 0;
    padding-left: 5px;
    @media only screen and (max-width: 415px) {
      padding: 12px 0;
    }
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      padding: 9.4px 0;
    }
    @media only screen and (min-width: 768px) {
      height: 60px;
      line-height: 60px;
      font-size: 0.45rem;
    }
  }

  .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 {
    overflow: hidden;
  }

  .cell {

    .inputBox {

      @media only screen and (max-width: 767px) {
        padding:0.33rem 0 !important;
        padding-left:5px !important;
        font-size: 0.42rem !important;
      }

    }
    .el-input__inner {
      font-size: 0.45rem;
      height:1.250rem;
      line-height:1.25rem;
    }

  }
}
</style>
