<template>
  <!--药品发药页面-->
  <div class="main-contain new-main-contain">
    <div class="position">
      <!--      <bread-crumb :crumbs='crumbs'></bread-crumb>-->
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div
      class="app-container"
      style="display: flex; flex: 1; padding: 10px 20px 0px 20px"
    >
      <div class="mainLeft">
        <div>
          <div class="list">
            <el-date-picker
              style="width: 300px"
              v-model="start_time"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              @change="changeTimes()"
            >
            </el-date-picker>
          </div>

          <div class="list">
            <el-radio-group v-model="state" @change="lala()">
              <el-radio :label="1">待发药</el-radio>
              <el-radio :label="2">已发药</el-radio>
            </el-radio-group>
          </div>
          <div class="list">
            <el-input
              size="small"
              style="width: 239px"
              v-model="keywords"
              class="filter-item"
              placeholder="请输入药品名称"
            />
            <el-button
              size="small"
              class="filter-item"
              type="primary"
              @click="searchAction"
              >搜索
            </el-button>
          </div>

          <el-table
            v-if="state == 1"
            :height="tableHeight"
            :data="waiting_drug"
            border
            style="width: 100%"
            highlight-current-row
            ref="table01"
            @current-change="handleCurrentChange"
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266',
            }"
          >
            <el-table-column prop="name" label="名称" width="100">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column prop="specifications" label="规格" width="100">
              <template slot-scope="scope">
                {{ scope.row.specifications }}
              </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="100">
              <template slot-scope="scope">
                {{ scope.row.stock }}
              </template>
            </el-table-column>
          </el-table>

          <el-table
            v-if="state == 2"
            :height="tableHeight"
            :data="issued_drug"
            border
            style="width: 100%"
            highlight-current-row
            @current-change="handleCurrentChange"
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266',
            }"
            ref="table02"
          >
            <el-table-column prop="name" label="名称" width="100">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column prop="specifications" label="规格" width="100">
              <template slot-scope="scope">
                {{ scope.row.specifications }}
              </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="100">
              <template slot-scope="scope">
                {{ scope.row.stock }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="mainRight">
        <div class="titlelist">
          <!--          <el-button type="primary" @click="tt">调试</el-button>-->
          <el-button type="primary" @click="dispense" v-if="state == 1"
            >发药</el-button
          >
          <el-button type="primary" @click="toPrint">打印</el-button>
          <!--          <el-button @click="tt">调试</el-button>-->
          <!--          <el-button type="primary" @click="toSetting">设置</el-button>-->
        </div>
        <el-divider></el-divider>
        <div>
          <el-table
            :height="tableHeight"
            :data="tableData"
            border
            highlight-current-row
            style="width: 1328px"
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266',
            }"
            @selection-change="handleSelectionChange"
            v-if="state == 1"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="患者名称"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="单次用量"
              width="170"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.single_dosage }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="用法"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.usage }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="频率"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.frequency }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="天数"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.days }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="总量"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.total }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="数据来源"
              width="162"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.data_sources }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-table
            :height="tableHeight"
            :data="tableData"
            border
            style="width: 1328px"
            v-if="state == 2"
          >
            <!--            <el-table-column type="selection" width="55"> </el-table-column>-->
            <el-table-column
              type="index"
              label="序号"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="患者名称"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="单次用量"
              width="170"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.single_dosage }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="用法"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.usage }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="频率"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.frequency }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="天数"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.days }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="总量"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.total }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="数据来源"
              width="162"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.data_sources }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="领药人"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.people }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 25px" v-if="state == 1">
          领药人：
          <el-select v-model="admin_user_id" placeholder="请选择">
            <el-option
              v-for="item in doctorList"
              :key="item.admin_user_id"
              :label="item.user_name"
              :value="item.admin_user_id"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <el-dialog title="设置" :visible.sync="dialogVisible" width="30%">
        <span style="font-size: 17px">请选择药品是否要通过药房管理出库</span>
        <span style="display: block; padding: 18px 25px">
          <el-radio v-model="is_open" label="1">是</el-radio>
          <el-radio v-model="is_open" label="2">否</el-radio>
        </span>
        <div
          style="
            height: 50px;
            background: #c7ebfc;
            border-radius: 5px;
            padding: 7px;
          "
        >
          <i class="el-icon-info" style="color: #3399ff; font-size: 17px"></i>
          若选择为是，则通过药房发药的药品都会在发药之后进行出库，否则按原来的方式进行出库管理
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="SaveSetting">保 存</el-button>
        </span>
      </el-dialog>
    </div>

    <drug-print
      ref="drugprint"
      :visibility="isVisibility"
      :propsTable="propsTable"
      :state="state"
    >
    </drug-print>
  </div>
</template>

