<template>
  <!-- 参考医案 -->
  <div class="doctor-case">
    <!-- 顶部筛选 -->
    <div class="top-filter">
      <el-form label-position="left" label-width="50px" :model="form" inline>
        <el-form-item label="疾病">
          <el-input v-model="form.illness" size="small" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="专家">
          <el-input v-model="form.name" size="small" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <el-button size="small" type="primary" @click="searchDis">搜索</el-button>
      <el-button size="small" type="warning" @click="clearDis">清空</el-button>
    </div>
    <!-- 表格数据展示 -->
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="disname" label="疾病" width="100" align="center"></el-table-column>
        <el-table-column prop="chinesesymptom" label="证型" align="center"></el-table-column>
        <el-table-column prop="therapy" label="治法" width="100" align="center"></el-table-column>
        <el-table-column prop="attendingexpert" label="专家" width="100" align="center"></el-table-column>
        <el-table-column prop="book" label="出处" width="100" align="center"></el-table-column>
        <el-table-column prop="address" label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="viewCaseDetail(scope)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页数据 -->
    <div class="paging">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="10"
        :total="total"
        background
        layout=" prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getDoctorCaseL } from "@/api/knowledge.js";
export default {
  props: {
    searchKey: {
      type: String,
      default: ""
    }
  },
  watch: {
    searchKey: {
      immediate: true,
      deep: true,
      handler: function() {
        this.form.illness = this.searchKey;
        this.getDoctorCaseL();
      }
    }
  },
  data() {
    return {
      form: {
        illness: "", // 病名
        name: "" // 专家
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "伤寒杂病论"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "伤寒杂病论"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "伤寒杂病论"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "伤寒杂病论"
        }
      ],
      currentPage: 1,
      total: 0
    };
  },
  methods: {
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getDoctorCaseL();
    },
    searchDis() {
      this.currentPage = 1;
      this.getDoctorCaseL();
    },
    clearDis() {
      this.form.illness = "";
      this.form.name = "";
      this.currentPage = 1;
      this.getDoctorCaseL();
    },
    // 查看医案详情
    viewCaseDetail(scope) {
      this.$parent.$parent.$parent.getDCaseDetail(scope.row.verifyid);
    },
    // 获取参考医案
    async getDoctorCaseL(load = true) {
      if (!load) return;
      let params = {
        pageid: this.currentPage,
        pagesize: 10,
        searchtype: "",
        keyword: this.form.illness,
        attendingexpert: this.form.name
      };
      let res = await getDoctorCaseL(params);
      if (res.code == 0) {
        this.total = res.data.TotalRecordCount;
        this.tableData = res.data.verifys;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.doctor-case {
  width: 100%;
}

.top-filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.top-filter {
  ::v-deep {
    .el-input__inner {
      width: 150px;
    }

    .el-form--inline .el-form-item {
      margin-bottom: 0;
    }
  }
}

.paging {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>