<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{$t(8070)}}：</label>
                <Select v-model="storageid" clearable class="searchSelect">
                    <Option v-for="item in stores" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(900933)}}：</label>
                <Select v-model="material_pn" clearable filterable remote
                            :remote-method="getPn" class="searchSelect">
                    <Option
                        v-for="item in materials"
                        :value="item.name"
                        :key="item.id"
                    >{{ item.name }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(8073)}}：</label>
                <Select v-model="location" clearable class="searchSelect">
                    <Option
                        v-for="item in locations"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.name }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(600011)}}：</label>
                <Select v-model="supplier" clearable class="searchSelect">
                    <Option
                        v-for="item in suppliers"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.name }}</Option>
                </Select>
            </div>
            <div class="searchBtn" >
                <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
                <Button
                    type="success"
                    class="twoWord"
                    @click="downExcel()"
                    icon="md-add-circle"
                >导出</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData1"
                :columns="columns1"
            ></Table>
            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total"
                        :current="page"
                        @on-change="changePage"
                        show-elevator
                        show-sizer
                        show-total
                        @on-page-size-change="handlePageSize"
                        :page-size-opts="[10,20,30,40,100]"
                    ></Page>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/libs/api.request';
import moment from 'moment';

export default {
    data () {
        return {
            action:
                axios.publicPath +
                'tlm/Upload/Submit?templateName=TechToolList',
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            storageid: 0, // 仓库
            material_pn: '', // 料号
            location: '', // 储位
            supplier: 0, // 供应商
            // 模态框变量
            stores: [],
            materials: [],
            locations: [],
            suppliers: [],
            columns1: [
                {
                    type: 'index2',
                    title: 'ID',
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: '70px'
                },
                {
                    title: '储位',
                    key: 'storage_location_name',
                    width: 400
                },
                {
                    title: '供应商',
                    key: 'businessName'
                },
                {
                    title: '料号',
                    key: 'material_pn'
                },
                {
                    title: '系统批次',
                    key: 'batch_number'
                },
                {
                    title: '序号',
                    key: 'serial_number'
                },
                {
                    title: '名称',
                    key: 'material_name'
                },
                {
                    title: '规格',
                    key: 'material_spec'
                },
                {
                    title: '数量',
                    key: 'quantity'
                },
                {
                    title: '创建时间',
                    key: 'create_time'
                }
            ],
            modal: false,
            selection: [],
            testData: [],
            returnData: [],
            location1: [],
            location2: [],
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            total1: 0,
            page1: 1,
            pagesize1: 10,
            enterData: [],
            type: 0,
            storeArr: [],
            detailobj: {}
        };
    },
    created () {
        this.search(1, 10);
        this.getStore();
        this.getPn();
        this.getLocations();
        this.getSupplier();
        this.columns1 = this.$time.initTableTitle(this.columns1)
    },
    methods: {
        search (page, pagesize) {
            let data = {
                invantorysn: this.material_pn, // 物料编号
                storageid: this.storageid, // 仓库id
                locationid: this.location, // 储位
                businessid: this.supplier, // 供应商
                batch: '', // 批次号
                no: '', // 序号
                page: page,
                pageSize: pagesize
            };
            // this.page = page;
            this.request('/wms/Stock/GetStockList', data, 'get').then(res => {
                if (res.data.ret == 1) {
                    this.total = res.data.total;
                    this.tableData1 = res.data.data;
                }
            });
        },
        getStore () {
            let data = {
                getAll: 1
            };
            this.request('/wms/Allocation/GetWavehouse', data, 'get').then(
                res => {
                    if (res.data.ret == 1) {
                        this.stores = res.data.data;
                    }
                }
            );
        },
        getPn (query='') {
            this.request(
                '/wms/Inventory/GetInventoryListByName',
                { pn: query,count:50 },
                'get'
            ).then(res => {
                if (res.data.ret == 1) {
                    this.materials = res.data.data;
                }
            });
        },
        getLocations () {
            this.request(
                '/wms/Location/GetLastLocation',
                { storageid: 0 },
                'get'
            ).then(res => {
                if (res.data.ret == 1) {
                    this.locations = res.data.data;
                }
            });
        },
        getSupplier () {
            this.request(
                '/wms/Inventory/GetBusinessList',
                { materialID: 0 },
                'get'
            ).then(res => {
                if (res.data.ret == 1) {
                    this.suppliers = res.data.data;
                }
            });
        },
        downExcel () {
            let data = {
                invantorysn: this.material_pn, // 物料编号
                storageid: this.storageid, // 仓库id
                locationid: this.location, // 储位
                businessid: this.supplier
            };
            this.request('/wms/Stock/ExportStockDetails', data, 'get').then(
                res => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + '' + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        request (url, data, type) {
            if (type == 'get') {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type
                    })
                    .then(res => {
                        return res;
                    })
                    .catch(error => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type
                    })
                    .then(res => {
                        return res;
                    })
                    .catch(error => error);
            }
        }
    }
};
</script>

<style>
</style>
