<template>
  <div>
    <div class="common-card">
      <h3>基本信息</h3>
      <el-form ref="queryForm" label-width="237px" class="grid-form-class">
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="单据编号">
              <div class="content">{{ $route.query.id }}</div>
            </el-form-item>
            <el-form-item label="单据状态">
              <div class="content">
                <span v-if="$route.query.stas == 'A'">待提交</span>
                <span v-if="$route.query.stas == 'B'">待出库</span>
                <span v-if="$route.query.stas == 'P'">部分出库</span>
                <span v-if="$route.query.stas == 'Y'">已出库</span>
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="申领来源">
              <div class="content">{{ $route.query.orgName }}</div>
            </el-form-item>
            <el-form-item label="制单人">
              <div class="content">{{ $route.query.docmker }}</div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="制单时间">
              <div class="content">{{ $route.query.docmkDate }}</div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <!--列表-->
    <div class="common-card">
      <h3>明细信息</h3>
      <div class="right-type">
        <el-button
          type="success"
          icon="el-icon-box"
          @click="outbound()"
          :disabled="multipleSelection2.length == 0"
          >出库
        </el-button>
      </div>
      <el-table
        ref="multipleTable2"
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="list"
        fit
        stripe
        border
        @selection-change="handleSelectionChange2"
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column type="selection" width="55" :selectable="selecTable2">
        </el-table-column>
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="60"
        ></el-table-column>
        <el-table-column label="药品编码" prop="drugListId" />
        <el-table-column label="药品信息" min-width="300">
          <template slot-scope="scope">
            <div class="drug-name">
              <el-tag v-if="scope.row.drugName">
                {{ scope.row.drugName }}
              </el-tag>
              {{ "【" + scope.row.dosformName + "】" }}
              <el-tag v-if="scope.row.essdrugType">
                {{
                  scope.row.essdrugType === "0"
                    ? "非基药"
                    : scope.row.essdrugType === "1"
                    ? "基药"
                    : scope.row.essdrugType
                }}
              </el-tag>
              <br />
              {{ "生产厂家 【" + scope.row.prodentpName + "】" }}
              <br />
              {{
                "药品规格 【" +
                scope.row.specName +
                "*" +
                scope.row.convrat +
                scope.row.prepunt +
                "/" +
                scope.row.pacUnt +
                "】"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="注册证号" prop="aprvNo" width="150" />
        <el-table-column label="出库批号" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="
                !scope.row.invRtList ||
                (scope.row.invRtList && scope.row.invRtList.length == 0)
              "
              @click="openNumber(scope.row)"
              type="text"
              >请选择各批号出库数量</el-button
            >
            <div v-else @click="openNumber(scope.row)" style="cursor: pointer">
              <p v-for="(item, index) in scope.row.invRtList" :key="index">
                {{ item.lotNum }}({{ item.stoWaitCnt }})
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申领数量" prop="appyCnt" width="150" />
        <el-table-column label="库存数量" prop="invCnt" width="150" />
        <el-table-column label="出库数量" prop="stoOutCnt" width="150" />
        <el-table-column label="待出库数量" prop="stoWaitCnt" width="150" />
        <el-table-column label="生产日期" prop="manuDate" width="150" />
        <el-table-column label="有效期至" prop="prodExpy" width="150" />
        <!-- <el-table-column label="货位编号" prop="name1" width="150" /> -->
        <el-table-column label="供应商" prop="prodentpName" width="150" />
      </el-table>
    </div>

    <div class="foot-button">
      <el-button type="info" @click="goback">返回</el-button>
    </div>
    <!--选择批号-->
    <el-dialog
      title="选择批号"
      :visible.sync="dialogFormVisible"
      width="1000px"
    >
      <!--条件-->
      <el-table
        ref="multipleTable"
        row-key="id"
        v-loading="listBatchLoading"
        element-loading-text="加载中"
        :data="batchList"
        fit
        stripe
        border
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column
          type="selection"
          width="55"
          :selectable="selecTable"
          :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="60"
        ></el-table-column>
        <el-table-column label="药品编码" prop="drugListId" />
        <el-table-column label="药品名称" min-width="300">
          <template slot-scope="scope">
            <div class="drug-name">
              <el-tag v-if="scope.row.drugName">
                {{ scope.row.drugName }}
              </el-tag>
              {{ "【" + scope.row.dosformName + "】" }}
              <el-tag v-if="scope.row.essdrugType">
                {{
                  scope.row.essdrugType === "0"
                    ? "非基药"
                    : scope.row.essdrugType === "1"
                    ? "基药"
                    : scope.row.essdrugType
                }}
              </el-tag>
              <br />
              {{ "生产厂家 【" + scope.row.prodentpName + "】" }}
              <br />
              {{
                "药品规格 【" +
                scope.row.specName +
                "*" +
                scope.row.convrat +
                scope.row.prepunt +
                "/" +
                scope.row.pacUnt +
                "】"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="批号" width="150" prop="lotNum" />
        <el-table-column label="当前库存" width="150" prop="invCnt" />
        <el-table-column label="出库数量" width="160" prop="stoWaitCnt">
          <template slot-scope="scope">
            <!-- <el-input
              v-model="scope.row.stoWaitCnt"
              placeholder="请输入"
              @blur="blurChange(scope.row)"
            ></el-input> -->
            <el-input-number
              :controls="false"
              v-model="scope.row.stoWaitCnt"
              @change="blurChange(scope.row)"
              :min="0"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <yl-pagination
        v-show="batchTotal > 0"
        :total="batchTotal"
        :page.sync="listBatchQuery.current"
        :limit.sync="listBatchQuery.size"
        @pagination="getBatchList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="commitData()"> 确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import {
  getAppyOrdDetl,
  getAppyOrdDetlInvRt,
  appyOrdStoout
} from "@/api/storeroom/shipped-out";
export default {
  components: { ylPagination },
  data() {
    return {
      listQuery: {
        //条件查询
        current: 1,
        size: 10
      },
      total: 0, //分页
      list: [],

      dialogFormVisible: false,
      listBatchLoading: false,
      batchList: [],
      batchTotal: 0,
      listBatchQuery: {
        //条件查询
        current: 1,
        size: 10
      },
      multipleSelection: [],
      id: "",
      appyCnt: "",
      multipleSelection2: []
    };
  },

  created() {
    this.getData();
  },

  computed: {},

  methods: {
    goback() {
      this.$router.go(-1);
    },

    // 复选框禁用
    selecTable2(row, index) {
      if (row.invRtList && row.invRtList.length > 0) {
        return true;
      } else {
        return false;
      }
    },

    // 多选
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },

    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 规格复选框禁用
    selecTable(row, index) {
      if (row.stoWaitCnt) {
        return true;
      } else {
        return false;
      }
    },

    blurChange(row) {
      console.log(row.stoWaitCnt > row.invCnt);
      if (row.stoWaitCnt > row.invCnt) {
        this.$message({
          message: "出库数量不能超过当前库存",
          type: "warning"
        });
        row.stoWaitCnt = 0;
        return false;
      }
      if (row.stoWaitCnt) {
        this.$refs.multipleTable.toggleRowSelection(row, false);
        this.$refs.multipleTable.toggleRowSelection(row, true);
      } else {
        this.$refs.multipleTable.toggleRowSelection(row, false);
      }
    },

    //获取列表数据
    getData() {
      this.listLoading = true;
      getAppyOrdDetl(this.listQuery)
        .then((response) => {
          this.list = response.data;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },

    // 出库
    outbound() {
      if (this.multipleSelection2.length == 0) {
        this.$message({
          message: "至少选择一条数据",
          type: "warning"
        });
        return false;
      }
      this.$confirm("确认出库", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let data = { saveStooutList: [] };
        this.multipleSelection2.forEach((item) => {
          data.saveStooutList.push({
            id: item.id,
            appyId: this.$route.query.id,
            stoWaitCnt: item.stoWaitCnt,
            invRtList: item.invRtList
          });
        });
        appyOrdStoout(data).then((response) => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.getData();
        });
      });
    },

    // 各批号出库数量弹框
    openNumber(row) {
      this.id = row.id;
      this.appyCnt = row.appyCnt;
      this.getBatchList(row.drugListId);
      this.dialogFormVisible = true;
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.multipleTable = [];
      if (row.invRtList) {
        this.multipleSelection = row.invRtList;
        this.toggleSelection(this.multipleSelection);
      }
    },

    // 规格回显复选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, false);
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    // 获取批次列表
    getBatchList(drugListId) {
      this.listBatchLoading = true;
      this.listBatchQuery.drugListId = drugListId;
      getAppyOrdDetlInvRt(this.listBatchQuery)
        .then((response) => {
          this.batchList = response.data.records;
          this.batchTotal = response.data.total;
          // 跨页多选回显
          if (this.multipleSelection.length > 0 && this.batchList.length > 0) {
            this.multipleSelection.forEach((item1) => {
              this.batchList.forEach((item2) => {
                if (item1.id == item2.id) {
                  item2.stoWaitCnt = item1.stoWaitCnt;
                }
              });
            });
          }
          this.listBatchLoading = false;
        })
        .catch((err) => {
          this.listBatchLoading = false;
        });
    },

    // 各批号出库数量确认
    commitData() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "至少选择一条数据",
          type: "warning"
        });
        return false;
      } else {
        let num = 0;
        this.multipleSelection.forEach((item) => {
          num += parseFloat(item.stoWaitCnt);
        });
        console.log(this.appyCnt, num);
        if (this.appyCnt < num) {
          this.$message({
            message:
              "待出库数量不能大于申领数量(目前申领数量为" +
              this.appyCnt +
              "，待出库数量为" +
              num +
              ",)",
            type: "warning"
          });
          return false;
        } else {
          this.list.filter((item) => item.id == this.id)[0].stoWaitCnt = num;
        }
      }

      let data = [];
      this.multipleSelection.forEach((item) => {
        data.push({
          id: item.id,
          stoWaitCnt: item.stoWaitCnt,
          lotNum: item.lotNum
        });
      });
      this.list.forEach((item) => {
        if (item.id == this.id) {
          this.$set(item, "invRtList", data);
          if (item.invRtList.length > 0) {
            this.$refs.multipleTable2.toggleRowSelection(item, false);
            this.$refs.multipleTable2.toggleRowSelection(item, true);
          } else {
            this.$refs.multipleTable2.toggleRowSelection(item, false);
          }
        }
      });
      this.dialogFormVisible = false;
    }
  }
};
</script>

<style scoped lang="scss">
</style>