<template>
  <div class="container">
    <div class="tabs">
      <div :class="['tabs-item',activeName==0?'active':'']" @click="handleTab('0')">专家</div>
      <div :class="['tabs-item',activeName==1?'active':'']" @click="handleTab('1')">疾病</div>
    </div>
    <form v-if="activeName === '1'" style="width: 350px;margin: 12px auto 0;" @submit.stop="handleSearch()">
      <el-input placeholder="请输入关键词搜索" v-model="keyword" clearable @clear="handleSearch()">
        <el-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
      </el-input>
    </form>
    <div ref="scrollableElement" class="content" :class="{searchable: activeName === '1'}">
      <div class="content-item" v-for="(item,index) in list" :key="index">
        <div class="en">{{item.pyCode}}</div>
        <div class="list">
          <div class="list-item" v-for="(item1,index1) in item.children" :key="index1" @click="handleItem(item1)">
            <el-popover v-if="item1.introduce" :title="item1.name" popper-class="scrollable" trigger="hover">
              <div class="el-popover__content">{{ item1.introduce }}</div>
              <div slot="reference">{{ item1.name }}</div>
            </el-popover>
            <div v-else>{{ item1.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import useScroll from '@/mixins/useScroll';
import { getDoctorCaseIndexL } from "@/api/knowledge.js";
import {addRecipeFrom} from '@/api/dataAnalysis';

let controller;
export default {
  mixins: [useScroll],
  data() {
    return {
      activeName: "0",
      keyword: "",
      list: []
    };
  },
  created() {
    addRecipeFrom({ type: 5 }).catch();
  },
  mounted() {
    this.initData();
  },
  methods: {
    handleSearch() {
      this.initData();
    },
    handleTab(active) {
      if (this.activeName === active) this.scroll(0);
      else {
        this.activeName = active;
        this.initData();
      }
    },
    handleItem(item) {
      this.$router.push({
        path: `/index/doctorcase?name=${item.name}&type=${this.activeName}`
      });
    },
    // 初始化数据
    async initData() {
      if (controller) controller.abort();
      controller = new AbortController();
      this.scroll(0, 'instant');
      let res = await getDoctorCaseIndexL({
        indextype: this.activeName,
        keyWord: this.activeName === '1' ? this.keyword : '',
      }, controller.signal);
      if (res.code == 0) {
        let isPy = /^[A-Za-z]/;
        let pinyinList = res.data.map(item => {
          if (item.pinyin !== "") {
            item.firstPy = isPy.test(item.pinyin) ? item.pinyin[0] : "#";
          } else {
            item.firstPy = "#";
          }
          return item.firstPy;
        });

        let pinyinCode = Array.from(new Set(pinyinList));
        pinyinCode.forEach((item, index) => {
          if (item == "#") pinyinCode.splice(index, 1);
        });
        pinyinCode.push("#");
        let list = [];
        pinyinCode.forEach(item => {
          let obj = {
            pyCode: item,
            children: []
          };

          res.data.forEach(item1 => {
            if (item == item1.firstPy && item1.name != "") {
              obj.children.push(item1);
            }
          });
          list.push(obj);
        });

        this.list = list;
      } else {
        this.$message.error(res.message);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  height: calc(100vh - 100px);
  background: #fff;
  overflow: hidden;
}

.tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  &-item {
    flex: 1;
    text-align: center;
    font-size: 16px;
    padding: 8px 0;
    border: 1px solid rgba($color: #999, $alpha: 0.5);
    cursor: pointer;
    box-sizing: border-box;
  }

  .active {
    background: #5386f6;
    color: #fff;
  }
}

.content {
  &.searchable {
    height: calc(100% - 40px - 40px);
  }
  height: calc(100% - 40px);
  box-sizing: border-box;
  padding: 20px;
  overflow: auto;

  &-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 10px;
    .en {
      margin-right: 10px;
      font-size: 16px;
      font-weight: 600;
      width: 20px;
      margin-top: 4px;
    }

    .list {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;

      &-item {
        cursor: pointer;
        padding: 4px 10px;
        border: 1px solid #5386f6;
        border-radius: 4px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
<style lang="scss">
.el-popover.scrollable {
  display: flex;
  flex-direction: column;
  max-width: 30vmin;
  max-height: 30vmin;
  overflow: hidden;

  padding-right: 0;
  .el-popover__title, .el-popover__content { padding-right: 20px; }

  .el-popover__title { flex: none;}

  .el-popover__content {
    flex: auto;
    overflow-y: auto;
  }
}
</style>