<template>
  <div class="doctor">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <span></span>
        <div>筛选</div>
      </div>
      <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.doctor" 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.book" 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>
        <el-button size="mini" type="warning" @click="$router.back()">返回</el-button>

        <!-- <div class="screen-btn flex-center" @click="search">
                    <img src="../../assets/search.png" alt="">
                </div>
                <div class="screen-btn screen-yellow flex-center" @click="clearFilter">
                    <img src="../../assets/delete.png" alt="">
        </div>-->
      </div>
    </div>

    <!-- 底部表格 -->

    <div class="bottom-table">
      <div class="today-table">
        <el-table :data="tableData" stripe style="width: 100%" border height="100%">
          <el-table-column prop="id" label="序号" width="70" align="center"></el-table-column>
          <el-table-column prop="disname" label="疾病" align="center"></el-table-column>
          <!--<el-table-column prop="chinesesymptom" label="证型" align="center"></el-table-column>-->
          <!--<el-table-column prop="therapy" label="治法" align="center"></el-table-column>-->
          <el-table-column prop="attendingexpert" label="专家" align="center"></el-table-column>
          <el-table-column prop="book" label="出处"></el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope">
              <div class="operation">
                <div
                  class="flex-center"
                  @click="$router.push({path:'/index/doctorcased?verifyid='+scope.row.verifyid})"
                >查看</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex-vertical-center-r today-page">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import useScroll from '@/mixins/useScroll';
import { getDoctorCaseL } from "@/api/knowledge.js";

export default {
  mixins: [useScroll],
  data() {
    return {
      form: {
        name: "",
        doctor: "",
        book: ""
      },
      tableData: [],

      page: 1,
      limit: 10,
      total: 0
    };
  },
  created() {
    this.onActivated()
  },
  methods: {
    onActivated() {
      this.__activated__ = true;
      let type = this.$route.query.type;
      if (type === "0") {
        this.form.doctor = this.$route.query.name;
      }
      if (type === "1") {
        this.form.name = this.$route.query.name;
      }
      this.getDoctorCaseL();
    },
    sizeC(e) {
      this.page = e;
      this.getDoctorCaseL();
    },
    clearFilter() {
      this.form = {
        name: "",
        doctor: "",
        book: ""
      };
      this.search();
    },
    search() {
      this.page = 1;
      this.getDoctorCaseL();
    },
    //
    async getDoctorCaseL() {
      let params = {
        pageid: this.page,
        pagesize: this.limit,
        book: this.form.book,
        attendingexpert: this.form.doctor,
        searchtype: "",
        keyword: this.form.name
      };
      let res = await getDoctorCaseL(params);
      if (res.code == 0) {
        this.tableData = res.data.verifys;
        this.total = res.data.TotalRecordCount;

        this.tableData.filter((item, index) => {
          if (this.page <= 1) {
            return (item.id = index + 1);
          } else {
            return (item.id = (this.page - 1) * 10 + (index + 1));
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.bottom-table {
  padding: 10px 10px;
  background: #ffffff;
  border-radius: 5px;
  height: 72vh;

  .today-table {
    height: 90%;
  }

  .operation {
    div {
      width: 60px;
      height: 24px;
      background: #5386f6;
      border-radius: 2px;
      margin: 0 auto;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }
  }
}

.table-body::v-deep .el-table .cell {
  text-align: center;
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .bottom-table {
    height: 82vh;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .bottom-table {
    height: 82vh;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .bottom-table {
    height: 74vh;

    .today-table {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .bottom-table {
    height: 74vh;

    .today-table {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}
</style>