<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{$t(8047)}}：</label>
                <Select v-model="mtCode" label-in-value clearable class="searchSelect">
                    <Option v-for="item in codeList" :value="item.id" :key="item.id">{{ item.pn }}</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" icon="md-add-circle" @click="deal()">{{$t(8037)}}</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
             class="tableClass"
                :columns="columns"
                :data="data1"
                @on-current-change="handleRowChange"
                highlight-row
            ></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> -->
    </div>
</template>
<script>
export default {
    data () {
        return {
            mtCode: '',
            codeList: [],
            total: 0,
            page: 1,
            pagesize: 10,
            data1: [],
            columns: [
                {
                    title: this.$t('1008'),
                    key: 'order',
                    render: (h, params) => {
                        return h('span', params.index + 1);
                    },
                    width: 70,
                    align: 'center'
                },
                {
                    title: this.$t(8038),
                    key: 'trigger_time',
                    align: 'center'
                },
                {
                    title: this.$t(8039),
                    key: 'information_type',
                    align: 'center'
                },
                {
                    title: this.$t(900933),
                    key: 'material_pn',
                    align: 'center'
                },
                {
                    title: this.$t(100391),
                    key: 'material_name',
                    align: 'center'
                },
                {
                    title: this.$t(300016),
                    key: 'quantity',
                    align: 'center'
                },
                {
                    title: this.$t(950412),
                    key: 'operate_mid',
                    align: 'center'
                },
                {
                    title: this.$t(8040),
                    key: 'operate_time',
                    align: 'center'
                },
                {
                    title: this.$t(200054),
                    key: 'statusCN',
                    align: 'center',
                    render: (h, params) => {
                        let bgColor = '';
                        if (params.row.status == 1) {
                            bgColor = 'red';
                        }
                        if (params.row.status == 2) {
                            bgColor = 'green';
                        }

                        return h(
                            'div',
                            {
                                style: {
                                    color: '#fff',
                                    backgroundColor: bgColor
                                }
                            },
                            params.row.statusCN
                        );
                    }
                }
            ],
            detailobj: {}
        };
    },
    created () {
        this.getCodeList();
        this.search(1, 10);
        // 格式化表格样式
        this.columns = this.$time.initTableTitle(this.columns)
    },
    methods: {
        getCodeList () {
            var data = {
                pn: '', // 物料编号
                name: '', // 供应商id
                count: 50 // 显示数量
            };
            this.request('/config/Material/GetMaterialData', data, 'get').then(
                res => {
                    if (res.data.ret == 1) {
                        this.codeList = res.data.data;
                    }
                }
            );
        },

        search (page, pagesize) {
            let data = {
                // material: this.mtCode,
                page: page,
                pagesize: pagesize
            };
            this.request('/wms/StockAlarm/GetPagedList', data, 'get').then(
                res => {
                    console.log(res.data);
                    if (res.data.ret == 1) {
                        this.mockTableData1(res.data.data);
                    }
                }
            );
        },
        mockTableData1 (tablelist = []) {
            let data = [];
            if (tablelist.length > 0) {
                tablelist.forEach(item => {
                    if (item) {
                        let statusCN = '';
                        if (item.status == 1) {
                            statusCN = this.$t(1950590);
                        }
                        if (item.status == 2) {
                            statusCN = this.$t(1950589);
                        }
                        data.push({
                            trigger_time: item.trigger_time,
                            information_type:
                                item.information_type == 1 ? this.$t(300007) : '',
                            material_pn: item.material_pn,
                            material_name: item.material_name,
                            quantity: item.quantity,
                            operate_mid: item.operate_mid,
                            operate_time: item.operate_time,
                            status: item.status,
                            statusCN: statusCN,
                            id: item.id
                        });
                    }
                });
            }
            this.data1 = data;
        },
        deal () {
            if (this.detailobj.id == '' || this.detailobj.id == undefined) {
                this.$Message.error(this.$t(1017));
                return false;
            }
            if (this.detailobj.status != '1') {
                this.$Message.error(this.$t(8041));
                return false;
            }
            // 参数数据
            var data = {
                id: this.detailobj.id
            };
            this.request('/wms/StockAlarm/DealWith', data, 'get').then(res => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t(8042));
                    this.search(1, 10);
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },

        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            //   this.getStaffList();
        },
        handlePageSize (value) {
            this.pagesize = value;
            //   this.data1 = this.search(this.page, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            //   this.data1 = 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 lang="less" scoped>
</style>
