<template>
  <!-- 配送目录记录 -->
  <div style="display: flex">
    <el-card style="width: 18%; margin-right: 18px; border-radius: 6px">
      <el-tabs
        v-model="activeNametree"
        type="card"
        @tab-click="tabClick"
        stretch
      >
        <!-- <el-tab-pane label="按分类" name="grp"></el-tab-pane> -->
        <el-tab-pane label="按机构" name="org"></el-tab-pane>
      </el-tabs>
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="spdId"
        @node-click="handleNodeClick"
        default-expand-all="true"
        style="margin-top: 10px"
      ></el-tree>
    </el-card>
    <div class="right-common-box">
      <el-form
        :model="listQuery"
        ref="listQuery"
        :inline="true"
        label-width="90px"
      >
        <el-form-item size="mini" label="耗材名称" prop="prodName" class="long">
          <el-input
            v-model="listQuery.prodName"
            placeholder="请输入耗材名称"
          ></el-input>
        </el-form-item>
        <el-form-item size="mini" label="医保编码" prop="hiCode" class="long">
          <el-input
            v-model="listQuery.hiCode"
            placeholder="请输入医保编码"
          ></el-input>
        </el-form-item>
        <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 label="规格" prop="spec" class="long">
          <el-input
            v-model="listQuery.spec"
            placeholder="请输入规格"
          ></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="mol" class="long">
          <el-input v-model="listQuery.mol" placeholder="请输入型号"></el-input>
        </el-form-item>
        <el-form-item size="mini" label="批号" prop="lotNum" class="long">
          <el-input
            v-model="listQuery.lotNum"
            placeholder="请输入批号"
          ></el-input>
        </el-form-item>
        <el-button
          style="margin-left: 30px"
          type="primary"
          @click="getHospConsum('search')"
          >查询</el-button
        >
        <el-button @click="reset()">重置</el-button>
        <!-- </div> -->
      </el-form>
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="list"
        fit
        height="500"
        stripe
        border
      >
        <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="prodName" />
        <el-table-column label="规格" prop="spec" />
        <el-table-column label="型号" prop="mol" />
        <!-- <el-table-column label="耗材信息" min-width="340">
          <template slot-scope="scope">
            <mcs-info :info="scope.row"></mcs-info>
          </template>
        </el-table-column> -->
        <el-table-column label="生产厂家" prop="prodEntp" />
        <el-table-column label="医保编码" prop="hiCode" />
        <el-table-column label="批号" prop="lotNum" />
        <el-table-column label="生产日期" prop="manuDate" />
        <el-table-column label="有效期至" prop="prodExpy" />
        <el-table-column label="库存" prop="cnt" />
      </el-table>
      <!--分页-->
      <yl-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getHospConsum"
      />
    </div>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import mcsInfo from "@/views/components/mcs-info.vue";
import { selectSpdList } from "@/api/consumCataManage-sup/index";
import { selectSplerListCnt } from "@/api/catalog-inventory/index";
import ylUpload from "@/components/yl-upload";
export default {
  components: {
    ylPagination,
    ylUpload,
    mcsInfo
  },
  data() {
    return {
      spdId: null,
      data: [],
      defaultProps: {
        children: "children",
        label: "spdName"
      },
      list: [],
      listLoading: false,
      listQuery: {
        current: 1,
        size: 10,
        hiCode: "",
        lotNum: "",
        prodName: "",
        spec: "",
        mol: "",
        prodEntp: ""
      }
    };
  },
  methods: {
    getHospConsum() {
      this.getTableData();
    },
    tabClick(tab) {
      if (tab.label == "按机构") {
        this.defaultProps.label = "spdName";
      }
    },
    // 获取医院列表
    getData(type) {
      this.data = [];
      this.listLoading = true;
      selectSpdList()
        .then(res => {
          this.listQuery.spdId = res.data[0].spdId;
          this.getTableData();
          this.data = res.data;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 点击获取医院药品列表
    handleNodeClick(data) {
      this.listLoading = true;
      this.spdId = data.spdId;
      this.listQuery.spdId = this.spdId;
      this.getTableData();
    },
    getTableData() {
      selectSplerListCnt(this.listQuery)
        .then(res => {
          let newData = [...res.data.records];
          this.list = newData;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    reset(type) {
      this.listQuery.current = 1;
      this.listQuery.size = 10;
      this.getTableData();
      this.$refs.listQuery.resetFields();
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 12px;
}
::v-deep .el-tree-node__content {
  height: 35px;
}
::v-deep .el-input__suffix {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
}
::v-deep .long .el-form-item__content {
  width: 220px;
}
::v-deep .long .el-input__inner {
  width: 199px;
}
</style>
