<template><!--发药明细-->
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div
        style="
          justify-content: space-between;
          margin: 0px 0 12px 0;
          display: flex;
          align-items: center;
        "
      >
        <div>
          <el-input
            size="small"
            style="width: 200px;margin-right: 20px;"
            class="filter-item"
            v-model="keyword"
            placeholder="请输入患者姓名"
          ></el-input>

          <el-date-picker
            size="small"
            v-model="start_time"
            prefix-icon="el-icon-date"
            :editable="false"
            style="width: 196px"
            type="date"
            placeholder="选择日期时间"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="startTimeChange"
          ></el-date-picker
          >-
          <el-date-picker
            size="small"
            v-model="end_time"
            prefix-icon="el-icon-date"
            :editable="false"
            style="width: 196px"
            type="date"
            placeholder="选择日期时间"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="endTimeChange"
          ></el-date-picker>

          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            style="margin-left: 20px;"
            @click="query"
            >查询</el-button
          >
        </div>
      </div>
      <el-table
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266',
        }"
        style="width: 100%"
        :data="tableList"
        :class="signAndWeighBoxPatients"
        border
      >
        <el-table-column type="index" label="序号" align="center" width="100">
        </el-table-column>
        <el-table-column label="患者名称" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.Name  ? scope.row.Name  : ""}}</span>
          </template>
        </el-table-column>

        <el-table-column label="开立医生" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.DoctorName  ? scope.row.DoctorName  : ""}}</span>
          </template>
        </el-table-column>
        <el-table-column label="发药时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.RecordDate  ? scope.row.RecordDate  : ""}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="views(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 200, 500, 1000]"
        :page-size="10"
        background
        align="right"
        style="margin-top: 20px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <details-print
      ref="detailsprint"
      :visibility="isVisibility"
      :propsTable="propsTable"
    >
    </details-print>

  </div>
</template>

<script>
import detailsPrint from "./print/details.vue";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {
  dispensingdetails,
  prescriptiondetails
} from "@/api/pharmacy"
const moment = require('moment')
export default {
  components: {
    detailsPrint,
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "药房管理" },
        { path: "/Pharmacy/DispensingDetails", name: "发药明细" },
      ],
      keyword: "",
      tableList: [{}],
      signAndWeighBoxPatients: "sign-and-weigh-box-patients",
      start_time:moment(new Date()).add('year',0).format("YYYY-MM-DD"),
      end_time:moment(new Date()).add('year',0).format("YYYY-MM-DD"),
      prescriptionList:[],//处方
      stat_order:[],//临时医嘱
      total: 0,
      page: 1,
      limit: 10,
    };
  },
  created() {
    this.init();
    this.query();
  },
  methods: {
    init(){
      this.page = 1;
      this.limit = 10;
      this.keyword = "";
    },
    query(){
      var params = {
        keyword: this.keyword,
        start_time: this.start_time,
        end_time: this.end_time,
        page: 1,
        limit: this.limit,
      }
      dispensingdetails(params).then((res) => {
        if (res.data.state == 1){
          this.tableList = res.data.data.list;
          this.total = res.data.data.total;
        }
      })
    },
    search(){
      console.log("this.start_time",this.start_time)
      console.log("this.end_time",this.end_time)
      var params = {
        keyword: this.keyword,
        start_time: this.start_time,
        end_time: this.end_time,
        page: this.page,
        limit: this.limit,
      }
      dispensingdetails(params).then((res) => {
        if (res.data.state == 1){
          this.tableList = res.data.data.list;
        }
      })
    },

    // 查看
    views(data) {
      console.log("吱吱吱",data)
      this.$refs.detailsprint.show();
      this.$refs.detailsprint.drugdetails(data);
    },
    // 页表操作
    handleSizeChange(val) {
      this.limit = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.search();
    },
  },
};
</script>

<style rel="stylesheet/css" lang="scss" scoped>

/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  overflow: auto;
}
/deep/ .gutter {
  width: 15px !important;
  display: inline-block !important;
}
/deep/ .el-table__fixed-right-patch {
  width: 15px !important;
}

/deep/ .el-table__fixed-right {
  bottom: 0 !important;
  left: auto;
  right: 0;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 15px !important;
  height: 15px !important;
}
</style>
