<template>
  <div class="medical-history">
    <!-- 顶部筛选 -->
    <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 flex-vertical-center-l">
            <el-date-picker type="date" placeholder="开始时间" v-model="form.date" style="width: 100%;"></el-date-picker>-
            <el-date-picker type="date" placeholder="结束时间" v-model="form.date" style="width: 100%;"></el-date-picker>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>联系方式：</span>
          <div class="input">
            <el-input v-model="form.name" placeholder="请输入就诊卡号"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>病名搜索：</span>
          <div class="input">
            <el-input v-model="form.name" placeholder="请输入病名"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>身份证号：</span>
          <div class="input">
            <el-input v-model="form.name" placeholder="请输入就诊卡号"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>病人姓名：</span>
          <div class="input">
            <el-input v-model="form.name" placeholder="请输入病人姓名"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>就诊卡号：</span>
          <div class="input">
            <el-input v-model="form.name" placeholder="请输入就诊卡号"></el-input>
          </div>
        </div>

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

    <!-- 底部表格 -->
    <div class="bottom-table">
      <div class="btns flex-vertical-center-l">
        <div class="flex-center">预览</div>
        <div class="flex-center bg-yellow">打印</div>
      </div>
      <div class="table-content mr-t20">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="date" label="就诊日期" width="95"></el-table-column>
          <el-table-column prop="blid" label="病历号"></el-table-column>

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

          <el-table-column prop="zy" label="中医辨病" width="200"></el-table-column>
          <el-table-column prop="zy2" label="中医辨证" width="200"></el-table-column>
          <el-table-column prop="xy" label="西医诊断" width="200"></el-table-column>

          <el-table-column prop="price" label="操作" width="120">
            <template slot-scope="scope">
              <div class="flex-center flex-wrap">
                <div
                  class="find-detail find-fill2"
                  @click="$router.push({path:'/index/medicalHistoryd'})"
                >查看</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="today-page mr-t20 flex-vertical-center-r">
        <el-pagination background layout=" prev, pager, next, jumper, total" :total="1000"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: "",
        state: "",
        date: ""
      },
      tableData: [
        {
          id: "1",
          date: "2020-01-08",
          blid: "BL001",
          name: "lm",
          sex: "男",
          age: "32",
          zy: "憋气",
          zy2: "心气虚证",
          xy: "病毒性感冒"
        }
      ]
    };
  }
};
</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;
  }

  .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 {
    .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>