<template>
  <div class="recordsDetails">
    <div>
      <div id="pdfId">
        <div class="recordsTable">
          <div class="title-box">
            <h2><b>药剂基本信息</b></h2>
          </div>
          <div class="fieldset">
            <el-row :gutter="30">
              <el-col :span="8" :xs="24">
                <label class="label-title">领用申请编号</label>
                <label>
                  <el-input v-model="tableData.applyNumber" readonly></el-input>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">药剂种类</label>
                <label>
                  <el-input v-model="tableData.drugKind" readonly></el-input>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">药剂名称</label>
                <label>
                  <el-input v-model="tableData.drugName" readonly></el-input>
                </label>
              </el-col>
            </el-row>
          </div>
          <div class="title-box">
            <h2><b>归还明细</b></h2>
          </div>
          <fieldset>
            <table>
              <tbody>
                <tr>
                  <td>药剂编号</td>
                  <td>药剂形态</td>
                  <td>药剂包装</td>
                  <td>规格型号</td>
                  <td>生产厂家</td>
                  <td>归还数量(袋或瓶)</td>
                  <td>归还总量(L或kg)</td>
                  <td>货位号</td>
                </tr>
                <tr>
                  <td>{{ tableData.drugNumber }}</td>
                  <td>{{ tableData.drugType }}</td>
                  <td>{{ tableData.drugPacking }}</td>
                  <td>{{ tableData.drugSpecification }}</td>
                  <td>{{ tableData.manufacturer }}</td>
                  <td>
                    <el-input v-model="tableData.useCount" readonly></el-input>
                  </td>
                  <td>
                    {{
                      String(
                        tableData.drugSpecification * tableData.useCount
                      ).indexOf(".") > -1
                        ? Number(
                            tableData.drugSpecification * tableData.useCount
                          ).toFixed(3)
                        : tableData.drugSpecification * tableData.useCount
                    }}
                  </td>
                  <td>{{ tableData.shelfName }}</td>
                </tr>
              </tbody>
            </table>
          </fieldset>
          <div class="title-box">
            <h2><b>归还详情</b></h2>
          </div>
          <fieldset>
            <el-row :gutter="30">
              <el-col :span="8" :xs="24">
                <label class="label-title">归还总数量(袋或瓶)</label>
                <label>
                  <el-input :value="tableData.useCount" readonly></el-input
                ></label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">归还总量合计(L或kg)</label>
                <label>
                  <el-input
                    :value="tableData.drugSpecification * tableData.useCount"
                    readonly
                  ></el-input>
                </label>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="8" :xs="24">
                <label class="label-title">是否用于熏蒸作业</label>
                <label>
                  <el-select
                    :value="tableData.fumigateOrNot"
                    disabled
                    readonly
                    placeholder="请选择"
                  >
                    <el-option label="是" :value="1"></el-option>
                    <el-option label="否" :value="2"></el-option>
                  </el-select>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">选择熏蒸备案编号</label>
                <label
                  ><el-input
                    :value="tableData.fumigateNumber"
                    readonly
                  ></el-input
                ></label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">选择熏蒸备案仓号</label>
                <label
                  ><el-input
                    :value="tableData.fumigateStore"
                    readonly
                  ></el-input
                ></label>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="8" :xs="24">
                <label class="label-title">归还人</label>
                <label>
                  <el-input
                    :value="tableData.restorePerson"
                    readonly
                  ></el-input>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">登记人</label>
                <label>
                  <el-input
                    :value="tableData.registerPerson"
                    readonly
                  ></el-input>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">归还日期</label>
                <label>
                  <el-input :value="tableData.registerTime" readonly></el-input>
                </label>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="24" :xs="24">
                <label class="label-title"> 归还备注 </label>
                <label
                  ><el-input :value="tableData.remark" readonly></el-input
                ></label>
              </el-col>
            </el-row>
          </fieldset>
          <div style="text-align: center">
            <el-button
              type="primary"
              @click="returnFun"
              class="iconfont iconfanhui"
              >返回</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { giveBackDetail } from "@/api/grainReserves/zygl/index";
import { FileApi } from "@/api";
import htmlToPdf from "@/utils/htmlToPdf";
import { updateWarehousefacilityFiling } from "@/api/zgsq/ccssba";
export default {
  name: "giveBackDetail",
  data() {
    return {
      tableData: {},
    };
  },
  methods: {
    //取消
    returnFun() {
      this.$router.go(-1);
    },

    getInfo() {
      let params = {
        id: this.$route.query.id,
      };
      giveBackDetail(params)
        .then((res) => {
          if (res.infoCode && res.infoCode == 200) {
            this.tableData = res.data;
          }
        })
        .catch();
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped lang="scss">
.label-title {
  display: block;
  margin-bottom: 6px;
}

.fieldset,
fieldset {
  display: block;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  padding: 25px 0 5px;
}

.el-col {
  margin-bottom: 15px;
}

.title-box {
  border-bottom: 1px dashed #00000071;
  padding: 5px 0;

  h2 {
    font-size: 19px;
  }

  p {
    display: inline-block;
    font-weight: 800;
  }
}

.recordsDetails {
  font-size: 14px;
  padding-bottom: 20px;

  #pdfId {
    padding: 20px;
  }

  .littleMsg {
    height: 17px;
  }

  .title {
    font-size: 26px;
    font-weight: 500;
    text-align: center;
  }

  table {
    margin: 10px 0;
    font-size: 14px;
    border-collapse: collapse;
    color: #525357;
  }

  th {
    font-weight: 700;
    font-size: 18px;
  }

  td,
  th {
    padding: 10px;
    text-align: center;
    border: 1px solid #b0b0b0;
  }
}
</style>
<style>
#qyxzbaInfoApply {
  position: relative !important;
}

#qyxzbaInfoApply > div {
  left: 0px !important;
  top: -40px !important;
}

#qyxzbaInfoApplySign {
  left: 0px !important;
  top: -40px !important;
}

#gxxzbaInfoApply {
  position: relative !important;
}

#gxxzbaInfoApply > div {
  left: 0px !important;
  top: -160px !important;
}

#gxxzbaInfoApplySign {
  left: 0px !important;
  top: -160px !important;
}

#xzbaInfoApply {
  position: relative !important;
}

#xzbaInfoApply > div {
  left: 0px !important;
  top: -160px !important;
}

#xzbaInfoApplySign {
  left: 0px !important;
  top: -160px !important;
}
</style>