<template>
  <div>
    <el-form :model="formData" class="order-el-form" ref="formData" label-width="120px">
      <el-card>
        <el-row :gutter="0">
          <el-col :span="20">
            <el-form-item prop="code" label="扫码录入:">
              <el-input
                id="inputer"
                @focus="getInputFocus($event)"
                @keypress.enter.native="enterKey($event)"
                ref="inputRef"
                style="ime-mode: disabled"
                type="tel"
                placeholder="请点击输入框进行扫码设置或者扫码录入"
                v-model="scanCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              size="mini"
              @click.native.stop="addCode()"
              style="margin-left: 15px"
            >添加
            </el-button>
          </el-col>
        </el-row>
        <div class="result-display" :class="{'result-success': isSuccess, 'result-failure': !isSuccess}">
          <p class="result-text" :class="{'result-text-success': isSuccess, 'result-text-failure': !isSuccess}">{{
              result
            }}</p>
        </div>
      </el-card>

      <el-card>
        <el-row :gutter="0">
          <el-col :span="22" align="right">
            <el-button-group>
              <el-button
                type="primary"
                @click.native="selectPrescribe()"
              >下一单处方
              </el-button>
              <el-button
                type="primary"
                @click.native="selectPrescribe()"
              >选入处方
              </el-button>
              <el-button
                type="primary"
                @click.native="selectPrescribe()"
              >处理完成
              </el-button>
            </el-button-group>
          </el-col>
        </el-row>
        <el-descriptions title="处方详情" :column="4" border>
          <el-descriptions-item label="处方编码">{{formData.code}}</el-descriptions-item>
          <el-descriptions-item label="患者名称">{{formData.sickName}}</el-descriptions-item>
          <el-descriptions-item label="住院号">{{formData.adNum}}</el-descriptions-item>
          <el-descriptions-item label="就诊卡号">{{formData.clinicNumber}}</el-descriptions-item>
          <el-descriptions-item label="开方医生">{{formData.createDr}}</el-descriptions-item>
          <el-descriptions-item label="开方时间">{{formData.prescribeDate}}</el-descriptions-item>
          <el-descriptions-item label="就诊科室">{{formData.deptName}}</el-descriptions-item>
          <el-descriptions-item label="处方费用">{{formData.amount}}</el-descriptions-item>
          <el-descriptions-item label="处方备注">{{formData.remark}}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-tabs type="border-card" style="margin: 15px">
        <el-tab-pane label="手动扫码">
          <el-table v-loading="loading" :data="list" style="width: 100%" border>
            <template v-for="(item, index) in tableHeader">
              <el-table-column
                v-if="item.columnType == 'id' && executeEval(row,item.expression,true)"
                type="index" :label="item.columnDesc"></el-table-column>
              <el-table-column
                v-if="item.columnType == 'selection'"
                type="selection"
                :width="item.width"
                :selectable="(row,number) => executeFuc(row,'3',item.clickFuc)"
              ></el-table-column>

              <el-table-column
                v-if="item.columnType == 'radio' && executeEval(row,item.expression,true)"
                :prop="item.columnName"
                :label="item.columnDesc"
                :sortable="item.sort"
                :width="item.width"
                :show-overflow-tooltip="item.tooltip"
                :key="item.columnName"
              >
                <template slot-scope="scope">
                  <el-radio :label="scope.row.id" v-model="radioCheck"><span></span></el-radio>
                </template>
              </el-table-column>
              <el-table-column
                v-if="item.columnType == 'laber' && executeEval(row,item.expression,true)"
                :prop="item.columnName"
                :label="item.columnDesc"
                :sortable="item.sort"
                :width="item.width"
                :show-overflow-tooltip="item.tooltip"
                :key="item.columnName"
              >
                <template slot-scope="scope">
                <span :style="{color: executeFuc(scope.row,'4',item.lableRuleObj[scope.row[item.columnName]])}">{{
                    item.lableRuleObj[scope.row[item.columnName]]
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="item.columnType == 'eltag' && executeEval(row,item.expression,true)"
                :prop="item.columnName"
                :label="item.columnDesc"
                :sortable="item.sort"
                :width="item.width"
                :show-overflow-tooltip="item.tooltip"
                :key="item.columnName"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="executeFuc(scope.row,'4',item,item.lableRuleObj?item.lableRuleObj[scope.row[item.columnName]]:scope.row[item.columnName])">
                  <span>{{
                      item.lableRuleObj ? item.lableRuleObj[scope.row[item.columnName]] : scope.row[item.columnName]
                    }}</span>
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                v-if="item.columnType == 'button' && executeEval(row,item.expression,true)"
                :prop="item.columnName"
                :label="item.columnDesc"
                :width="item.width"
                :key="item.columnName"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button v-for="(buttonItem, buttonIndex) in item.buttonRulObj"
                             :type="buttonItem.type"
                             :size="buttonItem.size"
                             :style="buttonItem.style"
                             :key="buttonItem"
                             v-if="executeEval(scope.row,buttonItem.hasPermi,true)"
                             :disabled="executeEval(scope.row,buttonItem.disabledFuc,false)"
                             @click.native.stop="executeFuc(scope.row,'1',buttonItem.clickFuc)"
                  >{{ buttonItem.name }}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column
                v-if="item.columnType == 'text'  && !(item.columnName == 'productDate' || item.columnName == 'expireDate') && executeEval(row,item.expression,true)"
                :prop="item.columnName"
                :label="item.columnDesc"
                :sortable="item.sort"
                :width="item.width"
                :show-overflow-tooltip="item.tooltip"
                :key="item.columnName"
              >
                <template slot-scope="scope">
                <span :style="{color: executeFuc(scope.row,'4',item,scope.row[item.columnName])}">{{
                    scope.row[item.columnName]
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="item.columnType == 'text' && (item.columnName == 'productDate' || item.columnName == 'expireDate') && executeEval(row,item.expression,true)"
                :prop="item.columnName"
                :label="item.columnDesc"
                :sortable="item.sort"
                :width="item.width"
                :show-overflow-tooltip="item.tooltip"
                :key="item.columnName"
              >
                <template slot-scope="scope">
                <span :style="{color: executeFuc(scope.row,'4',item,scope.row[item.columnName])}">{{
                    convertDateFun(scope.row[item.columnName])
                  }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :limit.sync="filterQuery.limit"
            :page.sync="filterQuery.page"
            @pagination="codeHandleCurrentChange"
          ></pagination>

        </el-tab-pane>


        <el-tab-pane label="自动赋码明细">
          <prescribeCodePanel
            :prescribeData="curRow"
          ></prescribeCodePanel>
        </el-tab-pane>

        <el-tab-pane label="拆零赋码明细">
          <prescribeCodePanel
            :prescribeData="curRow"
            :fifoSplit="1"
          ></prescribeCodePanel>
        </el-tab-pane>

        <el-tab-pane label="整取赋码明细">
          <prescribeCodePanel
            :prescribeData="curRow"
            :fifoSplit="2"
          ></prescribeCodePanel>
        </el-tab-pane>

      </el-tabs>


      <el-dialog
        title="选择处方"
        :visible.sync="selectPrescriptionVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="selectPrescriptionVisible"
        width="65%"
        append-to-body
      >
        <selectPrescribeDialog
          :confirmSelect="this.confirmSelect"
          :closeDialog="this.closeDialog"
        ></selectPrescribeDialog>
      </el-dialog>
    </el-form>
  </div>
</template>

<script>
import addOrder from "@/views/inout/DialogCreateOrder";
import errOrder from "@/views/inout/IoCreateErrorOrder";
import {executeFuc, getHead} from "@/utils/customConfig";
import {convertDate} from "@/utils/date";
import {materialPrescribePage} from "@/api/inout/splitCode";
import {detail, page as prescribePage, tagCode} from "@/api/basic/sicker/prescribeApi";
import selectPrescribeDialog from "@/views/collect/prescribe/selectPrescribeDialog";
import prescribeCodePanel from "./prescribeCodePanel";
import {enterCodeWeb} from "@/api/inout/order";

export default {
  /**
   * 处理处方
   */
  name: "prescribeTagCodeDeal",
  data() {
    return {
      //界面配置相关
      //患者处方
      loading: false,
      tableHeader: [],
      queryList: [],
      tableObj: [],
      fromList: [],
      convertDateFun: convertDate,
      //界面配置-------------end

      showSearch: true,
      filterQuery: {
        billNo: null,
        page: 1,
        limit: 10,
      },
      list: [],
      total: 0,
      defaultSort: {prop: 'createTime', order: 'desc'},

      formData: {},
      selectPrescriptionVisible: false,
      curRow: null,

      //扫码相关
      scanCode: "",
      isSuccess: false,
      result: "扫码解析结果：",
      originCode: "",
      checkSuccess: false,
    }
  },

  components: {
    addOrder, errOrder, selectPrescribeDialog, prescribeCodePanel
  },
  methods: {

    //界面配置相关------------
    executeFuc(row, type, clickFuc, value) {
      return executeFuc(this, row, type, clickFuc, value);
    },
    executeEval(row, expression, defaultRet) {
      if (expression) {
        return eval(expression);
      }
      return defaultRet;
    },
    handleSortChange(column, prop, order) {
      if (column.order === 'descending') {
        this.query.sort = 'desc'
      } else {
        this.query.sort = 'asc'
      }
      this.query.orderBy = column.prop;
      this.getList();
    },
    ///界面配置相关------------end


    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    onReset() {
      this.filterQuery = {};
      this.actDateRange = [];
      this.getList();
    },
    onSubmit() {
      this.filterQuery.page = 1;
      this.getList();
    },

    getList() {
      this.loading = true;
      prescribePage(this.filterQuery).then(res => {
        this.loading = false
        this.list = res.data.list || []
        this.total = res.data.total || 0
      }).catch(() => {
        this.loading = false
        this.list = []
        this.total = 0
      })
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page;
      this.getList();
    },

    prescribeClick(_this, row) {
      this.curRow = row;
      this.getPrescribeDetail(_this, row)
      this.getCodeDetail(_this, row)
    },

    getPrescribeDetail(_this, row) {
      if (row != null) {
        _this.preQuery.page = 1
        _this.preQuery.prescribeCode = row.code
      }
      _this.preLoading = true;
      detail(_this.preQuery).then(res => {
        _this.preLoading = false
        if (res.code != 20000) {
          _this.$message.error(res.message)
          return
        }
        _this.preDetailList = res.data.items
        _this.preLoading = false
      }).catch(() => {
        _this.preLoading = false
        _this.$message.error("数据加载失败")
      })
    },

    getCodeDetail(_this, row) {
      if (row != null) {
        _this.codeQuery.page = 1
        _this.codeQuery.prescribeNum = row.code
      }
      _this.codeLoading = true;
      materialPrescribePage(_this.codeQuery).then(res => {
        _this.codeLoading = false
        if (res.code != 20000) {
          _this.$message.error(res.message)
          return
        }
        _this.codeDetailList = res.data.list
        _this.codeLoading = false
      }).catch(() => {
        _this.codeLoading = false
        _this.$message.error("数据加载失败")
      })

    },


    preHandleCurrentChange(val) {
      this.filterQuery.page = val.page;
      this.getPrescribeDetail(this, null);
    },


    codeHandleCurrentChange(val) {
      this.filterQuery.page = val.page;
      this.getCodeDetail(this, null);
    },

    getInputFocus(event) {
      event.currentTarget.select();
    },

    enterKey() {
      this.checkSuccess = true;
      this.filterQuery.code = this.scanCode;
      let tQuery = {
        originCode: this.originCode,
        code: this.filterQuery.code.trim(),
      };
      enterCodeWeb(tQuery).then((response) => {
        if (response.code === 20000) {
          this.$refs.inputRef.focus();
          this.$refs.inputRef.select();
          this.isSuccess = true;
          this.printCodeResult(response.data)
          this.filterQuery.code = response.data.code;
          this.addCode();
        } else {
          if (response.code == 502) {
            this.checkSuccess = false;
            this.isSuccess = false;
            this.printCodeResult(response.data)
            this.filterQuery.code = response.data.code;
            this.originCode = this.filterQuery.code;
          } else if (response.code == 501) {
            this.checkSuccess = false;
            this.$message.error(response.message);
          } else if (response.code == 503) {
            this.checkSuccess = false;
            this.isSuccess = false;
            this.printCodeResult(response.data)
            this.filterQuery.code = response.data.code;
            this.$confirm(response.message, "提示", {
              type: "warning",
            })
              .then(() => {
                this.filterQuery.code = response.data.code;
                this.addCode();
              })
              .catch(() => {
                this.filterQuery.code = response.data.code;
              });
          } else if (response.code == 508) {
            this.originCode = "";
            this.filterQuery.code = "01" + response.data.nameCode;
            this.originCode = this.filterQuery.code;
          } else {
            this.$alert(response.message, "提示", {
              confirmButtonText: "确定",
              type: "warning",
              closeOnClickModal: true,
              callback: (action) => {
                this.$refs.inputRef.focus();
                this.$refs.inputRef.select();
              },
            });
          }
        }
        this.loading = false;
      });
    },

    addCode() {
      let tagQuery = {
        prescribeNum: this.formData.code,
        code: this.filterQuery.code.trim(),
      };
      tagCode(tagQuery).then(res => {
        this.loading = false
        this.getList()
      }).catch(() => {
        this.loading = false
      })
    },

    selectPrescribe() {
      this.selectPrescriptionVisible = true;
    },

    closeDialog() {
      this.selectPrescriptionVisible = false;
    },

    confirmSelect(row) {
      this.selectPrescriptionVisible = false;
      this.formData = row;
    },
    printCodeResult(data, isSuccess) {
      const resultParts = ["扫码解析结果：" + data.code];

      if (data.udi) {
        resultParts.push("DI标识: " + data.udi);
      }
      if (data.batchNo) {
        resultParts.push("批次号: " + data.batchNo);
      }
      if (data.produceDate) {
        resultParts.push("生产日期: " + data.produceDate);
      }
      if (data.expireDate) {
        resultParts.push("失效日期: " + data.expireDate);
      }
      if (data.serialNo) {
        resultParts.push("序列号: " + data.serialNo);
      }
      this.result = resultParts.join(" , ");
    }
  },
  created() {
    getHead("prescribeTagCodeDeal", "1").then((re) => {
      // 处理返回的数据
      this.tableObj = re.data;
      this.tableHeader = re.data.tableList;
      this.queryList = re.data.queryList;
      this.fromList = re.data.fromList;
    });

  }

}
</script>

<style scoped>
.el-col {
  margin-top: -5px;
  margin-bottom: -5px;
}

.result-display {
  border: 2px solid #ccc; /* 默认外框颜色 */
  border-radius: 10px;
  margin-bottom: 5px;
  margin-left: 15px;
  margin-right: 25px;
  padding-left: 25px;
  /* 不设置背景颜色 */
}

.result-success {
  border-color: #4CAF50; /* 成功时外框颜色 */
}

.result-failure {
  border-color: #0080ff; /* 失败时外框颜色 */
}

.result-text {
  height: 18px;
  /* 你可以在这里设置默认的文本颜色或其他样式 */
}

.result-text-success {
  color: #4CAF50; /* 成功时文本颜色 */
  font-size: 14px;
}

.result-text-failure {
  color: #0080ff; /* 失败时文本颜色 */
  font-size: 14px;
}

</style>
