<template>
  <el-popover
    v-model="visible"
    class="trials-select"
    placement="top"
    trigger="manual"
    width="300"
  >
    <div class="trials-select-box">
      <div
        style="
          position: absolute;
          top: 0;
          left: 0;
          width: 300px;
          background: #fff;
          padding: 15px 15px 0;
        "
      >
        <el-input
          v-model="inputValue"
          prefix-icon="el-icon-search"
          clearable
          @input="inputChange"
        />
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 36px;
            padding: 0 5px;
          "
        >
          <div
            style="
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 150px;
            "
          >
            {{ $t("trials:trials-list:table:researchNumber") }}
          </div>
          <div
            style="
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 130px;
            "
          >
            {{ $t("trials:trials-list:table:sponsor") }}
          </div>
          <div
            style="
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 160px;
            "
          >
            {{ $t("trials:trials-list:table:experimentName") }}
          </div>
        </div>
      </div>
      <el-tooltip
        placement="left"
        class="trials-select"
        width="300"
        trigger="hover"
        :open-delay="500"
        v-for="(item, index) of resultFilter"
        :key="item.Id"
      >
        <div slot="content">
          {{ $t("trials:trials-list:table:researchNumber") }}:
          {{ item.ResearchProgramNo }}
          <br />
          {{ $t("trials:trials-list:table:sponsor") }}:
          {{ item.Sponsor }}
          <br />
          {{ $t("trials:trials-list:table:experimentName") }}:
          {{ item.ExperimentName }}
        </div>
        <div
          class="options_item"
          :class="{
            selected: item.TrialId === data.TrialId,
            selectedIndex: selectIndex === index,
          }"
          @click.stop="selectTrials(item, index)"
        >
          <div
            style="
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 150px;
            "
          >
            {{ item.ResearchProgramNo }}
          </div>
          <div
            style="
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 80px;
            "
          >
            {{ item.Sponsor }}
          </div>
          <div
            style="
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 160px;
            "
          >
            {{ item.ExperimentName }}
          </div>
        </div>
      </el-tooltip>
    </div>
    <div
      slot="reference"
      :class="{ 'trials-select-reference': true, disabled: status === 'visit' }"
      @click.stop="status === 'trial' ? (visible = !visible) : false"
    >
      <el-tooltip content="Top center" placement="top" style="width: 100%">
        <div slot="content">
          {{ $t("trials:trials-list:table:researchNumber") }}:
          {{ data.ResearchProgramNo }}
          <br />
          {{ $t("trials:trials-list:table:experimentName") }}:
          {{ data.ExperimentName }}
          <br />
          {{ $t("trials:trials-list:table:sponsor") }}:
          {{ data.Sponsor }}
        </div>
        <span class="text-ellipsis"> {{ data.ResearchProgramNo }}</span>
      </el-tooltip>
      <span class="tip-span">
        <span
          class="el-icon-arrow-down tip-span"
          :class="{ selected: visible }"
        />
      </span>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "trialsSelect",
  props: {
    options: {
      required: true,
      default: () => [],
    },
    data: {
      required: true,
      default: () => {},
    },
    status: {
      required: true,
      default: "trial",
    },
  },
  data() {
    return {
      visible: false,
      resultFilter: [],
      inputValue: null,
      selectIndex: null,
    };
  },
  mounted() {
    document.onkeydown = (e) => {
      if (!this.visible) return;
      //事件对象兼容
      let e1 =
        e || event || window.event || arguments.callee.caller.arguments[0];
      //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
      //左
      if (e1 && e1.keyCode == 40) {
        // 按下箭头
        if (this.resultFilter.length - 1 === this.selectIndex) return;
        this.selectIndex++;
      } else if (e1 && e1.keyCode == 38) {
        // 按上箭头
        if (this.selectIndex === 0) return;
        this.selectIndex--;
      } else if (e1 && e1.keyCode == 13) {
        this.selectTrials(
          this.resultFilter[this.selectIndex],
          this.selectIndex
        );
      }
      document
        .querySelector(".trials-select-box")
        .scrollTo(
          0,
          document.querySelector(".options_item.selectedIndex").offsetTop - 200
        );
    };
  },
  watch: {
    options: {
      handler() {
        this.resultFilter = this.options.filter(() => true);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    selectTrials(item, index) {
      this.selectIndex = index;
      let obj = JSON.parse(JSON.stringify(this.data));
      obj = Object.assign(obj, item);
      this.$emit("update:data", obj);
      this.visible = false;
    },
    inputChange(v) {
      this.resultFilter = this.options.filter((o) => {
        var reg = new RegExp(v, "ig");
        return (
          reg.test(o.ResearchProgramNo) ||
          reg.test(o.ExperimentName) ||
          reg.test(o.Sponsor)
        );
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.trials-select {
  cursor: pointer;
  .trials-select-reference {
    height: 36px;
    line-height: 36px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 15px;
    padding-right: 30px;
    width: 200px;
    position: relative;
    .tip-span {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      position: absolute;
      top: 0;
      right: 5px;
    }
  }
}
.disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
}
.trials-select-box {
  width: 100%;
  max-height: 400px;
  height: auto;
  overflow-y: auto;
  padding-top: 76px;
}
.trials-select-box::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.trials-select-reference {
  line-height: 40px;
  height: 40px;
  .el-icon-arrow-down {
    transition: all 0.3s;
  }
  .el-icon-arrow-down.selected {
    transform: rotate(180deg);
  }
}
.options_item {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  line-height: 30px;
  padding: 0 5px;
  transition: all 0.3s;
  &:hover {
    background: #eee;
  }
}
.options_item.selected {
  color: #428bca;
  background: #eee;
}
.options_item.selectedIndex {
  background: #eee;
}
.text-ellipsis {
  display: inline-block;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
</style>
