<template>
  <div class="recordsDetails">
    <div>
      <div id="pdfId">
        <div class="recordsTable">
          <div class="title-box">
            <p>药剂基本详情</p>
          </div>
          <fieldset>
            <el-row :gutter="30">
              <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-col :span="8" :xs="24">
                <label class="label-title">药剂形态</label>
                <label
                  ><el-input v-model="tableData.drugType" 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 v-model="tableData.drugPacking" readonly></el-input
                ></label>
              </el-col>
              <el-col :span="4" :xs="24">
                <label class="label-title">规格型号</label>
                <label
                  ><el-input
                    v-model="tableData.drugSpecification"
                    readonly
                  ></el-input
                ></label>
              </el-col>
              <el-col :span="4" :xs="24">
                <label class="label-title">&nbsp;</label>
                <label
                  ><el-input v-model="tableData.drugSpecificationUnit" readonly></el-input
                ></label>
              </el-col>
              <el-col :span="8" :xs="24">
                <label class="label-title">生产厂家</label>
                <label
                  ><el-input
                    v-model="tableData.manufacturer"
                    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 v-model="tableData.drugNumber" readonly></el-input
                ></label>
              </el-col>
            </el-row>
          </fieldset>
          <!-- <table>
                        <tbody>
                            <tr>
                                <td>药剂种类</td>
                                <td>{{ tableData.drugKind }}</td>
                                <td>药剂名称</td>
                                <td>{{ tableData.drugName }}</td>
                                <td>药剂形态</td>
                                <td>{{ tableData.drugType }}</td>
                            </tr>
                            <tr>
                                <td>药剂包装</td>
                                <td>{{ tableData.drugPacking }}</td>
                                <td>规格型号</td>
                                <td>{{ tableData.drugSpecification }}</td>
                                <td>生产厂家</td>
                                <td>{{ tableData.manufacturer }}</td>
                            </tr>
                            <tr>
                                <td>药剂编号</td>
                                <td colspan="5">{{ tableData.drugNumber }}</td>
                            </tr>
                        </tbody>
                    </table> -->
        </div>
      </div>
      <div style="padding: 20px">
        <el-table
          :data="tableList"
          v-loading="loading"
          border
          stripe
          highlight-current-row
        >
          <el-table-column
            prop="createTime"
            label="日期"
            :show-overflow-tooltip="true"
            width="260px"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">入库</span>
              <span v-if="scope.row.type == 2">归还</span>
              <span v-if="scope.row.type == 3">出库</span>
              <span v-if="scope.row.type == 4">盘点</span>
              <span v-if="scope.row.type == 5">销毁</span>
            </template>
          </el-table-column>
          <el-table-column label="收入" align="center">
            <el-table-column
              prop="storageCount"
              label="数量(袋或瓶)"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="storageCount"
              label="总量(L或kg)"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }" v-if="row.storageCount !== null">
                {{
                  String(
                    row.storageCount * tableData.drugSpecification
                  ).indexOf(".") > -1
                    ? Number(
                        row.storageCount * tableData.drugSpecification
                      ).toFixed(3)
                    : row.storageCount * tableData.drugSpecification
                }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="支出" align="center">
            <el-table-column
              prop="deliveryCount"
              label="数量(袋或瓶)"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="deliveryCount"
              label="总量(L或kg)"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }" v-if="row.deliveryCount !== null">
              {{
                  String(
                    row.deliveryCount * tableData.drugSpecification
                  ).indexOf(".") > -1
                    ? Number(
                        row.deliveryCount * tableData.drugSpecification
                      ).toFixed(3)
                    : row.deliveryCount * tableData.drugSpecification
                }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="库存" align="center">
            <el-table-column
              prop="amount"
              label="数量(袋或瓶)"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="amount"
              label="总量(L或kg)"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }" v-if="row.amount !== null">
                {{
                  String(
                    row.amount * tableData.drugSpecification
                  ).indexOf(".") > -1
                    ? Number(
                        row.amount * tableData.drugSpecification
                      ).toFixed(3)
                    : row.amount * tableData.drugSpecification
                }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="pag-right clearFix">
          <el-pagination
            class="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            hide-on-single-page
            :current-page.sync="pageInfo.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
          ></el-pagination>
        </div>
        <div class="fieldset" style="text-align: center">
          <el-button
            type="primary"
            @click="returnFun"
            class="iconfont iconfanhui"
            >返回</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  standingBookDetail,
  standingBookDetailList,
} from "@/api/grainReserves/zygl/index";
export default {
  name: "standingBookDetail",
  data() {
    return {
      tableData: {},
      tableList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    //取消
    returnFun() {
      this.$router.go(-1);
    },

    getInfo() {
      let params = {
        id: this.$route.query.id,
      };
      standingBookDetail(params)
        .then((res) => {
          if (res.infoCode && res.infoCode == 200) {
            this.tableData = res.data;
            this.getList();
          }
        })
        .catch();
    },
    getList() {
      let data = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        drugInfoId: this.tableData.drugInfoId,
        manufacturer: this.tableData.manufacturer,
        orgId: this.tableData.orgId,
      };
      standingBookDetailList(data)
        .then((res) => {
          if (res.infoCode && res.infoCode == 200) {
            this.tableList = res.data.items;
            this.$set(this.pageInfo, "total", res.data.total);
          }
        })
        .catch((error) => {});
    },
    handleSizeChange(val) {
      //条数改变
      this.pageInfo.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      //页数改变
      this.pageInfo.pageNum = val;
      this.getList();
    },
  },
  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);
  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>