<template>
  <div class="prescription">
    <!-- <div class="back flex-center" @click="$router.back()">返回</div> -->
    <div style="margin-bottom:10px;">
      <el-button size="small" type="primary" @click="$router.back()">返回</el-button>
    </div>
    <!-- 主体部分 -->
    <div class="prescr-body">
      <!-- 顶部tab -->
      <div class="p-tab flex-vertical-center-l">
        <div class="flex-center p-active ellipsis-line1" :title="name">{{name}}</div>
      </div>

      <!-- 底部数据表格 -->
      <div class="table-data">
        <div
          class="flex-center ellipsis-line1"
          v-for="(item,index) in list"
          :key="index"
          :title="item.matname"
          @click="$router.push({path:'/index/tcmd?matid='+item.matid})"
        >{{item.matname}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import useScroll from '@/mixins/useScroll';
import { getEffectQuery, getMedList } from "@/api/knowledge.js";

export default {
  mixins: [useScroll],
  data() {
    return {
      form: {
        name: "",
        gongxiao: ""
      },
      page: 1,
      list: [],
      loadMore: true,
      tabs: [],
      tab_current: 0,
      name: ""
    };
  },
  created() {
    this.name = this.$route.query.fname;
    this.getMedList(this.$route.query.fid);
  },
  methods: {
    async getMedList(effectid, pageid, index, load = true) {
      if (!load) return;
      let params = {
        effectid,
        pagesize: 999,
        pageid,
        searchtype: ""
      };
      let res = await getMedList(params);
      if (res.code == 0) {
        this.list = res.data.mats;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.back {
  width: 74px;
  height: 36px;
  background: #5386f6;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  margin-bottom: 33px;
}

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

    span {
      color: #ff3a3a;
    }
  }

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

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

    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;
    }
  }

  .findmore {
    background: #ffae45 !important;
    color: #fff !important;
  }
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .prescription {
    .table-data {
      height: 79vh;
    }
  }
}

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

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

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