<template>
  <div v-if="visibility" class="Dialog">
    <div class="DialogTit">
      <div class="back" @click="backAction">
        <span class="iconfont">&#xe720;</span>返回
      </div>
      <h1 class="name">医嘱模板</h1>
      <span class="success" @click="submitAction">保存</span>
    </div>

    <div class="optionsBox">
      <div>
        <div v-for="(template, index) in templates" :key="index">
          <div class="template">
            <div class="template_name">
              <div
                v-show="
                  isFold(template.id) &&
                    !isTemplateSelectingAllAdvices(template)
                "
                class="select_all_btn"
                @click="selectTemplateAllAdviceAction(template)"
              >
                全选
              </div>
              <div
                v-show="
                  isFold(template.id) && isTemplateSelectingAllAdvices(template)
                "
                class="select_all_btn"
                @click="cancelSelectTemplateAllAdviceAction(template)"
              >
                取消全选
              </div>

              <span v-if="isFold(template.id)" class="iconfont">&#xe749;</span>
              <span v-if="!isFold(template.id)" class="iconfont">&#xe74a;</span>
              <div @click="foldTemplateAction(template.id)" class="name">
                {{ template.name }}
              </div>
            </div>
            <div
              v-show="isFold(template.id)"
              class="advice"
              v-for="(advice, index) in template.DoctorAdviceTemplate"
              :key="index"
            >
              <span v-if="advice.parent_id > 0" class="subdrug_info">
                <span>{{ advice.advice_name }}</span>
                <span>{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span>
                <span v-if="advice.prescribing_number">
                  {{ advice.prescribing_number }}
                  {{ advice.prescribing_number_unit }}
                </span>
                <span v-if="advice.single_dose"
                  >单次用量{{ advice.single_dose
                  }}{{ advice.single_dose_unit }}</span
                >
              </span>
              <van-checkbox
                v-else
                class="advice_info"
                :value="isAdviceSelecting(advice.id)"
                @click="selectAdviceAction(template, advice)"
              >
                <span>{{ advice.advice_name }}</span>
                <span>{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</span>
                <span v-if="advice.prescribing_number">
                  {{ advice.prescribing_number }}
                  {{ advice.prescribing_number_unit }}
                </span>
                <span v-if="advice.single_dose"
                  >单次用量{{ advice.single_dose
                  }}{{ advice.single_dose_unit }}</span
                >
                <span>{{ advice.delivery_way }}</span>
                <span>{{ advice.execution_frequency }}</span>
                <!--{{ advice.advice_name }} {{ advice.advice_desc }} {{ advice.prescribing_number }}{{ advice.prescribing_number_unit }} 单次用量{{ advice.single_dose }}{{ advice.single_dose_unit }} {{ advice.delivery_way }} {{ advice.execution_frequency }}-->
              </van-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SelectAdviceTemplate",
  props: {
    visibility: {
      type: Boolean,
      default: false
    },
    templates: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      fold_template_ids: [],
      selecting_advice_ids: []
    };
  },
  methods: {
    backAction: function() {
      this.$emit("back");
    },
    foldTemplateAction: function(template_id) {
      for (let index = 0; index < this.fold_template_ids.length; index++) {
        if (this.fold_template_ids[index] == template_id) {
          this.fold_template_ids.splice(index, 1);
          return;
        }
      }
      this.fold_template_ids.push(template_id);
    },
    selectAdviceAction: function(template, advice) {
      var isCancelSelect = false;
      for (let index = 0; index < this.selecting_advice_ids.length; index++) {
        if (this.selecting_advice_ids[index].advice_id == advice.id) {
          this.selecting_advice_ids.splice(index, 1);
          isCancelSelect = true;
          break;
        }
      }
      if (!isCancelSelect) {
        this.selecting_advice_ids.push({
          template_id: template.id,
          advice_id: advice.id
        });
      }
    },
    selectTemplateAllAdviceAction: function(template) {
      for (
        let index = 0;
        index < template.DoctorAdviceTemplate.length;
        index++
      ) {
        const advice = template.DoctorAdviceTemplate[index];
        if (advice.parent_id > 0) {
          continue;
        }
        var didSelect = false;
        for (
          let s_a_index = 0;
          s_a_index < this.selecting_advice_ids.length;
          s_a_index++
        ) {
          if (this.selecting_advice_ids[s_a_index].advice_id == advice.id) {
            didSelect = true;
            break;
          }
        }
        if (!didSelect) {
          this.selecting_advice_ids.push({
            template_id: template.id,
            advice_id: advice.id
          });
        }
      }
    },
    cancelSelectTemplateAllAdviceAction: function(template) {
      for (
        let index = this.selecting_advice_ids.length - 1;
        index >= 0;
        index--
      ) {
        if (this.selecting_advice_ids[index].template_id == template.id) {
          this.selecting_advice_ids.splice(index, 1);
        }
      }
    },
    submitAction: function() {
      var advices = [];
      // WAIN: 效率低，可以通过在 selecting_advice_ids 加上 template_index 和 advice_index 字段来消除 this.templates 的循环
      for (let t_a_i = 0; t_a_i < this.selecting_advice_ids.length; t_a_i++) {
        const tpl_advice = this.selecting_advice_ids[t_a_i];
        for (let t_i = 0; t_i < this.templates.length; t_i++) {
          const tpl = this.templates[t_i];
          if (tpl.id == tpl_advice.template_id) {
            var child_begin = false;
            for (let a_i = 0; a_i < tpl.DoctorAdviceTemplate.length; a_i++) {
              const adv = tpl.DoctorAdviceTemplate[a_i];
              if (adv.id == tpl_advice.advice_id) {
                advices.push(adv);
                child_begin = true;
              } else if (child_begin == true) {
                if (adv.parent_id == tpl_advice.advice_id) {
                  advices.push(adv);
                } else {
                  break;
                }
              }
            }
          }
        }
      }
      this.$emit("finish", advices);

      this.$nextTick(() => {
        this.fold_template_ids = [];
        this.selecting_advice_ids = [];
      });
    },

    isFold: function(template_id) {
      for (let index = 0; index < this.fold_template_ids.length; index++) {
        if (this.fold_template_ids[index] == template_id) {
          return true;
        }
      }
      return false;
    },
    isAdviceSelecting: function(advice_id) {
      for (let index = 0; index < this.selecting_advice_ids.length; index++) {
        if (this.selecting_advice_ids[index].advice_id == advice_id) {
          return true;
        }
      }
      return false;
    },
    isTemplateSelectingAllAdvices: function(template) {
      var count = 0;
      for (let t_a_i = 0; t_a_i < this.selecting_advice_ids.length; t_a_i++) {
        if (this.selecting_advice_ids[t_a_i].template_id == template.id) {
          count++;
        }
      }

      var p_advice_count = 0;
      for (
        let index = 0;
        index < template.DoctorAdviceTemplate.length;
        index++
      ) {
        if (template.DoctorAdviceTemplate[index].parent_id == 0) {
          p_advice_count++;
        }
      }
      if (count < p_advice_count) {
        return false;
      } else {
        return true;
      }
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss">
.optionsBox {
  background: #fff;
  max-height: 9.6rem;
  min-height: 5rem;
  overflow-y: scroll;
  @media only screen and (max-width: 811px) {
    max-height: 11.8rem !important;
  }
  @media only screen and (min-width: 415px) and (max-width: 737px) {
    max-height: 14.8rem !important;
  }
  ul {
    li {
      height: 1rem;
      line-height: 1rem;
      border-bottom: 1px #e5e5e5 solid;
      padding: 0 0.38rem;
    }
    .tick {
      position: relative;
      &::before {
        content: "";
        display: inline-block;
        border: 2px solid $main-color;
        border-top-width: 0;
        border-right-width: 0;
        width: 0.3rem;
        height: 0.15rem;
        -webkit-transform: rotate(-50deg);
        position: absolute;
        top: 0.38rem;
        right: 0.44rem;
      }
    }
  }

  .template {
    border-bottom: 1px #e5e5e5 solid;
    overflow: hidden;
    .template_name {
      height: 1.2rem;
      line-height: 1.2rem;
      padding: 0 0.38rem;

      .select_all_btn {
        display: inline-block;
        border: 1px #409eff solid;
        color: #409eff;
        font-size: 0.3rem;
        height: 0.5rem;
        line-height: 0.5rem;
        padding: 0 0.1rem;
        margin-right: 0.1rem;
        border-radius: 0.08rem;
      }
      .name {
        display: inline-block;
        width: 76%;
        font-size: 0.45rem;
      }
    }

    .advice {
      border-top: 1px #e5e5e5 solid;
      margin-left: 0.38rem;
      color: #445a70;

      .advice_info {
        min-height: 1rem;
        line-height: 1rem;
        padding: 0 0.38rem 0 0;
      }
      .van-checkbox__icon {
        float: left;
        width: 8%;
        margin-top: 6px;
        @media only screen and (min-width: 768px) {
          margin-top: 10px;
        }
      }
      .van-checkbox__label {
        float: left;
        width: 92%;
        line-height: 1rem;
        font-size: 0.45rem;
      }
      .van-checkbox__label {
        margin-left: 0px;
      }
      .subdrug_info {
        height: 1rem;
        line-height: 1rem;
        padding: 0 0.38rem 0 0.9rem;
      }
    }
  }
}
.CheckBox {
  background: #fff;
  max-height: 6.8rem;
  min-height: 5rem;
  overflow-y: scroll;
  @media only screen and (max-width: 812px) {
    max-height: 8rem !important;
    min-height: 8rem !important;
  }
  @media only screen and (max-width: 768px) {
    max-height: 16rem !important;
    min-height: 8rem !important;
  }
  ul {
    li {
      line-height: 1rem;
    }
  }
}
</style>
