<template>
  <layout-body>
    <layout-filter>
      <filter-item :label="filters.sknCode.label">
        <Input
          v-model.trim="filters.sknCode.model"
          :number="true"
          :placeholder="filters.sknCode.holder"
          :maxlength="9"
        />
      </filter-item>
      <filter-item label="选择类目">
        <select-category :value="categoryValue" @select-change="sortChange"></select-category>
      </filter-item>

      <filter-item label="选择品牌">
        <select-brand v-model="filters.brand.model"></select-brand>
      </filter-item>

      <filter-item :label="filters.storageType.label">
        <Select v-model="filters.storageType.model" @on-change="storageTypeSelect">
          <Option v-for="option in filters.storageType.options" :key="option.value" :value="option.value"
            >{{ option.label }}
          </Option>
        </Select>
      </filter-item>

      <filter-item>
        <Button type="primary" @click="filterSearch">筛选</Button>
        <Button type="warning" @click="showImportStore">导入库存</Button>
        <Button @click="clearFilter">清空条件</Button>
        <!-- <filter-tips type="warning" show-icon closable>如果该商品在有货仓库中有库存，会包含在可售库存中进行展示。可以点击【库存分布】查询商品库存详情</filter-tips> -->
      </filter-item>
    </layout-filter>

    <layout-list>
      <Table border :columns="tableCols" :data="tableData"></Table>
      <Page
        :total="pageData.total"
        :current="pageData.current"
        :page-size="20"
        show-total
        @on-change="pageChange"
      ></Page>
    </layout-list>

    <edit-store ref="showStoreEdit" @on-success="editSuccess"></edit-store>
    <import-store ref="showStoreImport" @on-success="editSuccess"></import-store>
  </layout-body>
</template>

<script>
import _ from 'lodash';
import JitService from 'services/repository/jit-service';
import EditStore from './components/edit-store';
import ImportStore from './components/import-store';
import { jit } from './store';
import FilterItem from '../../../components/global/layout-filter-item';

export default {
  components: {
    FilterItem,
    EditStore,
    ImportStore,
  },
  data() {
    return jit.call(this);
  },
  created() {
    this.jitService = new JitService();
  },
  mounted() {
    this.getProduct();
  },
  methods: {
    editStore(row) {
      this.$refs.showStoreEdit.show(row, this.filters.storageType.model);
    },
    editSuccess() {
      this.getProduct();
    },
    showImportStore() {
      this.$refs.showStoreImport.show();
    },
    filterParams() {
      const productSkn = this.filters.sknCode.model;
      const brandId = this.filters.brand.model === -1 ? null : this.filters.brand.model;
      const maxSortId = this.filters.maxSortId;
      const middleSortId = this.filters.middleSortId;
      const smallSortId = this.filters.smallSortId;
      const storageType = this.filters.storageType.model;

      const pageNo = this.pageData.current;
      const pageSize = this.pageData.pageSize;

      if (productSkn && !_.isNumber(productSkn)) {
        this.$Message.error('SKN编码只能为数字');
        return Promise.reject();
      }

      return Promise.resolve({
        productSkn,
        brandId,
        maxSortId,
        middleSortId,
        smallSortId,
        pageNo,
        pageSize,
        storageType,
      });
    },
    filterSearch() {
      this.getProduct();
    },
    storageTypeSelect() {
      this.getProduct();
    },
    clearFilter() {
      this.filters.sknCode.model = null;
      this.filters.brand.model = -1;
      this.filters.maxSortId = null;
      this.filters.middleSortId = null;
      this.filters.smallSortId = null;
      this.filters.storageType.model = 3;
      this.categoryValue = [];
      this.pageData.current = 1;

      this.getProduct();
    },
    pageChange(page) {
      this.pageData.current = page;
      this.getProduct();
    },
    getProduct() {
      return this.filterParams().then(params => {
        return this.jitService.listProduct(params).then(result => {
          if (result.code === 200) {
            this.tableData = result.data.records;
            this.pageData.total = result.data.totalCount;
            this.pageData.current = result.data.pageNo;
          }
        });
      });
    },
    sortChange(sort) {
      this.filters.maxSortId = sort.max;
      this.filters.middleSortId = sort.mid;
      this.filters.smallSortId = sort.min;
    },
  },
};
</script>

<style lang="scss">
.btn-row-space {
  margin-top: 10px;
}
</style>