<template>
  <div class="medical-history">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </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="请输入病人姓名"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>身份证号：</span>
          <div class="input">
            <el-input size="mini" v-model="form.idCard" placeholder="请输入身份证号"></el-input>
          </div>
        </div>

        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
      </div>
    </div>

    <!-- 底部表格 -->
    <div class="today-table">
      <!-- <div class="screening-title flex-vertical-center-l">
                <span></span>
                <div>我的患者</div>
      </div>-->
      <div class="table-content">
        <el-table :data="tableData" stripe style="width: 100%" @row-click="toMedCase" height="100%">
          <el-table-column prop="id" label="序号"></el-table-column>

          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>

          <el-table-column prop="idcard" label="身份证号"></el-table-column>
          <el-table-column prop="endTime" label="末次就诊时间"></el-table-column>
        </el-table>
      </div>
      <div class="today-page flex-vertical-center-r">
        <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 { getMyPatiensList } from "@/api/business.js";
export default {
  data() {
    return {
      form: {
        name: "",
        idCard: ""
      },
      tableData: [],

      page: 1,
      limit: 10,
      total: 0
    };
  },
  created() {
    this.getMyPatiensList();
  },
  methods: {
    toMedCase(row, column, event) {
      this.$router.push({
        path: "/index/patiensmed?pid=" + row.pid
      });
    },
    clearFilter() {
      this.form = {
        name: "",
        idCard: ""
      };
      this.getMyPatiensList();
    },
    search() {
      this.page = 1;
      this.getMyPatiensList();
    },
    sizeC(e) {
      this.page = e;
      this.getMyPatiensList();
    },
    // 获取列表数据
    async getMyPatiensList() {
      let params = {
        page: this.page,
        limit: this.limit,
        idcard: this.form.idCard,
        name: this.form.name
      };
      let res = await getMyPatiensList(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;
        this.tableData.filter((item, index) => {
          return (item.id = index + 1);
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.medical-history {
  .bottom-table {
    margin-top: 20px;
    // padding: 33px 46px;
    background: #ffffff;
    border-radius: 5px;
    padding-bottom: 20px;
  }

  .today-table {
    margin-top: 10px;
    background: #ffffff;
    border-radius: 5px;
    // padding-bottom: 20px;
    padding: 5px;
    height: 72vh;
  }

  .today-page {
    margin-top: 10px;
  }

  .btns {
    div {
      width: 74px;
      height: 36px;
      background: #5386f6;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 20px;
    }

    .bg-yellow {
      background: #ffae45;
    }
  }

  .table-content {
    height: 90%;

    .find-detail {
      width: 60px;
      height: 24px;
      border: 1px solid #5386f6;
      border-radius: 2px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      margin: 0 auto;
      background: #5386f6;
    }
  }
}

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

    .table-content {
      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) {
  .medical-history {
    .today-table {
      height: 81vh;
    }

    .table-content {
      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: 1361px) and (max-width: 1600px) {
  .medical-history {
    .today-table {
      height: 78vh;
    }

    .table-content {
      height: 93%;
    }
  }

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

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

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .medical-history {
    .today-table {
      height: 73vh;
    }

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

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

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