<!--
 * @Description:
 * @Author: ymz
 * @Date: 2021-12-02 17:25:39
 * @LastEditTime: 2021-12-28 17:23:33
 * @LastEditors: Please set LastEditors
 * @Reference:
-->
<template>
  <div class="left-info">
    <div class="search">
      <el-input
        class="search-inp"
        placeholder="请输入企业名称"
        v-model="deptName"
        @input="search"
      >
        <i slot="prefix" class="el-input__icon el-icon-search search-icon"></i>
      </el-input>
    </div>

    <div class="info-content">
      <div class="info-list">
        <div class="box-title" @click="show('show0')">
          <span>
            <i class="el-icon-s-home"></i>
            药企
          </span>
          <span>
            <i
              :class="show0 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
            ></i>
          </span>
        </div>
        <ul
          class="infinite-list"
          v-infinite-scroll="load"
          :infinite-scroll-distance="300"
          style="overflow:auto"
          v-show="show0"
          v-if="entList.length > 0"
        >
          <li
            v-for="(item, index) in entList"
            :key="index"
            class="infinite-list-item"
            :class="{ act: act0 == index }"
            @click="select(index, item, '0')"
          >
            {{ item.name }}
          </li>
        </ul>

        <div class="no-data" v-else>
          <p>暂无数据</p>
        </div>
      </div>
      <div class="info-list">
        <div class="box-title" @click="show('show1')">
          <span>
            <i class="el-icon-s-shop"></i>
            代理商
          </span>
          <span>
            <i
              :class="show1 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
            ></i>
          </span>
        </div>
        <ul
          class="infinite-list"
          v-infinite-scroll="load"
          :infinite-scroll-distance="300"
          style="overflow:auto"
          v-show="show1"
          v-if="csoList.length > 0"
        >
          <li
            v-for="(item, index) in csoList"
            :key="index"
            class="infinite-list-item"
            :class="{ act: act1 == index }"
            @click="select(index, item, '1')"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="no-data" v-else>
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryInfo } from "@/api/teamManagement/index";

import { debounce } from "@/util/util";

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存数据
    return {
      current: 1,
      size: 10,
      deptName: "",
      show0: true,
      show1: true,
      act0: -1,
      act1: -1,
      // 药企
      entList: [],
      entInfo: {},
      // 代理商
      csoList: [],
      csoInfo: {}
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {
    deptName: "search"
  },
  //方法
  methods: {
    // 展开隐藏
    show(index) {
      this[index] = !this[index];
    },
    // 选择
    select(index, info, type) {
      switch (type) {
        case "0":
          this.act0 = index;
          this.act1 = -1;
          break;
        case "1":
          this.act0 = -1;
          this.act1 = index;
          break;
      }
      this.$emit("select", info);
    },
    search: debounce(async function() {
      this.current = 1;
      this.entList = [];
      this.entInfo = {};
      this.csoList = [];
      this.csoInfo = {};
      await this.getInfo();
      this.initSelect();
    }, 500),
    initSelect() {
      if (this.entList.length > 0) {
        this.select(0, this.entList[0], "0");
      } else if (this.csoList.length > 0) {
        this.select(0, this.csoList[0], "1");
      } else {
        this.$emit("select", null);
      }
    },
    load() {
      if (
        (this.entInfo && this.entInfo.hasNext) ||
        (this.csoInfo && this.csoInfo.hasNext)
      ) {
        this.current += 1;
        this.getInfo();
      }
    },
    async getInfo() {
      let obj = {
        deptName: this.deptName,
        current: this.current,
        size: this.size
      };
      const { data } = await queryInfo(obj);
      if (data.code === 0) {
        let res = data.data;
        this.entInfo = res.entPage;
        this.csoInfo = res.csoPage;
        if (this.current == 1 || res.entPage.records.length > 0) {
          this.entList.push(...res.entPage.records);
        }
        if (this.current == 1 || res.csoPage.records.length > 0) {
          this.csoList.push(...res.csoPage.records);
        }
      }
    }
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  async created() {
    await this.getInfo();
    this.initSelect();
  }
};
</script>

<style scoped lang="scss">
.left-info {
  min-width: 220px;
  width: 12%;
  background-color: #f2f2f2;
  padding: 10px 0;
  .search {
    margin: 0 5px;
    margin-bottom: 15px;
    ::v-deep.el-input__inner {
      height: 35px;
      font-size: 16px;
      padding-left: 35px;
    }
    .search-icon {
      line-height: 35px;
      font-size: 20px;
    }
  }
  .info-content {
    height: calc(100vh - 260px);
    .info-list {
      margin-top: 20px;
      height: 50%;
      padding-bottom: 30px;
      .box-title {
        padding: 0 15px 0 10px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        cursor: pointer;
        span {
          color: #aaaaaa;
          font-weight: 600;
          i {
            margin-right: 10px;
            font-size: 18px;
          }
        }
      }
      .infinite-list {
        &::-webkit-scrollbar {
          width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
          height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          background-color: #ccc;
        }
        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #ededed;
          border-radius: 10px;
        }
        margin-top: 15px;
        height: calc(100% - 30px);

        li {
          cursor: pointer;
          padding: 0 15px;
          line-height: 23px;
          height: 23px;
          font-size: 12px;
          color: #000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          &.act {
            background-color: #7f7f7f;
            color: #fff;
          }
        }
      }
      .no-data {
        height: 150px;
        line-height: 150px;
        text-align: center;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
}
</style>