<script>
import drugPrint from "./print/drugPrint.vue";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {
  getTodayAdviceList,
  getPharmacyBaseDrug,
  updatePharmacyBaseDrug,
  SaveSetting,
  getPharmacyConfig,
  getUserdDrugList,
} from "@/api/his/advice";
import {
  dispensemedicine,
  waitingmedicine,
  getpatientswithdrugs,
  medicinedeparture,
  getcurrentname,
} from "@/api/pharmacy";
const moment = require("moment");
export default {
  components: {
    BreadCrumb,
    drugPrint,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "药房管理" },
        { path: "/Pharmacy/DrugDispensing", name: "药品发药" },
      ],
      tableHeight: 400,
      datepick: "",
      state: 1,
      waitmount: 0,
      alreadmount: 0,
      tableData: [],
      tableData_list: [],
      tableList: [],
      multipleSelection: [],
      start_time: moment(new Date()).add("year", 0).format("YYYY-MM-DD"),
      patientList: [],
      keywords: "",
      dialogVisible: false,
      is_open: "2",
      isVisibility: "",
      propsTable: "",
      doctorList: [],
      admin_user_id: 0,
      waiting_drug: [], //待发药列表
      issued_drug: [], //已发药列表
      currentRow: null,
      tmp: 0,
    };
  },

  methods: {
    tt() {
      console.log("this.currentRow", this.currentRow);
      this.$router.go(0);
    },
    async fun3() {
      console.log("fun3");
      this.fun1().then((val) => {
        this.fun2();
      });
    },
    async fun4(tps) {
      console.log("fun3", tps);
      this.fun1().then((val) => {
        console.log("this.issued_drug", this.issued_drug);
        for (let i = 0; i < this.issued_drug.length; i++) {
          if (tps == this.issued_drug[i].id) {
            this.$refs.table02.setCurrentRow(this.issued_drug[i]);
            this.handleCurrentChange(this.issued_drug[i]);
          }
        }
      });
    },
    async fun5(tps) {
      console.log("fun3", tps);
      this.fun1().then((val) => {
        console.log("this.issued_drug", this.waiting_drug);
        for (let i = 0; i < this.waiting_drug.length; i++) {
          if (tps == this.waiting_drug[i].id) {
            this.$refs.table01.setCurrentRow(this.waiting_drug[i]);
            this.handleCurrentChange(this.waiting_drug[i]);
          }
        }
      });
    },
    changeTimes() {
      // alert("aa")
      // this.getdruglist();
      this.fun3();
    },
    //初始化
    init() {
      this.state = 1;
      this.tableData = null;
      this.currentRow = null;
    },
    lala() {
      this.currentRow = null;
      this.tableData = null;
      this.selectedbydefault();
    },
    searchAction() {
      // this.getlist();
      this.tableData = null;
      this.currentRow = null;
      this.getdruglist();
    },
    // 跳转打印页面
    toPrint() {
      if (this.state == 1 && this.multipleSelection.length == 0) {
        this.$message.error("未选择任何数据");
        return;
      }
      if (this.state == 2 && this.tableData == null) {
        this.$message.error("未选择任何数据");
        return;
      }
      this.$refs.drugprint.show(
        this.tableData,
        this.currentRow,
        this.state,
        this.multipleSelection,
        this.start_time
      );
    },
    //列表选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //默认选中
    selectedbydefault() {
      if (this.state == 1 && this.waiting_drug.length > 0) {
        this.$refs.table01.setCurrentRow(this.waiting_drug[0]);
        this.handleCurrentChange(this.waiting_drug[0]);
      }
      if (this.state == 2 && this.issued_drug.length > 0) {
        this.$refs.table02.setCurrentRow(this.issued_drug[0]);
        this.handleCurrentChange(this.issued_drug[0]);
      }
    },
    //包装selectedbydefault
    fun2() {
      console.log("3333333this.waitmount_data", this.waiting_drug);
      // return new Promise((resolve, reject) => {
      if (this.state == 1 && this.waiting_drug.length > 0) {
        this.$refs.table01.setCurrentRow(this.waiting_drug[0]);
        this.handleCurrentChange(this.waiting_drug[0]);
      }
      if (this.state == 2 && this.issued_drug.length > 0) {
        this.$refs.table02.setCurrentRow(this.issued_drug[0]);
        this.handleCurrentChange(this.issued_drug[0]);
      }
      // });
    },
    // 药品发药
    dispense() {
      var tps = this.currentRow.id;
      if (this.multipleSelection.length < 1) {
        this.$message.error("未选择任何信息");
        return;
      }
      var tmp = "";
      for (var i = 0; i < this.multipleSelection.length; i++) {
        tmp = tmp + this.multipleSelection[i].id + ",";
      }
      var params = {
        creater: this.admin_user_id,
        ids: tmp,
      };
      this.$confirm("确定是否对该药品进行发药?", "患者发药", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      }).then(() => {
        medicinedeparture(params).then((res) => {
          if (res.data.state == 1) {
            this.$message.success("操作成功");
            this.getdruglist();
            //刷新列表
            this.handleCurrentChange(this.currentRow);
            this.fun4(tps);
            this.state = 2;
            this.multipleSelection = [];
          } else {
            this.$message.error("操作失败：" + res.data.msg);
            //刷新列表
            this.handleCurrentChange(this.currentRow);
            this.fun5(tps);
            this.state = 1;
          }
        });
      });
    },
    //获取药品列表
    getdruglist() {
      var params = {
        keyword: this.keywords,
        time: this.start_time,
      };
      waitingmedicine(params).then((res) => {
        if (res.data.state == 1) {
          this.waiting_drug = res.data.data.list;
        }
      });
      dispensemedicine(params).then((res) => {
        if (res.data.state == 1) {
          this.issued_drug = res.data.data.list;
        }
      });
    },
    async fun1() {
      var params = {
        keyword: this.keywords,
        time: this.start_time,
      };
      await waitingmedicine(params).then((res) => {
        if (res.data.state == 1) {
          this.waiting_drug = res.data.data.list;
        }
        console.log("fun1lil1111i");
      });
      await dispensemedicine(params).then((res) => {
        if (res.data.state == 1) {
          this.issued_drug = res.data.data.list;
        }
        console.log("fun122222222");
      });
      console.log("fun1");
    },

    morencreatename() {
      var param = {};
      getcurrentname(param).then((res) => {
        console.log("res(药)", res);
        if (res.data.state == 1) {
          this.admin_user_id = res.data.data.list;
          console.log("this.admin_user_id(药)", this.admin_user_id);
        }
      });
    },
    //获取领药人选项
    getlist() {
      var params = {
        start_time: this.start_time,
        keywords: this.keywords,
      };
      getTodayAdviceList(params).then((response) => {
        if (response.data.state == 1) {
          this.doctorList = response.data.data.doctorlist;
          console.log("this.admin_user_id(药2)", this.admin_user_id);
          // this.admin_user_id = this.doctorList[0].admin_user_id
          // this.admin_user_id = this.tmp
        }
      });
    },
    //  //获取药品的患者信息
    informationofdrugs(val) {
      var params = {
        // patient_id: this.currentRow.
      };
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      if (this.state == 1) {
        this.getdrugsdetails(0);
      }
      if (this.state == 2) {
        this.getdrugsdetails(1);
      }
    },
    getdrugsdetails(val) {
      var params = {
        drug_id: this.currentRow.id,
        is_medicine: val,
        time: this.start_time,
      };
      getpatientswithdrugs(params).then((res) => {
        if (res.data.state == 1) {
          this.tableData = res.data.data.list; //列表数据
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    toSetting() {
      getPharmacyConfig().then((response) => {
        if (response.data.state == 1) {
          this.dialogVisible = true;
          var config = response.data.data.config;
          this.is_open = config.is_open.toString();
        }
      });
    },
    SaveSetting() {
      var params = {
        is_open: parseInt(this.is_open),
      };
      SaveSetting(params).then((response) => {
        if (response.data.state == 1) {
          var config = response.data.data.config;
          this.$message.success("保存成功!");
          this.dialogVisible = false;
        }
      });
    },
    getUserlist(drug_id) {
      var params = {
        start_time: this.start_time,
        drug_id: drug_id,
      };
      getUserdDrugList(params).then((response) => {
        if (response.data.state == 1) {
          var advicelist = response.data.data.advicelist;
          for (let i = 0; i < advicelist.length; i++) {
            advicelist[i].type = 1;
            advicelist[i].day = " ";
            this.tableList.push(advicelist[i]);
          }
          var hisAdviceList = response.data.data.hisAdviceList;
          for (let i = 0; i < hisAdviceList.length; i++) {
            hisAdviceList[i].type = 2;
            this.tableList.push(hisAdviceList[i]);
          }
          var patient = response.data.data.patient;
          this.patientList = patient;
        }
      });
    },
  },
  created() {
    this.init();
    this.morencreatename();
    this.getlist();
    // this.getdruglist();
    this.fun3();
  },
};
</script>

<style rel="stylesheet/css" lang="scss" scoped>
.new-main-contain {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-container {
  height: 100%;
}
.mainLeft {
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-radio {
    margin-right: 75px;
  }

  .list {
    margin: 10px 0;
  }
}
.mainRight {
  margin-left: 10px;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  .titlelist {
    display: flex;
    justify-content: flex-end;
  }
  .el-button {
    height: 34px;
    width: 65px;
  }
  .el-table {
    margin-top: -13px;
  }
  /deep/ .el-divider {
    height: 2px;
    margin-top: 10px;
  }
}

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