<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 flex-vertical-center-l">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              v-model="form.date"
              type="datetime"
              placeholder="开始时间"
              align="right"
            ></el-date-picker>-
            <el-date-picker
              size="mini"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.date1"
              type="datetime"
              placeholder="结束时间"
              align="right"
            ></el-date-picker>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <div class="input" style="width:100px;flex:none;">
            <el-select size="mini" v-model="form.patType">
              <el-option label="患者姓名" value="0"></el-option>
              <el-option label="身份证号" value="1"></el-option>
            </el-select>
          </div>
          <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-autocomplete
              size="mini"
              v-model="form.medName"
              :fetch-suggestions="handleSearchName"
              placeholder="请输入"
              :trigger-on-focus="false"
              value-key="disname"
              @select="handleSelectName"
            ></el-autocomplete>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>中医证型：</span>
          <div class="input">
            <el-autocomplete
              ref="sym"
              size="mini"
              v-model="form.medZx"
              :fetch-suggestions="handleSearchZx"
              placeholder="请输入"
              :trigger-on-focus="true"
              value-key="symname"
              @select="handleSelectZx"
            ></el-autocomplete>
          </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">
        <!-- @row-click="toMedCase" -->
        <el-table :data="tableData" stripe style="width: 100%" border height="100%">
          <el-table-column prop="id" label="序号" width="50"></el-table-column>
          <el-table-column prop="createTime" label="就诊日期"></el-table-column>
          <el-table-column prop="code" 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="namemedicine" label="中医病名"></el-table-column>
          <el-table-column prop="syndrometypes" label="中医病名"></el-table-column>
          <el-table-column prop="syndrometypes" label="操作" width="80">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="primary" @click="toDetail(scope)">查看</el-button>
              </div>
            </template>
          </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 class="popup-body flex flex-col-center flex-row-center" v-if="showCase">
      <div class="popup-container">
        <div class="medcal-body">
          <div class="medcal-top">
            <span></span>
            <div @click="closeCase()">+</div>
          </div>
          <div id="reciped">
            <medcalPad :info="medicalItem" :zbl="false"></medcalPad>
          </div>
        </div>
        <div class="print" v-print="'#reciped'">打印</div>
      </div>
    </div>
  </div>
</template>
<script>
import { medicalRecords } from "@/api/business.js";
import { getRecordDetail } from "@/api/diagnosis.js";
import { getCDiseaseName, getCCardType } from "@/api/knowledge.js";
import medcalPad from "@/components/ui/outpatientRecords";
import proup from "@/components/Propup";
import { mapGetters } from "vuex";
import {formatPicture} from "@/utils/picture";
export default {
  components: {
    proup,
    medcalPad
  },
  data() {
    return {
      form: {
        patType: "0",
        name: "",
        medZx: "", // 证型
        medName: "", // 病名
        medNameId: "", // 病名id
        medZxId: "", // 证型id
        date: "",
        date1: ""
      },

      tableData: [],
      medicalItem: {},
      showCase: false,

      page: 1,
      limit: 10,
      total: 0
    };
  },
  created() {
    this.medicalRecords();
  },
  methods: {
    closeCase() {
      this.showCase = false;
      this.medicalItem = {};
    },
    // 查看详情
    toDetail(scope) {
      console.log(scope.row.pid, "");
      // this.showCase = true
      this._getRecordDetail(scope.row.pid);
    },
    // 搜搜病名
    handleSearchName(text, cb) {
      let pinyin = /^[A-Za-z]+$/g;
      if (pinyin.test(text)) {
        this._getCDiseaseName(text, "1", cb);
      } else {
        this._getCDiseaseName(text, "", cb);
      }
    },
    // 选中病名
    handleSelectName(e) {
      this.form.medName = e.disname;
      this.form.medNameId = e.disid;
      // this.$refs.sym.focus()
    },

    handleSearchZx(text, cb) {
      if (!this.form.medName) {
        this.$message.warning("请先选择病名");
        cb();
      }
      let pinyin = /^[A-Za-z]+$/g;
      if (pinyin.test(text)) {
        this._getCCardType(text, "1", cb);
      } else {
        this._getCCardType(text, "", cb);
      }
    },
    handleSelectZx(e) {
      this.form.medZx = e.symname;
      this.form.medZxId = e.symid;
    },

    clearFilter() {
      this.form = {
        name: "",
        medName: "",
        medNameId: "",
        medZx: "",
        medZxId: "",
        patType: "0",
        date: "",
        date1: ""
      };
      this.medicalRecords();
    },
    search() {
      this.page = 1;
      this.medicalRecords();
    },
    sizeC(e) {
      this.page = e;
      this.medicalRecords();
    },

    // 获取列表数据
    async medicalRecords() {
      let params = {
        page: this.page,
        limit: this.limit,
        idCard: this.form.patType == 1 ? this.form.name : "",
        name: this.form.patType == 0 ? this.form.name : "",
        endTime: this.form.date1,
        startTime: this.form.date,
        // startTime: this.form.startTime,
        namemedicine: this.form.medName,
        syndrometypes: this.form.medZx,
        organizationId: this.getuserinfo.organizationid,
        doctorId: this.getuserinfo.pid
      };
      let res = await medicalRecords(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);
        });
      }
    },
    // 获取中医病名
    async _getCDiseaseName(key, serchtype = "", cb) {
      let params = {
        pageid: 1,
        pagesize: 9999,
        serchtype,
        keyword: key
      };
      let res = await getCDiseaseName(params);
      if (res.code == 0) {
        cb(res.data.diseases);
      }
    },
    // 获取中医证型
    async _getCCardType(key = "", serchtype = "", cb) {
      let params = {
        pageid: 1,
        pagesize: 9999,
        disid: serchtype == 1 ? "" : this.form.medNameId,
        serchtype,
        keyword: key
      };
      let res = await getCCardType(params);

      if (res.code == 0) {
        cb(res.data.sysptoms);
      }
    },
    // 获取病历详情
    async _getRecordDetail(id) {
      const loading = this.$loading({
        lock: true,
        text: "正在加载数据,请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await getRecordDetail({
        id: id
      }).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.medicalItem = res.Data;
        this.medicalItem.image1 = formatPicture(this.medicalItem.image1);
        this.showCase = true;
      } else {
        loading.close();
        this.$message.error(res.ResultInfo);
      }
    }
  },
  computed: {
    ...mapGetters(["getuserinfo"])
  }
};
</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;
    }
  }
}

.popup-body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 9;
}

.popup-container {
  position: relative;
  height: 80%;
  width: 60%;
}

.medcal-body {
  position: relative;
  height: 100%;
  background: #fff;
  overflow: auto;

  .medcal-top {
    height: 34px;
    background: #5386f6;
    position: relative;
    text-align: center;

    div {
      transform: rotate(45deg);
      color: #fff;
      position: absolute;
      top: -8px;
      right: 25px;
      font-size: 44px;
      cursor: pointer;
    }

    span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 34px;
    }
  }
}

.print {
  width: 50px;
  height: 50px;
  background: #5386f6;
  color: #fff;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  position: absolute;
  right: -60px;
  bottom: 0;
  cursor: pointer;
  z-index: 99;
}

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