@extends('layouts.app')
@section('title')容器管理@endsection
@section('content')
    <div class="d-none" id="list">
        <!--查询            -->
        <div class="row m-3" style="background-color: #fff;">
            <div class="form-group ml-4 mt-3" data-toggle="tooltip" data-placement="top" title="选择全部">
                <input @change="checkAllBtn()" v-model="checkAll" type="checkbox" class="form-check-input"
                       id="checkAll">
                <label class="form-check-label" for="checkAll">选择全部</label>
            </div>
            <div class="form-group m-2">
                <select class="form-control selectpicker" title="分页大小" v-model="size">
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                </select>
            </div>
            <div class="form-group m-2" style="max-width: 200px !important;">
                <select v-model="search.warehouseId" class="selectpicker form-control"  title="仓库"
                        data-actions-box="true"
                        data-live-search="true"
                        data-live-search-placeholder="搜索"
                >
                    <option v-for="(v,k) of selectData.warehouses" :value="v.id" :key="v.id">@{{ v.name }}</option>
                </select>
            </div>
            <div class="form-group m-2">
                <select class="form-control selectpicker" title="类型" v-model="search.type">
                    <option value="托盘">托盘</option>
                    <option value="周转箱">周转箱</option>
                </select>
            </div>

            <div class="form-group m-2">
                <select class="form-control selectpicker" title="是否允许混放" v-model="search.allowMixed">
                    <option value="允许">允许</option>
                    <option value="不允许">不允许</option>
                </select>
            </div>
            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-info" @click="searchData()">查询</button>
            </div>
            <td class="form-group m-2">
                <div class="btn-group mt-2" role="group">
                    <button id="btnGroupDrop1" type="button" class="form-control btn btn-sm btn-info dropdown-toggle"
                            data-toggle="dropdown">
                        批量操作
                    </button>
                    <div class="dropdown-menu m-2" aria-labelledby="btnGroupDrop1">
                        <button type="button" class="btn btn-danger" @click="switchContainerStatusBench('停用')">停用
                        </button>
                        <button type="button" class="btn btn-success" @click="switchContainerStatusBench('启用')">启用
                        </button>
                    </div>
                </div>

            </td>
        </div>

        <!--            导出-->
        <span class="dropdown"></span>
        <!--            表格-->
        <table class="table table-striped table-bordered table-hover card-body td-min-width-80" id="table">
            <tr v-for="(item,i) in details.data" @click="selectTr===i+1?selectTr=0:selectTr=i+1"
                :class="selectTr===i+1?'focusing' : ''">
                <td>
                    <input class="checkItem" type="checkbox" v-model="item.checked">
                </td>
                <td class="td-warm text-muted"><span>@{{ i+1 }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.containerNo }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.type }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.warehouseCode }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.allowMixed }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.volume }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.loadWeight }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.username }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.status }}</span></td>
                <td class="td-warm text-muted"><span>
                        <button v-if="item.status == '启用'" @click="switchContainerStatus(item,'停用')" type="button"
                                class="btn btn-danger">停用</button>
                        <button v-if="item.status == '停用'" @click="switchContainerStatus(item,'启用')" type="button"
                                class="btn btn-success">启用</button>
                    </span>
                </td>
            </tr>
        </table>

        <nav aria-label="...">
            <ul class="pagination">
                <li class="page-item" :class="current===1?'disabled':''">
                    <button class="page-link" @click="pagination('pre')">上一页</button>
                </li>
                <li class="page-item" :class="current===details.pages?'disabled':''">
                    <button class="page-link" @click="pagination('next')">下一页</button>
                </li>
            </ul>
        </nav>
    </div>


