<template>
  <div>
    <el-card class="el-card">
      <el-form
        :inline="true"
        :model="query"
        class="udid-query-form"
        size="mini"
      >
        <el-row>
          <el-form-item class="query-form-item">
            <el-input v-model="query.coName" placeholder="通用名称"></el-input>
          </el-form-item>

          <el-form-item class="query-form-item">
            <el-input v-model="query.batchNo" placeholder="批次号"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="onReset"
              ></el-button>
              <el-button type="primary" icon="search" @click="onSubmit"
                >查询</el-button
              >

              <el-button type="primary" icon="search" @click="clearCodes"
                >清空已导出</el-button
              >
              <!-- <el-button type="primary" icon="search">上传单据</el-button> -->
            </el-button-group>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        v-loading="loading"
        :data="list"
        @row-click="intentDetail"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column
          label="产品通用名"
          prop="coName"
          :show-overflow-tooltip="true"
        ></el-table-column>

        <el-table-column label="规格型号" prop="packSpec"></el-table-column>

        <el-table-column
          label="生产企业"
          prop="unit"
          :show-overflow-tooltip="true"
        ></el-table-column>

        <el-table-column
          label="批准文号"
          prop="authCode"
          show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="批次号" prop="batchNo"></el-table-column>
        <el-table-column
          label="生产日期"
          prop="manufacturingDate"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="有效期至"
          prop="expirationDate"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="码数量" prop="minCount"></el-table-column>
        <el-table-column label="最小包装数量" prop="count"></el-table-column>
      </el-table>
      <el-pagination
        :page-size="query.limit"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="total"
        :current-page="query.page"
      ></el-pagination>
    </el-card>

    <el-card class="el-card">
      <div>
        <el-form
          :inline="true"
          :model="detailQuery"
          class="udid-query-form"
          size="mini"
        >
          <el-row>
            <el-form-item class="query-form-item">
              <el-input
                v-model="detailQuery.code"
                placeholder="产品条码"
              ></el-input>
            </el-form-item>
            <el-form-item class="query-form-item">
              <el-input
                v-model="detailQuery.pCode"
                placeholder="父码"
              ></el-input>
            </el-form-item>
            <el-form-item class="query-form-item">
              <el-select v-model="detailQuery.packFlag" placeholder="包装级别">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  @click="onDetailReset"
                ></el-button>
                <el-button type="primary" icon="search" @click="onDetailSubmit"
                  >查询</el-button
                >

                <!-- <el-button type="primary" icon="search" @click="mergesOrders"
              >合并单号</el-button
            > -->
                <!-- <el-button type="primary" icon="search">上传单据</el-button> -->
              </el-button-group>
            </el-form-item>
          </el-row>
        </el-form>
        <el-table v-loading="loading" :data="detailList" style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column label="药监码" prop="code"></el-table-column>
          <el-table-column label="父码" prop="pcode"> </el-table-column>
          <el-table-column label="包装级别" prop="packFlag"></el-table-column>
          <!-- <el-table-column label="批次号" prop="batchNo"></el-table-column>
          <el-table-column
            label="生产日期"
            prop="manufacturingDate"
          ></el-table-column>
          <el-table-column
            label="有效期至"
            prop="expirationDate"
          ></el-table-column> -->
        </el-table>

        <el-pagination
          :page-size="detailQuery.limit"
          @current-change="handleDetailCurrentChange"
          layout="prev, pager, next,total"
          :total="detailTotal"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  filterStock,
  filterBarcodes,
  clearStock,
} from "../../api/inventory/mipsOrder";
export default {
  data() {
    return {
      query: {
        coName: "",
        batchNo: "",
        page: 1,
        limit: 5,
      },
      list: [],
      total: 0,
      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
      ],
      detailQuery: {
        pCode: "",
        codeLevel: "",
        code: "",
        page: 1,
        limit: 10,
      },
      detailList: [],
      detailTotal: 0,
    };
  },

  methods: {
    getList() {
      this.loading = true;
      filterStock(this.query)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    onReset() {
      this.$router.push({
        path: "",
      });
      this.query = {
        page: 1,
        limit: 5,
      };
      this.getList();
    },
    onDetailReset() {
      this.detailQuery = {
        code: "",
        parentCode: "",
        batchNo: this.detailQuery.batchNo,
        page: 1,
        limit: 10,
      };

      this.getDetailList();
    },
    onSubmit() {
      this.loading = true;
      this.getList();
    },
    onDetailSubmit() {
      this.loading = true;
      this.getDetailList();
    },
    intentDetail(row) {
      // this.$router.push({
      //   path: "../inout/stockCodeList",
      //   query: { id: row.batchNo },
      // });
      this.detailQuery = {
        batchNo: row.batchNo,
        page: 1,
        limit: 10,
      };
      this.getDetailList();
      //  this.$router.push({name:'home',query: {id:'1'}})
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },

    getDetailList() {
      this.loading = true;
      filterBarcodes(this.detailQuery)
        .then((response) => {
          this.loading = false;
          this.detailList = response.data.list || [];
          this.detailTotal = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.detailList = [];
          this.detailTotal = 0;
        });
    },
    clearCodes() {
      this.loading = true;
      let tQuery = {
        orderId: null,
      };
      clearStock(tQuery)
        .then((response) => {
          if (response.code == 20000) this.getList();
        })
        .catch(() => {
          this.getList();
        });
    },
    handleDetailCurrentChange(val) {
      this.detailQuery.page = val;
      this.getDetailList();
    },
  },
  mounted() {},

  created() {
    this.getList();
  },
};
</script>
