<template>
  <!-- 已出库 -->
  <div>
    <!-- <div class="common-card">
            <h3>订单状态</h3>
            <yl-step></yl-step>
        </div> -->
    <div class="common-card">
      <h3>基本信息</h3>
      <el-form
        :model="listForm"
        ref="listform"
        label-width="170px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="出库单号" prop="delvOrdId">
              <div class="content">
                {{ listForm.delvOrdId }}
              </div>
            </el-form-item>
            <el-form-item label="订单号" prop="purcOrdId">
              <div class="content">
                {{ listForm.purcOrdId }}
              </div>
            </el-form-item>
            <el-form-item label="采购品种数" prop="detlCnt">
              <div class="content">
                {{ listForm.detlCnt }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="采购总数量" prop="qtySum">
              <div class="content">
                {{ listForm.qtySum }}
              </div>
            </el-form-item>
            <el-form-item label="采购总金额" prop="purcAmt">
              <div class="content">
                {{ listForm.purcAmt }}
              </div>
            </el-form-item>
            <el-form-item label="来源部门" prop="deptName">
              <div class="content">
                {{ listForm.deptName }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="客户名称" prop="branchName">
              <div class="content">
                {{ listForm.branchName }}
              </div>
            </el-form-item>
            <el-form-item label="出库人" prop="docmker">
              <div class="content">
                {{ listForm.docmker }}
              </div>
            </el-form-item>
            <el-form-item label="当前状态" prop="delvOrdStas">
              <div class="content" v-if="listForm.delvOrdStas === 'C'">
                已出库
              </div>
              <div class="content" v-if="listForm.delvOrdStas === 'R'">
                被驳回
              </div>
              <div class="content" v-if="listForm.delvOrdStas === 'D'">
                部分出库
              </div>
              <div class="content" v-if="listForm.delvOrdStas === 'Y'">
                已入库
              </div>
              <div class="content" v-if="listForm.delvOrdStas === 'P'">
                部分入库
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="出库时间" prop="docmkDate">
              <div class="content">
                {{ listForm.docmkDate }}
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="common-card" v-show="cShow">
      <h3>手术信息</h3>
      <el-form
        :model="listForm"
        ref="listform"
        label-width="150px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="手术名称" prop="oprn">
              <div class="content">
                {{ listForm.oprn }}
              </div>
            </el-form-item>
            <el-form-item label="手术间" prop="oprtRoom">
              <div class="content">
                {{ listForm.oprtRoom }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="主治医生" prop="atddr">
              <div class="content">
                {{ listForm.atddr }}
              </div>
            </el-form-item>
            <el-form-item label="手术日期" prop="oprtTime">
              <div class="content">
                {{ listForm.oprtTime }}
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="common-card">
      <h3>耗材明细</h3>
      <el-form
        :model="listQuery"
        ref="listQuery"
        :inline="true"
        label-width="90px"
      >
        <el-form-item size="mini" label="生产企业" prop="prodEntp" class="long">
          <el-input
            v-model="listQuery.prodEntp"
            placeholder="请输入生产企业"
          ></el-input>
        </el-form-item>

        <el-form-item size="mini" label="是否集采" prop="isFas" class="long">
          <el-select
            v-model="listQuery.isFas"
            placeholder="请选择是否集采"
            clearable
          >
            <el-option
              v-for="item in isFasData"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          size="mini"
          label="注册证号"
          prop="regcertno"
          class="long"
        >
          <el-input
            v-model="listQuery.regcertno"
            placeholder="请输入注册证号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData()">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="right-button">
        <el-button type="primary" @click="ckPrivew()">打印出库单</el-button>
      </div>
      <el-table
        :data="tableData"
        v-loading="loding"
        element-loading-text="加载中..."
        border
        :span-method="handleSpan"
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column fixed type="index" label="序号" width="60" />
        <el-table-column label="耗材编码" prop="prodCode" />
        <el-table-column label="医保编码" prop="hiCode" />
        <el-table-column label="耗材信息" width="300">
          <template slot-scope="scope">
            <mcs-info :info="scope.row"></mcs-info>
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="spec" />
        <el-table-column label="型号" prop="mol" />
        <el-table-column label="材质" prop="matl" />
        <el-table-column label="是否集采" prop="isFas">
          <template #default="{ row }">
            <span v-if="row.isFas == '0'">否</span>
            <span v-if="row.isFas == '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column label="包装" prop="convrat" width="120px">
          <template #default="{ row }">
            <span
              >{{ row.purcUnt }} ({{ row.convrat }}{{ row.prcUnt }}/{{
                row.purcUnt
              }})</span
            >
          </template>
        </el-table-column>
        <el-table-column label="批次号" prop="lotNum" />
        <el-table-column
          label="生产日期"
          prop="manuDate"
          width="100px"
          v-if="!cShow"
        />
        <el-table-column
          label="有效期至"
          prop="prodExpy"
          width="100px"
          v-if="!cShow"
        />
        <el-table-column label="需求数量" prop="purcCnt" />
        <el-table-column label="剩余出库量" prop="toDelvCnt" width="90px" />
        <el-table-column label="本次出库量" prop="delvCnt" width="90px" />
        <el-table-column label="UDI码" prop="purcCnt" v-if="cShow">
          <template slot-scope="scope">
            <el-button type="text" @click="handleudi(scope.row)">{{
              scope.row.delvCnt
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="客户验收数量" prop="shppCnt" width="100px" />
        <el-table-column label="客户拒收数量" prop="returnCnt" width="100px" />
        <el-table-column label="客户拒收原因" prop="rejRea" width="100px" />
        <el-table-column label="报关单" prop="invoFileId">
          <template slot-scope="scope">
            <yl-upload
              :fileId="scope.row.invoFileId"
              readonly
              v-if="scope.row.invoFileId"
            >
            </yl-upload>
          </template>
        </el-table-column>
        <!-- <el-table-column label="随货单" prop="dyntFileId" /> -->
        <el-table-column label="备注" prop="memo" />
        <!-- <el-table-column label="同行单" prop="dyntFileId" width="100">
                    <template slot-scope="scope">
                        <yl-upload
                            :fileId="scope.row.dyntFileId"
                            readonly
                            v-if="scope.row.dyntFileId"
                        >
                        </yl-upload> -->
        <!-- <div style="display:flex;justify-content: space-between;align-items: center;" v-if="scope.row.dyntFileId"> -->
        <!-- <el-button type="text" @click="openPdf(scope.row)">
                                {{ scope.row.dyntFileId }}
                            </el-button> -->
        <!-- <el-button
                                type="text"
                                @click="handleTong(scope.$index,scope.row)"
                                >选择同行单</el-button
                            > -->
        <!-- </div>
                        <div v-else>
                            <el-button
                                type="text"
                                @click="handleTong(scope.$index,scope.row)"
                                >选择同行单</el-button
                            >
                        </div> -->
        <!-- </template>
                </el-table-column> -->
      </el-table>

      <div class="foot-button" style="margin-top: 30px">
        <!-- <el-button type="danger" @click="handleOrderEnd" :loading="endLoad">结束订单</el-button> -->
        <el-button type="info" @click="handleBack" :loading="endLoad"
          >返 回</el-button
        >
      </div>
    </div>
    <!-- 选择发票 -->
    <el-dialog title="选择发票" :visible.sync="dialogFa" width="55%">
      <el-form :model="faForm" ref="faform" :inline="true">
        <el-form-item label="发票信息" prop="aa">
          <el-input v-model="faForm.aa" placeholder="请输入发票名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getFaData('search')"
            >查询</el-button
          >
          <el-button @click="faReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="faLoading"
        element-loading-text="加载中"
        :data="faData"
        fit
        stripe
        border
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="发票名称" prop="aa" />
        <el-table-column label="开票金额" prop="" />
        <el-table-column label="发票号码" prop="" />
        <el-table-column label="开票时间" prop="" />
        <el-table-column label="上传时间" prop="" />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="handleRow(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <yl-pagination
        v-show="faTotal > 0"
        :total="faTotal"
        :page.sync="faForm.current"
        :limit.sync="faForm.size"
        @pagination="getFaData"
      />
    </el-dialog>
    <!-- 选择同行单 -->
    <el-dialog title="选择同行单" :visible.sync="dialogTong" width="55%">
      <el-form :model="tongForm" ref="tongform" :inline="true">
        <el-form-item label="发票信息" prop="aa">
          <el-input
            v-model="tongForm.aa"
            placeholder="请输入同行单名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTongData('search')"
            >查询</el-button
          >
          <el-button @click="TongReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="tongLoading"
        element-loading-text="加载中"
        :data="tongData"
        fit
        stripe
        border
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="票据名称" prop="aa" />
        <el-table-column label="票据金额" prop="" />
        <el-table-column label="票据单号" prop="" />
        <el-table-column label="开票时间" prop="" />
        <el-table-column label="上传时间" prop="" />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="handleRowTong(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <yl-pagination
        v-show="tongTotal > 0"
        :total="tongTotal"
        :page.sync="tongForm.current"
        :limit.sync="tongForm.size"
        @pagination="getTongData"
      />
    </el-dialog>
    <!-- PDF预览 -->
    <el-dialog
      title="PDF预览"
      class="dd"
      :visible.sync="dialogVisible"
      width="70%"
      center
    >
      <iframe
        :src="pdfSrc"
        frameborder="0"
        style="width: 100%; height: 100%"
      ></iframe>
    </el-dialog>
    <!-- UDI码 -->
    <el-dialog title="UDI码" :visible.sync="udidialog" width="70%">
      <el-table element-loading-text="加载中" :data="udiData" fit stripe border>
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="耗材信息" width="230">
          <template slot-scope="scope">
            <mcs-info :info="scope.row"></mcs-info>
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="spec" />
        <el-table-column label="型号" prop="mol" />
        <el-table-column label="材质" prop="matl" />
        <el-table-column label="是否集采" prop="isFas">
          <template #default="{ row }">
            <span v-if="row.isFas == '0'">否</span>
            <span v-if="row.isFas == '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column label="批号" prop="lotNum"> </el-table-column>
        <!-- <el-table-column label="生产日期" prop="manuDate"> </el-table-column>
          <el-table-column label="有效期至" prop="prodExpy"> </el-table-column> -->
        <el-table-column label="包装" prop="convrat" width="120px">
          <template #default="{ row }">
            <span
              >{{ row.purcUnt }} ({{ row.convrat }}{{ row.prcUnt }}/{{
                row.purcUnt
              }})</span
            >
          </template>
        </el-table-column>
        <el-table-column label="UDI码" prop="udi" width="120"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylPagination from "@/components/yl-pagination";
import mcsInfo from "@/views/components/mcs-info.vue";
import ylUpload from "@/components/yl-upload";
import { getOrdDetlList, finishDelvOrd } from "@/api/orderManage-sup/index";
export default {
  components: {
    ylStep,
    ylPagination,
    ylUpload,
    mcsInfo
  },
  data() {
    return {
      cShow: false,
      pdfSrc: "",
      dialogVisible: false,
      endLoad: false,
      listForm: {
        delvOrdId: "",
        purcOrdId: "",
        detlCnt: "",
        qtySum: "",
        deptName: "",
        docmker: "",
        docmkDate: "",
        delvOrdStas: "",
        branchName: "",
        purcAmt: ""
      },
      stasOptions: [
        { value: "A", lable: "未受理" },
        { value: "B", lable: "已受理" },
        { value: "R", lable: "被驳回" },
        { value: "C", lable: "已出库" },
        { value: "D", lable: "部分出库" },
        { value: "Y", lable: "已入库" },
        { value: "P", lable: "部分入库" }
      ],
      essdrugOptions: ["非基药", "基药"],
      tableData: [],
      loading: false,
      // 选择发票
      dialogFa: false,
      faForm: {
        aa: "",
        current: 1,
        size: 10
      },
      faLoading: false,
      faData: [],
      faTotal: 0,
      faIndex: "",
      // 选择同行单
      dialogTong: false,
      tongForm: {
        aa: "",
        current: 1,
        size: 10
      },
      tongLoading: false,
      tongData: [],
      tongTotal: 0,
      tongIndex: "",
      code: "",
      listQuery: {
        prodEntp: "",
        isFas: "",
        regcertno: ""
      },
      isFasData: [{ value: "1", name: "是" }, { value: "0", name: "否" }],
      udidialog: false,
      udiData: []
    };
  },
  created() {
    if (this.$route.query.purcType == "2") {
      this.cShow = true;
    } else {
      this.cShow = false;
    }
    this.listForm.delvOrdId = this.$route.query.delvOrdId;
    this.listForm.purcOrdId = this.$route.query.purcOrdId;
    this.listForm.detlCnt = this.$route.query.detlCnt;
    this.listForm.qtySum = this.$route.query.qtySum;
    this.listForm.deptName = this.$route.query.deptName;
    this.listForm.docmker = this.$route.query.docmker;
    this.listForm.docmkDate = this.$route.query.docmkDate;
    this.listForm.delvOrdStas = this.$route.query.delvOrdStas;
    this.listForm.branchName = this.$route.query.branchName;
    this.listForm.purcAmt = this.$route.query.purcAmt;
    this.listForm.oprn = this.$route.query.oprn;
    this.listForm.oprtRoom = this.$route.query.oprtRoom;
    this.listForm.oprtTime = this.$route.query.oprtTime;
    this.listForm.atddr = this.$route.query.atddr;
    // this.stasOptions.forEach((i)=>{
    //     if(i.value == this.$route.query.stas){
    //         this.listForm.purcOrdStas = i.lable
    //     }
    // })
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 跳转打印
    ckPrivew() {
      this.$router.push({
        name: "devsuccs",
        query: {
          form: JSON.stringify({
            ...this.listForm,
            id: this.listForm.purcOrdId,
            quit: "print"
          }),
          data: JSON.stringify(this.tableData)
        }
      });
    },
    getData() {
      this.listLoading = true;
      let data = {
        delvOrdId: this.$route.query.delvOrdId,
        purcOrdId: this.$route.query.purcOrdId,
        spdId: this.$route.query.spdId,
        prodEntp: this.listQuery.prodEntp,
        isFas: this.listQuery.isFas,
        regcertno: this.listQuery.regcertno
      };
      getOrdDetlList(data)
        .then(res => {
          this.tableData = res.data;
          this.tableData.forEach(i => {
            i.essdrugType = this.essdrugOptions[i.essdrugType * 1];
          });
          this.listLoading = false;
          this.computeCell(this.tableData);
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 筛选合并项
    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;
          // console.log("索引", 0, this.count);
        } else {
          // 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
          if (tableData[i].prodCode == tableData[i - 1].prodCode) {
            this.cellList[this.count] += 1; // 增加计数
            this.cellList.push(0); // 相等就往cellList数组中追加0
            // console.log("索引", i, this.count);
          } else {
            this.cellList.push(1); // 不等就往cellList数组中追加1
            this.count = i; // 将索引赋值为计数
            // console.log("索引", i, this.count);
          }
        }
      }
    },
    rowSpan(columnIndex) {
      let cond;
      if (this.$route.query.purcType == "2") {
        cond =
          columnIndex === 1 ||
          columnIndex === 2 ||
          columnIndex === 3 ||
          columnIndex === 4 ||
          columnIndex === 5 ||
          columnIndex === 6 ||
          columnIndex === 7 ||
          columnIndex === 8 ||
          columnIndex === 10 ||
          columnIndex === 11;
      } else {
        cond =
          columnIndex === 1 ||
          columnIndex === 2 ||
          columnIndex === 3 ||
          columnIndex === 4 ||
          columnIndex === 5 ||
          columnIndex === 6 ||
          columnIndex === 7 ||
          columnIndex === 8 ||
          columnIndex === 12 ||
          columnIndex === 13;
      }
      return cond;
    },
    // 合并列
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (this.rowSpan(columnIndex)) {
        // 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
          };
        }
      }
    },
    // 预览文件
    dataURLtoBlob(e) {
      let bstr = atob(e);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      } //确定解析格式
      let blob = new Blob([u8arr], { type: "application/pdf;chartset=UTF-8" });
      let url = window.URL.createObjectURL(blob);
      return url;
    },
    // 详情
    openPdf(row) {
      // let file = {
      //     id: row.fileId,
      // };
      // uploadCheck(file).then((res) => {
      //     if (res.success == true) {
      //         this.dialogVisible = true;
      //         const a = this.dataURLtoBlob(res.data.fileContent);
      //         this.pdfSrc = a;
      //     }
      // });
    },
    // 获取发票信息
    getFaData(type) {
      if (type == "search") {
        this.faForm.current = 1;
      }
      this.faData = [
        { aa: "资质文件.pdf", bb: "1111" },
        { aa: "出库文件.pdf", bb: "2222" }
      ];
      this.faTotal = 1;
      // this.faLoading = true;
    },
    faReset() {
      this.$refs.faForm.resetFields();
      this.getFaData();
    },
    // 选择发票
    handleFa(e, row) {
      this.faIndex = e;
      this.dialogFa = true;
      this.getFaData();
      this.code = "";
      this.code = row.id;
    },
    // 选择发票 确认选择
    handleRow(row) {
      // this.tableData[this.faIndex].fa = row.aa;
      this.tableData.forEach(i => {
        if (i.id == this.code) {
          i.invoFileId = row.bb;
        }
      });
      this.dialogFa = false;
    },
    // 获取同行单信息
    getTongData(type) {
      if (type == "search") {
        this.tongForm.current = 1;
      }
      this.tongData = [
        { aa: "资质文件.pdf", bb: "1111" },
        { aa: "出库文件.pdf", bb: "2222" }
      ];
      this.tongTotal = 1;
      // this.tongLoading = true;
    },
    tongReset() {
      this.$refs.tongForm.resetFields();
      this.getTongData();
    },
    // 选择同行单
    handleTong(e, row) {
      this.tongIndex = e;
      this.dialogTong = true;
      this.getTongData();
      this.code = "";
      this.code = row.id;
    },
    // 选择同行单 确认选择
    handleRowTong(row) {
      // this.tableData[this.tongIndex].tong = row.aa;
      this.tableData.forEach(i => {
        if (i.id == this.code) {
          i.dyntFileId = row.bb;
        }
      });
      this.dialogTong = false;
    },
    // 结束订单
    handleOrderEnd() {
      // this.tableData.forEach((item) => {
      //     if (!item.fa || !item.tong) {
      //         this.$message({
      //             message: "请选择发票和同行单",
      //             type: "info",
      //         });
      //         throw new Error("请选中发票和同行单");
      //     }
      // })
      this.$confirm("确认结束订单", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let data = {
          delvOrdId: this.$route.query.delvOrdId
        };
        this.endLoad = true;
        finishDelvOrd(data)
          .then(res => {
            this.endLoad = false;
          })
          .catch(err => {
            this.endLoad = false;
          });
      });
    },
    // 查看UDI码
    handleudi(row) {
      this.udiData = row.udiList;
      this.udiData = this.udiData.map(item => ({
        ...item,
        spec: row.spec,
        mol: row.mol,
        matl: row.matl,
        isFas: row.isFas,
        lotNum: row.lotNum,
        manuDate: row.manuDate,
        prodExpy: row.prodExpy,
        convrat: row.convrat,
        purcUnt: row.purcUnt,
        prcUnt: row.prcUnt,
        prodName: row.prodName,
        mcsType: row.mcsType,
        regcertno: row.regcertno,
        prodEntp: row.prodEntp,
        prodSouc: row.prodSouc,
        fasBtch: row.fasBtch
      }));
      this.udidialog = true;
    },
    // 返回
    handleBack() {
      this.$router.push({
        name: "purOrderDelivery",
        query: {
          spdId: this.$route.query.spdId,
          activeName: this.$route.query.activeName
        }
      });
    },
    // 重置
    reset() {
      this.$refs.listQuery.resetFields();
      this.getData();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__body tr.hover-row > td {
  background-color: transparent !important;
}
::v-deep .el-table {
  th.el-table__cell.is-leaf,
  td.el-table__cell {
    border-bottom: 1px solid #eee;
  }
}
</style>
