<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{$t('1008')}}：</label>
                <Input type="text" v-model="orderNum" class="searchInput" />
            </div>
            <div class="filter">
                <label>{{$t('900908')}}：</label>
                <DatePicker
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    :clearable="false"
                    v-model="datetime"
                    class="searchInput MaxWidth"
                ></DatePicker>
            </div>
            <div class="searchBtn">
                <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
                <Button type="primary" class="twoWord" icon="ios-repeat" @click="useMaterial()">归还</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>
        <Modal class="newModalClass" v-model="modal" title="归还" :styles="{width:'650px'}">
            <div class="modal_body">
                <div class="filter">
                    <label>
                        <i>*</i>归还人：
                    </label>
                    <Input type="text" class="searchInput" v-model="user" placeholder="工号" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i> 储位：
                    </label>
                    <Select
                        v-model="place"
                        clearable
                        class="searchSelect"
                        placement="bottom-end"
                    >
                        <Option
                            v-for="item in locations"
                            :value="item.id"
                            :key="item.id"
                        >{{ item.name }}</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>序号：
                    </label>
                    <Input type="text" class="searchInput" v-model="pn" />
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="modal = false">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="usePost()">{{$t('1011')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import moment from 'moment';

export default {
    data () {
        return {
            orderNum: '',
            material_pn: '', // 料号

            // 模态框变量
            datetime: [],
            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: 'serial_number'
                },
                {
                    title: '料号',
                    key: 'material_pn'
                },
                {
                    title: '品名',
                    key: 'material_name'
                },
                {
                    title: '规格',
                    key: 'material_spec'
                },
                {
                    title: '使用地点',
                    key: 'use_location'
                },
                {
                    title: '领用人',
                    key: 'receive_person_name'
                },
                {
                    title: '领用操作人',
                    key: 'receive_oper_person_name'
                },
                {
                    title: '归还人',
                    key: 'return_person_name'
                },
                {
                    title: '归还时间',
                    key: 'return_time'
                },
                {
                    title: '归还操作人',
                    key: 'return_oper_person_name'
                },
                {
                    title: '领用时间',
                    key: 'create_time'
                }
            ],
            modal: false,
            user: '',
            place: '',
            pn: '',
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            type: 0,
            locations: [],
            detailobj: {}
        };
    },
    created () {
        this.columns1 = this.$time.initTableTitle(this.columns1)
        this.datetime = [
            moment(new Date().getTime() - 3600 * 1000 * 24 * 7).format(
                'YYYY-MM-DD '
            ) + '00:00:00',
            moment(new Date().getTime()).format('YYYY-MM-DD ') + '23:59:59'
        ];
        this.search(1, 10);
        // this.getStore();
        // this.getPn();
        this.getLocations();
    // this.getSupplier();
    },
    methods: {
        search (page, pagesize) {
            let starttime, endtime;
            starttime = this.datetime[0];
            endtime = this.datetime[1];
            let data = {
                type: 0, // 1领用0归还
                sn: this.orderNum, // 序号
                start: starttime, // 时间
                end: endtime,
                page: page,
                pageSize: pagesize,
                pn: this.material_pn
            };
            // this.page = page;
            this.request('/wms/CollarUse/GetCollarUesList', data, 'get').then(
                res => {
                    console.log(res.data);

                    if (res.data.ret == 1) {
                        this.total = res.data.total;
                        this.tableData1 = res.data.data;
                    }
                }
            );
        },
        getLocations () {
            this.request('/wms/Location/GetLastLocation', '', 'get').then(res => {
                if (res.data.ret == 1) {
                    this.locations = res.data.data
                }
            })
        },
        useMaterial () {
            this.user = '';
            this.place = 0;
            this.pn = '';
            this.modal = true;
        },
        usePost () {
            if (this.user == '' || this.place == '' || this.pn == '') {
                this.$Message.error('请输入必填项');
                return;
            }
            let data = {
                workCode: this.user,
                locationID: this.place,
                sn: this.pn
            };
            this.request('/wms/CollarUse/SendBack', data, 'post').then(res => {
                if (res.data.ret == 1) {
                    this.$Message.success('归还成功')
                    this.search(1, 10);
                    this.modal = false;
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            });
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            console.log(this.detailobj);
            // this.getDefendList();
        },
        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 scoped>
.row {
    display: flex;
    flex-wrap: wrap;
}
.flex {
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
    margin: 10px 20px;
}

</style>
