<template>
  <div>
    <el-descriptions class="margin-top" title="产品信息" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">
          物资名称
        </template>
        {{ inputQuery.cpmctymc }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          DI/物资编码
        </template>
        {{ inputQuery.nameCode }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          批次号
        </template>
        {{ inputQuery.batchNo }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          规格型号
        </template>
        {{ inputQuery.ggxh }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          生产日期
        </template>
        {{ inputQuery.productionDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          失效日期
        </template>
        {{ inputQuery.expireDate }}
      </el-descriptions-item>
    </el-descriptions>

    <el-form :inline="true" :model="invPreProductDetailQuery" style="margin-top: 10px;" size="mini">
      <el-form-item class="query-form-item" label="UDI码:">
        <el-input v-model="invPreProductDetailQuery.code"
                  placeholder="请输入UDI码查询"
                  clearable
                  style="width: 100%"
        ></el-input>
      </el-form-item>
      <el-form-item class="query-form-item" label="出入库类型:">
        <el-select v-model="invPreProductDetailQuery.mainAction" placeholder="请选择出入库类型" style="width: 90%">
          <el-option label="全部" value=""></el-option>
          <el-option label="入库" value="WareHouseIn"></el-option>
          <el-option label="出库" value="WareHouseOut"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="query-form-item" label="单据时间:">
        <el-date-picker
          :picker-options="pickerOptions"
          v-model="actDateRange"
          type="daterange"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 90%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button type="primary" icon="search" @click="onSubmit"
          >查询
          </el-button
          >
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" style="width: 100%"
              :default-sort="defaultSort" @sort-change="handleSortChange"
              border>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column
        label="UDI码"
        prop="code"
        width="350"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="出入库单号"
        prop="orderId"
        width="180"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="单据类型"
        prop="actionName"
        width="150"
      ></el-table-column>
      <el-table-column
        label="出入库类型"
        prop="mainActionStr"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="货位"
        prop="invSpaceName"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="价格"
        prop="price"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="入库数量"
        prop="inCount"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="出库数量"
        prop="outCount"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="单据日期"
        prop="orderTime"
        width="150"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :limit.sync="invPreProductDetailQuery.limit"
      :page.sync="invPreProductDetailQuery.page"
      @pagination="getList"
    ></pagination>

  </div>
</template>

<script>
import {getInvPreInProductDetail} from "@/api/inventory/invPreInSearch";
import {isBlank} from "@/utils/strUtil";

export default {
  name: "InvPreProductsDetail",
  props: {
    inputQuery: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      invPreProductDetailQuery: {
        code: null,
        relId: null,
        supId: null,
        batchNo: null,
        deptCode: null,
        invCode: null,
        page: 1,
        limit: 10,
        price: null,
      },
      list: [],
      total: 0,
      loading: false,
      defaultSort: {prop: 'orderTime', order: 'desc'},
      actDateRange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.invPreProductDetailQuery = {
        mainAction: null,
        code: null,
        relId: null,
        supId: null,
        batchNo: null,
        deptCode: null,
        invCode: null,
        page: 1,
        limit: 10,
        price: null,
      };
      this.getList();
      this.actDateRange = [];
    },
    onSubmit() {
      this.invPreProductDetailQuery.page = 1;
      this.getList();
    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    handleSizeChange(val) {
      this.invPreProductDetailQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.invPreProductDetailQuery.page = val;
      this.getList();
    },

    handleSortChange(column, prop, order) {
      if (column.order === 'descending') {
        this.invPreProductDetailQuery.sort = 'desc'
      } else {
        this.invPreProductDetailQuery.sort = 'asc'
      }
      this.invPreProductDetailQuery.orderBy = column.prop;
      this.getList();
    },

    getList() {
      this.loading = true;
      if (this.actDateRange !== null) {
        this.invPreProductDetailQuery.startTime = this.actDateRange[0];
        this.invPreProductDetailQuery.endTime = this.actDateRange[1];
      } else {
        this.invPreProductDetailQuery.startTime = null;
        this.invPreProductDetailQuery.endTime = null;
      }
      this.invPreProductDetailQuery.relId = this.inputQuery.relId;
      this.invPreProductDetailQuery.invSpaceCode = this.inputQuery.invSpaceCode;
      this.invPreProductDetailQuery.supId = this.inputQuery.supId;
      this.invPreProductDetailQuery.batchNo = this.inputQuery.batchNo;
      this.invPreProductDetailQuery.deptCode = this.inputQuery.deptCode;
      this.invPreProductDetailQuery.invCode = this.inputQuery.invCode;
      this.invPreProductDetailQuery.price = this.inputQuery.price;

      // this.invPreProductDetailQuery.nameCode = this.inputQuery.nameCode;
      getInvPreInProductDetail(this.invPreProductDetailQuery).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.list = res.data.list || [];
          this.total = res.data.total || 0;
        } else {
          this.$message.error(res.message);
          this.list = [];
          this.total = 0;
        }
      }).catch((error) => {
        this.loading = false;
        this.$message.error(error.message);
        this.list = [];
        this.total = 0;
      })
    },
  },
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.getList();
  },
};
</script>

<style type="text/scss" lang="scss">
</style>

