<template>
  <div class="patient-container">
    <patient-sidebar
      :id="patientID"
      defaultActive="2-5"
      v-on:tran-patient="onTranPatient"
    ></patient-sidebar>
    <div class="patient-app-container advice-container app-container">
      <div class="cell clearfix">
        <label class="title"><span class="name">日期查询</span> : </label>
        <el-date-picker
          size="small"
          v-model="listQuery.start_time"
          prefix-icon="el-icon-date"
          @change="changeTime"
          :editable="false"
          style="width: 196px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <span class="cellLine"> - </span>
        <el-date-picker
          size="small"
          v-model="listQuery.end_time"
          prefix-icon="el-icon-date"
          @change="changeTime"
          :editable="false"
          style="width: 196px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <el-table
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        :row-style="{ color: '#303133' }"
        ref="multipleTable"
        :data="edusTableData"
        border
        fit
        highlight-current-row
        style="width: 100%;margin-top: 10px;"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
        ></el-table-column>
        <el-table-column
          label="日期"
          width="200px"
          property="assessment_date"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.assessment_date | parseTime("{y}-{m}-{d}") }}
          </template>
        </el-table-column>
        <el-table-column
          label="宣教"
          min-width="80"
          property="mission"
          align="center"
        >
        </el-table-column>
      </el-table>

      <el-pagination
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        background
        style="margin-top:20px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import PatientSidebar from "./components/PatientSidebar";
import { fetchAllDoctorAndNurse, fetchAllAdminUsers } from "@/api/doctor";
import { getPatientProEducation } from "@/api/patient";
import { uParseTime } from "@/utils/tools";
import print from "print-js";

let rowIndex = 1;

export default {
  name: "proeducation",
  data() {
    return {
      total: 0,
      orgname: "",
      edusTableData: [],
      currentPatient: {},
      patientID: 0,
      listQuery: {
        start_time: "",
        end_time: "",
        page: 1,
        limit: 10,
        patient_id: 0
      }
    };
  },
  methods: {
    onTranPatient: function(tranPatient) {
      this.currentPatient = tranPatient;
    },
    changeTime() {
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },

    getList() {
      getPatientProEducation(this.listQuery).then(response => {
        if (response.data.state == 1) {
          this.edusTableData = response.data.data.edus;
          this.total = response.data.data.total;
        } else {
          this.edusTableData = [];
        }
      });
    }
  },
  components: {
    PatientSidebar
  },
  created() {
    const id = this.$route.params && this.$route.params.id;
    this.patientID = parseInt(id);
    if (isNaN(this.patientID) || this.patientID <= 0) {
      this.$notify.error({
        title: "错误",
        message: "无效的id"
      });
      this.$router.push("/patients/patients");
    }
    this.listQuery.patient_id = this.patientID;

    this.getList();

    var xtuser = this.$store.getters.xt_user;
    this.orgname = xtuser.org.org_name;
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.advice-container {
  font-size: 15px;
  .filter-container {
    padding-bottom: 5px;
  }
  .search-component {
    width: 500px;
    .searchBox {
      width: 300px;
      height: 36px;
      line-height: 36px;
      padding-left: 15px;
      border: 1px #dcdfe6 solid;
      border-right: none;
      outline: none;
      float: left;
      border-radius: 6px 0 0 6px;
      font-size: 14px;
      color: #333;
      background: #fff;
      box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
    }
    .searchBtn {
      background-color: #409eff;
      color: #fff;
      font-size: 15px;
      text-align: center;
      height: 36px;
      line-height: 36px;
      float: left;
      outline: none;
      width: 70px;
      border: none;
      border-radius: 0 6px 6px 0;
      font-family: "Microsoft Yahei";
      cursor: pointer;
    }
  }
  .amount {
    font-weight: normal;
    padding: 10px 0 0 0;
    color: #606266;
    font-size: 14px;
    span {
      color: #ef2525;
      font-family: "Arial";
      padding: 0 2px;
    }
  }
  .el-dropdown-link {
    cursor: pointer;
  }
}

.advice-order .ls-title {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
  line-height: 80px;
  margin-bottom: 20px;
}
.advice-order .ls-type {
  text-align: center;
  margin-bottom: 20px;
}
.advice-order .ls-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 2em;
}
</style>
<style>
.advice-order .el-table__body {
  border: 1px solid #333;
}
.advice-order .el-table__body td {
  border: 1px solid #333;
}
.advice-order .item-value {
  flex: 1;
  border-bottom: 1px solid #333;
}
.advice-order th,
.advice-order td {
  padding: 5px 10px;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>
