<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <div class="query-box">
        <div class="query-box__left">

          <el-form-item label="" prop="key">
            <el-input v-model="queryParams.key" placeholder="请输入处方号/患者姓名" class="defwidth" clearable size="small"
              @keyup.enter.native="getList" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
          <el-form-item>
            <div>{{ listQueryText }}</div>
          </el-form-item>
            <el-form-item label="行" prop="row" v-hasPermi="['rescription:examine:rowCol']">
              <el-input v-model="form.row" placeholder="行" class="minwidth" type="number" size="small"
                @keyup.enter.native="modifyLayout" />
            </el-form-item>
            <el-form-item label="列" prop="col" v-hasPermi="['rescription:examine:rowCol']">
              <el-input v-model="form.col" placeholder="列" class="minwidth" type="number" size="small"
                @keyup.enter.native="modifyLayout" />
            </el-form-item>
            <el-form-item v-hasPermi="['rescription:examine:rowCol']">
              <el-button type="primary" size="mini" @click="modifyLayout" >保存行列</el-button>
            </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="examine-box">
      <div class="examine-row" v-for="(item, index) in examineList" :key="index">
        <div class="examine-col" v-for="(jj, ii) in item.columnData" :key="ii + '__' + ii">
          <medicine_box :item="jj" :rowNumber="item.lineNumber">
          </medicine_box>
          <div class="examine-btn">
            <div class="success" @click="medicineGet(jj)" v-if="jj.preData">取药</div>
            <div class="success flex-1" @click="handleRelease(jj)" v-if="jj.preData">解绑</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listMedicineChest,
  listMedicineUnbundle,
  modifyLayout
} from "@/api/prescription/prescriptionCore";

import medicine_box from "./medicine_box.vue";
export default {
  name: "examine",
  components: { medicine_box },
  data() {
    return {
      // 查询参数
      queryParams: {
        key: ''
      },
      form: {
        row: 10,
        col: 6,
      },
      examineList: [],
      listQueryText: ''
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 取药
    async medicineGet(row) {
      const id = row.containerNumber
      let res = await listMedicineUnbundle({ containerNumber: id })
      if (res.code == 200) {
        this.getList();
        this.msgSuccess("取药成功");
      }
    },
    /** 解绑 */
    handleRelease(row) {
      const id = row.containerNumber
      this.$confirm(
        '是否确认解绑柜号为"' + row.containerNumber + '"的数据项?',
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return listMedicineUnbundle({ containerNumber: id });
        })
        .then(() => {
          this.getList();
          this.msgSuccess("解绑成功");
        })
        .catch(() => { });
    },
    /** 查询列表行列 */
    modifyLayout() {
      var form = {
        lineNumber: this.form.row,
        columnNumber: this.form.col,
      }
      modifyLayout(form).then((response) => {
        console.log(response);
        if (response.code === 200) {
          this.getList()
          this.msgSuccess(response.msg);
        }
      });
    },
    /** 查询处方审核列表 */
    getList() {
      var form = Object.assign({}, this.queryParams);
      listMedicineChest(form).then((response) => {
        this.examineList = response.data;
        this.listQueryText = response.msg
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
  },
};
</script>
<style scoped>
h3 {
  margin: 0;
}

#qrcode {
  width: 160px;
  margin: 0 auto;
}

.defwidth {
  width: 260px;
}

.minwidth {
  width: 90px;
}

.prescriptionCore>>>.warning-row,
.prescriptionCore>>>.el-table__body tr.warning-row.current-row>td,
.prescriptionCore>>>.el-table__body tr.warning-row.hover-row>td {
  background: #e6a23c;
  color: #fff;
}

.prescriptionCore>>>.el-table__body tr.hover-row>td,
.prescriptionCore>>>.el-table__body tr.hover-row.current-row>td,
.prescriptionCore>>>.el-table__body tr.hover-row.el-table__row--striped>td,
.prescriptionCore>>>.el-table__body tr.hover-row.el-table__row--striped.current-row>td {
  background-color: #3a5788;
  color: #fff;
}

.printbtn {
  background: #409eff;
  color: #fff;
}

.flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 30px;
}

.flex-sub {
  flex: 0 0 33.333333%;
  margin-top: 6px;
}

.totaltip {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.active {
  background-color: #1ab394;
  color: #ffffff !important;
}

.examine-box {
  min-width: 1600px;
  overflow-x: scroll;
}

.examine-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;

}

.examine-col {
  flex: 1;
  margin-right: 20px;
}

.examine-col:last-child {
  margin-right: 0;
}

.examine-btn {
  width: 252px;
  margin: 10px 0 18px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}


.success {
  width: 96px;
  line-height: 30px;
  height: 30px;
  text-align: center;
  background: #17C7B1 !important;
  color: #ffffff;
  border-radius: 4px 4px 4px 4px;
}

.flex-1 {
  background: #409EFF !important;
}

.app-container {
  min-width: 1620px;

}
</style>