@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                submitData: {
                    type: null,
                    warehouseId: null,
                    allowMixed: null,
                    volume: null,
                    loadWeight: null,
                    createAmount: null,
                },
                selectData: {
                    warehouses: {!! $warehouses !!}
                },
                checkAll: false,
                selectTr: 0,
                details: {
                    data: [],
                    total: null,
                    current: 1,
                    pages: null,
                    size: 50,
                },
                search: {
                    type: null,
                    warehouseId: null,
                    allowMixed: null,
                },
                size: 50,
                current: 1,
            },
            created() {
                window.tempTip.show("功能关闭，移至SWMS系统进行操作");
                return
                let url = this.getBaseUrl() + `/api/wms/containerManage/list?size=${this.size}&current=${this.current}`;
                this.getPageResult(url);
            },
            mounted: function () {
                $('#list').removeClass('d-none');
                $(".up").slideUp();
                let column = [
                    {name: 'checkbox', value: '',neglect: true},
                    {name: 'id', value: '序号',neglect: true},
                    {name: 'containerNo', value: '容器号'},
                    {name: 'type', value: '容器类型'},
                    {name: 'warehouseCode', value: '所在仓库'},
                    {name: 'allowMixed', value: '是否允许混放'},
                    {name: 'volume', value: '容积'},
                    {name: 'loadWeight', value: '载重'},
                    {name: 'username', value: '创建人'},
                    {name: 'status', value: '状态'},
                    {name: 'action', value: '操作'},

                ];
                new Header({
                    el: "table",
                    name: "details",
                    column: column,
                    data: this.details.data,
                    restorationColumn: 'addtime',
                    isCheckAllBox:false,
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                }).init();
            },
            methods: {
                checkAllBtn() {
                    for (let item of this.details.data) {
                        item.checked = this.checkAll;
                    }
                },
                getPageResult(url) {
                    axios.post(url, this.getSearch()).then(res => {
                        if (res.data.code !== 200) {
                            tempTip.show('接口异常!');
                            this.details.data = [];
                            this.details.total = 0
                            this.details.current = 1
                            this.details.pages = 0
                            this.details.size = 50;
                        } else {
                            this.details.data = res.data.data.list;
                            this.details.total = res.data.data.page.total;
                            this.details.current = res.data.data.page.pageNum;
                            this.details.pages = res.data.data.page.pages
                            this.details.size = res.data.data.page.pageSize;
                        }
                    });
                },
                getSearch() {
                    return Object.assign({}, this.search);
                },
                searchData() {
                    this.current = 1;
                    this.pagination();
                },
                //根据环境获取不同的url
                getBaseUrl() {
                    let url = null;
                    let env = "{{ config('app.env') }}";
                    if (env === 'local') {
                        url = 'http://127.0.0.1:8112'
                    } else if (env === 'production') {
                        url = 'https://api-back.baoshi56.com'
                    }
                    return url;
                },
                pagination(flag) {
                    if (flag === 'pre' && this.current > 1) {
                        this.current--;
                    } else if (flag === 'next' && this.current < this.details.pages) {
                        this.current++;
                    }
                    let url = this.getBaseUrl() + `/api/wms/containerManage/list?size=${this.size}&current=${this.current}`;
                    this.getPageResult(url);

                },
                switchContainerStatus(item, status) {
                    let url = this.getBaseUrl() + `/api/wms/containerManage/update`;
                    axios.patch(url, {
                        id: item.id,
                        status
                    }).then(res => {
                        tempTip.showSuccess('修改状态成功!');
                        item.status = status;
                    })
                },
                switchContainerStatusBench(status) {
                    let url = this.getBaseUrl() + `/api/wms/containerManage/benchSwitchStatus`;
                    let filter = this.details.data.filter(i => i.checked === true);
                    if (filter.length === 0) {
                        tempTip.show("选中的元素为空");
                        return;
                    }
                    let idList = filter.map(i => i.id);

                    axios.patch(url, {
                        idList,
                        status
                    }).then(res => {
                        if (res.data.code !== 200) {
                            let errors = "";
                            for (let i in res.data.data) {
                                errors += i + ': ' + res.data.data[i];
                            }
                            tempTip.show(errors);

                        } else {
                            tempTip.showSuccess('批量修改状态成功!');
                            for (let item of filter) {
                                item.status = status;
                            }
                        }
                    });
                }
            },

        });
    </script>
@endsection