<template>
  <div class="recordsDetails">
    <div>
      <div id="pdfId">
        <div class="recordsTable">
          <div class="fieldset">
            <el-row :gutter="30">
              <el-col :span="8" :xs="24">
                <label class="label-title">领用申请编号</label>
                <label>
                  <el-input :value="tableData.applyNumber" readonly></el-input>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">药剂种类</label>
                <label>
                  <el-input :value="tableData.drugKind" readonly></el-input>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">药剂名称</label>
                <label>
                  <el-input :value="tableData.drugName" readonly></el-input>
                </label>
              </el-col>
            </el-row>
          </div>
          <div class="title-box">
            <h2><b>申请明细</b></h2>
          </div>
          <div class="fieldset">
            <table>
              <thead>
                <tr>
                  <td>药剂编号</td>
                  <td>药剂形态</td>
                  <td>药剂包装</td>
                  <td>规格型号</td>
                  <td>生产厂家</td>
                  <td>库存数量(袋或瓶)</td>
                  <td>申请数量(袋或瓶)</td>
                  <td>申请总量(L或kg)</td>
                  <td>用途</td>
                </tr>
              </thead>
              <tbody>
                <td>{{ tableData.drugNumber }}</td>
                <td>{{ tableData.drugType }}</td>
                <td>{{ tableData.drugPacking }}</td>
                <td>{{ tableData.drugSpecification }}</td>
                <td>{{ tableData.manufacturer }}</td>
                <td>{{ tableData.useCount }}</td>
                <td>
                  <el-input :value="tableData.sumCount" readonly></el-input>
                </td>
                <td>
                  {{
                    String(sumDrugSpecification).indexOf(".") > -1
                      ? Number(sumDrugSpecification).toFixed(3)
                      : sumDrugSpecification
                  }}
                </td>
                <td>
                  <el-input :value="tableData.useRemark" readonly></el-input>
                </td>
              </tbody>
            </table>
          </div>
          <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 :value="tableData.sumCount" readonly></el-input>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">申请总量合计(L或kg)</label>
                <label>
                  <el-input :value="sumDrugSpecification" 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
                    v-model="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-select v-model="选中结果" placeholder="请选择">
                                    <el-option
                                      v-for="item in option"
                                      :label="item.label"
                                      :value="item.value"
                                      :key="item.value">
                                    </el-option>
                                  </el-select> -->
                  <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.creater" readonly></el-input>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">申请日期</label>
                <label>
                  <el-input :value="tableData.createTime" readonly></el-input>
                </label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">申请部门</label>
                <label>
                  <el-input
                    :value="tableData.useDepartment"
                    readonly
                  ></el-input>
                </label>
              </el-col>
            </el-row>
          </div>
          <div class="title-box">
            <h2><b>创建信息</b></h2>
          </div>
          <div class="fieldset">
            <el-row>
              <el-col :span="8" :xs="24">
                <label class="label-title">登记人</label>
                <label>{{ tableData.creater }}</label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">登记时间</label>
                <label>{{ tableData.createTime }}</label>
              </el-col>
            </el-row>
          </div>
          <hr />
          <fieldset></fieldset>

          <div class="fieldset">
            <div class="title-box">
              <h2><b>审批信息</b></h2>
            </div>
          </div>
          <div class="fieldset">
            <table class="table-hover">
              <tbody>
                <tr v-if="tableData.applyInfo[0]" class="tr-bg">
                  <td rowspan="3">员工提交</td>
                  <td colspan="1">处理人</td>
                  <td colspan="1">{{ tableData.applyInfo[0].applyName }}</td>
                  <td colspan="1">提交部门</td>
                  <td colspan="4">
                    {{ tableData.applyInfo[0].fromDepartment }}
                  </td>
                </tr>
                <tr v-if="tableData.applyInfo[0]">
                  <td rowspan="2">审批意见</td>
                  <td colspan="6" style="border-bottom: 0px">
                    {{ tableData.applyInfo[0].content }}
                  </td>
                </tr>
                <tr v-if="tableData.applyInfo[0]" class="tr-bg">
                  <td
                    colspan="2"
                    style="border-top: 0px; border-right: 0px"
                  ></td>
                  <td
                    colspan="4"
                    style="color: #666; border-top: 0px; border-left: 0px"
                  >
                    电子签名
                  </td>
                </tr>
                <tr v-if="tableData.applyInfo[1]" class="tr-bg">
                  <td rowspan="3">仓储部经理审批</td>
                  <td colspan="1">处理人</td>
                  <td colspan="1">{{ tableData.applyInfo[1].applyName }}</td>
                  <td colspan="1">提交部门</td>
                  <td colspan="4">
                    {{ tableData.applyInfo[1].fromDepartment }}
                  </td>
                </tr>
                <tr v-if="tableData.applyInfo[1]">
                  <td rowspan="2">审批意见</td>
                  <td colspan="6" style="border-bottom: 0px">
                    {{ tableData.applyInfo[1].content }}
                  </td>
                </tr>
                <tr v-if="tableData.applyInfo[1]" class="tr-bg">
                  <td
                    colspan="2"
                    style="border-top: 0px; border-right: 0px"
                  ></td>
                  <td
                    colspan="4"
                    style="color: #666; border-top: 0px; border-left: 0px"
                  >
                    电子签名
                  </td>
                </tr>
                <tr v-if="tableData.applyInfo[2]" class="tr-bg">
                  <td rowspan="3">库领导审批</td>
                  <td colspan="1">处理人</td>
                  <td colspan="1">{{ tableData.applyInfo[2].applyName }}</td>
                  <td colspan="1">提交部门</td>
                  <td colspan="4">
                    {{ tableData.applyInfo[2].fromDepartment }}
                  </td>
                </tr>
                <tr v-if="tableData.applyInfo[2]">
                  <td rowspan="2">审批意见</td>
                  <td colspan="6" style="border-bottom: 0px">
                    {{ tableData.applyInfo[2].content }}
                  </td>
                </tr>
                <tr v-if="tableData.applyInfo[2]" class="tr-bg">
                  <td
                    colspan="2"
                    style="border-top: 0px; border-right: 0px"
                  ></td>
                  <td
                    colspan="4"
                    style="color: #666; border-top: 0px; border-left: 0px"
                  >
                    电子签名
                  </td>
                </tr>
              </tbody>
            </table>
            <div style="text-align: center">
              <el-button
                type="primary"
                @click="returnFun"
                class="iconfont iconfanhui"
                >返回</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useApplyDetail } from "@/api/grainReserves/zygl/index";
export default {
  name: "useApplyDetail",
  data() {
    return {
      tableData: {},
    };
  },
  computed: {
    sumDrugSpecification() {
      return this.tableData.drugSpecification * this.tableData.sumCount;
    },
  },
  methods: {
    //取消
    returnFun() {
      this.$router.go(-1);
    },

    getInfo() {
      let params = {
        id: this.$route.query.id,
      };
      useApplyDetail(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;
  }
}

.tr-bg {
  background: #f9f9f9;
}

.table-hover {
  tr:hover {
    // background: cyan;
    background: red !important;
  }
}

.widget-grid {
  border: 1px solid #ccc;
  border-top: none;
  padding: 0 14px;
}

.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>
