<template>
  <div class="prescription">
    <!-- 顶部筛选 -->
    <div class="screening flex-plane-start-b">
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>中成药名称：</span>
          <div class="input">
            <el-input size="mini" v-model="form.name" placeholder="请输入" @keydown.enter.native="search()"></el-input>
          </div>
        </div>

        <div class="screening-item flex-vertical-center-l">
          <span>功能主治：</span>
          <div class="input">
            <el-input size="mini" v-model="form.gongxiao" placeholder="请输入" @keydown.enter.native="search()"></el-input>
          </div>
        </div>
        <el-button size="mini" type="primary" @click="search">搜索</el-button>
        <el-button size="mini" type="warning" @click="clearFilter">清空</el-button>
      </div>
      <div class="total">
        共
        <span>{{totalNum}}</span>个中成药
      </div>
    </div>

    <!-- 主体部分 -->
    <div class="prescr-body">
      <!-- 顶部tab -->
      <div class="p-tab flex-vertical-center-l flex-wrap">
        <div
          :class="tab_current==index?'flex-center p-active':'flex-center'"
          v-for="(item,index) in tabs"
          :key="index"
          @click="tabCahnge(index)"
        >{{item.name}}</div>
      </div>
      <!-- 底部数据表格 -->
      <div ref="scrollableElement" class="table-data" :date-loading="loading" v-loading="loading">
        <div
          class="flex-center ellipsis-line1"
          v-for="(item,index) in list"
          :key="item.id"
          @click="$router.push({path:'/index/cmpD?id='+item.id})"
        >{{item.name}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import useScroll from '@/mixins/useScroll';
import {getChinesePatentMedicineList, getEffectQuery, getPrescriptionsList} from '@/api/knowledge.js';
import {addRecipeFrom} from '@/api/dataAnalysis';

let controller;

export default {
  mixins: [useScroll],
  data() {
    return {
      loading: false,
      form: {
        name: "",

        gongxiao: ""
      },
      tabs: [],
      tab_current: 0,
      list: [],
      totalNum: 0
    };
  },
  created() {
    addRecipeFrom({ type: 7 }).catch();
    this.getEffectQuery().then(() => this.getChinesePatentMedicineList());
    // setTimeout(() => {
    //   this.getPrescriptionsList();
    // }, 500);
  },
  methods: {
    clearFilter() {
      this.form = {
        name: "",

        gongxiao: ""
      };
      this.search();
    },
    search() {
      this.tab_current = this.tabs.length - 1;
      this.getChinesePatentMedicineList();
    },
    tabCahnge(index) {
      if (this.tab_current === index) this.scroll(0);
      else {
        this.tab_current = index;
        this.getChinesePatentMedicineList();
      }
    },
    // 获取列表
    async getChinesePatentMedicineList() {
      if (controller) controller.abort();
      controller = new AbortController();
      this.scroll(0, 'instant');
      this.loading = true;
      let params = {
        pageid: 1,
        pagesize: 9999,
        searchtype: "",
        keyWord: this.form.name,
        indication: this.form.gongxiao,
        effected: this.tabs[this.tab_current] ? this.tabs[this.tab_current].effectid : null,
      };
      let res = await getChinesePatentMedicineList(params, controller.signal);
      if (res.code == 0) {
        this.list = res.data.drugs;
        this.totalNum = res.data.drugnum;
      }
      this.loading = false;
    },
    // 获取分类
    async getEffectQuery() {
      let res = await getEffectQuery({
        effecttype: "1",
        effictId: ""
      });

      if (res.code == 0) {
        this.tabs = res.data.effects;
        this.tabs.push({
          name: "检索结果",
          effectid: ""
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.prescription {
  .p-tab {
    div {
      margin-top: 2px;
    }
  }

  .total {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 20px;

    margin-left: 20px;

    span {
      color: #ff3a3a;
    }
  }

  .prescr-body {
    margin-top: 10px;
  }

  .table-data {
    padding: 10px 10px;
    background: #ffffff;
    border-radius: 0px 5px 5px 5px;
    height: 57vh;
    overflow: auto;

    &[date-loading="true"] {
      overflow: hidden;
    }

    div {
      display: inline-block;
      line-height: 44px;
      text-align: center;
      width: 100px;
      height: 44px;
      background: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      margin: 0 10px 10px 0;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .prescription {
    .table-data {
      height: 77vh;
    }
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .prescription {
    .table-data {
      height: 76vh;
    }
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .prescription {
    .table-data {
      height: 61vh;
    }
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .prescription {
    .table-data {
      height: 61vh;
    }
  }
}
</style>