<template>
  <div>
    <div class="common-card">
      <h3>基本信息</h3>
      <el-form
        :model="planForm"
        ref="planForm"
        label-width="237px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="单据编码" prop="unit1">
              <el-input v-model="planForm.appyId" readonly></el-input>
            </el-form-item>
            <el-form-item label="单据状态">
              <div class="content">
                <span v-if="planForm.stas == 'P'">部分出库</span>
                <span v-if="planForm.stas == 'Y'">已出库</span>
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="申领来源">
              <div class="content">
                {{ planForm.orgName }}
              </div>
            </el-form-item>
            <el-form-item label="制单时间">
              <div class="content">
                {{ planForm.docmkDate }}
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!--列表-->
    <div class="common-card">
      <h3>明细信息</h3>
      <div class="right-type">
        <el-button type="warning" icon="el-icon-printer" v-print="printObj"
          >打印
        </el-button>
      </div>
      <div id="printMe">
        <el-table
          id="listId"
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          fit
          border
          :span-method="objectSpanMethod"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="60"
          ></el-table-column>
          <el-table-column label="药品编码" prop="drugListId" width="150" />
          <el-table-column label="药品名称" prop="drugName" min-width="200" />
          <el-table-column label="剂型" prop="dosformName" width="100" />
          <el-table-column label="规格信息" prop="specName" width="100" />
          <el-table-column label="包装单位" prop="pacUnt" width="100" />
          <el-table-column label="批准文号" prop="aprvNo" width="100" />
          <el-table-column label="批号" prop="logNum" width="100" />
          <el-table-column label="申领数量" prop="appyCnt" width="100" />
          <el-table-column label="拣货数量" prop="stoOutCnt" width="100" />
          <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="name1" width="150" /> -->
          <el-table-column label="生产企业" prop="prodentpName" width="200" />
        </el-table>
      </div>
    </div>
    <div class="foot-button">
      <el-button type="info" @click="goback">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getDrugStooutDetl } from "@/api/storeroom/outbound.js";
export default {
  components: {},
  data() {
    return {
      listLoading: false,
      list: [],
      planForm: {
        stooutId: this.$route.query.id,
        appyId: this.$route.query.appyId,
        stas: this.$route.query.stas,
        orgName: this.$route.query.orgName,
        docmkDate: this.$route.query.docmkDate
      },
      cellList: [],
      // 打印
      printObj: {
        id: "printMe",
        popTitle: "", // 打印配置页上方标题
        extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback: () => {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: "",
        standard: "",
        extraCss: ""
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },

    // 筛选合并项
    computeCell(tableData) {
      this.cellList = [];
      this.count = null;
      for (let i = 0; i < tableData.length; i++) {
        if (i == 0) {
          // 先设置第一项
          this.cellList.push(1); // 初为1，若下一项和此项相同，就往cellList数组中追加0
          this.count = 0;
        } else {
          // 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
          if (tableData[i].appyDetlId == tableData[i - 1].appyDetlId) {
            this.cellList[this.count] += 1; // 增加计数
            this.cellList.push(0); // 相等就往cellList数组中追加0
          } else {
            this.cellList.push(1); // 不等就往cellList数组中追加1
            this.count = i; // 将索引赋值为计数
          }
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 8) {
        // console.log("单元格数组，若下一项为0，则代表合并上一项", this.cellList);
        const rowCell = this.cellList[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          // console.log(`动态竖向合并单元格, 第${colCell}列，竖向合并${rowCell}个单元格 `);
          return {
            rowspan: rowCell,
            colspan: colCell
          };
        } else {
          // 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
          // 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },

    //获取列表数据
    getData() {
      this.listLoading = true;
      getDrugStooutDetl({ stooutId: this.$route.query.stooutId })
        .then((response) => {
          this.list = response.data;
          this.listLoading = false;
          this.computeCell(this.list);
        })
        .catch((err) => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep #listId {
  th.el-table__cell.is-leaf,
  td.el-table__cell {
    border-bottom: 1px solid #dfe6ec;
  }
}
</style>