<template>
    <div>
        <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
            <el-row>
                <el-col>
                    <el-form-item class="query-form-item">
                        <el-input v-model="filterQuery.id" placeholder="单号"></el-input>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.mainAction" placeholder="出入库类型">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="入库" value="WareHouseIn"></el-option>
                            <el-option label="出库" value="WareHouseOut"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.action" placeholder="请选择扫码单据类型">
                            <el-option
                                v-for="item in busTypes"
                                :key="item.name"
                                :label="item.name"
                                :value="item.action">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-col>
                <el-col>
                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.locStorageCode" placeholder="请选择当前仓库" clearable="true"
                                   size="mini">
                            <el-option
                                v-for="item in storageList"
                                :key="item.name"
                                :label="item.name"
                                :value="item.code">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button-group>
                            <el-button
                                type="primary"
                                icon="el-icon-refresh"
                                @click="onReset"
                            ></el-button>
                            <el-button type="primary" icon="search" @click="search"
                            >查询
                            </el-button
                            >
                        </el-button-group>
                    </el-form-item>
                    <el-form-item style="margin-right: 50px; margin-left: auto">
                        <el-button-group>
                            <el-button type="primary" icon="search" @click="addOrders">新增单据</el-button>
                            <el-button type="primary" icon="search" @click="errOrders">异常单据</el-button>

                        </el-button-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table v-loading="loading" :data="list" style="width: 100%"
                  highlight-current-row
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="扫码单据类型" prop="billTypeName">
            </el-table-column>
            <el-table-column label="订单号" prop="id" show-overflow-tooltip></el-table-column>
            <el-table-column label="来源订单号" prop="corpOrderId" show-overflow-tooltip></el-table-column>
            <el-table-column label="来源" prop="fromType">
                <template slot-scope="scope">
                    <span>{{ fromTypeMap[scope.row.fromType] }}</span>
                </template>

            </el-table-column>
            <el-table-column label="往来单位" prop="fromCorp" width="220">

            </el-table-column>
            <el-table-column label="当前仓库" prop="invName" width="120">
            </el-table-column>
            <el-table-column label="创建时间" prop="actDate" show-overflow-tooltip>
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span>{{ scope.row.actDate }}</span>
                </template>
            </el-table-column>
            <el-table-column label="校验状态" prop="status" width="100">
                <template slot-scope="scope">
                    <el-tag :type="(scope.row.status ===-1 ) | statusFilterType">{{
                            checkStatus[scope.row.status]
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="addOrders(scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="deleteDialog(scope.row.id)"
                    >删除
                    </el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        v-if="scope.row.status !== -1"
                        @click.native.stop="onUpload(scope.row.id)"
                    >立即处理
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            :page-size="filterQuery.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
            :current-page="filterQuery.page"
        ></el-pagination>

        <el-dialog
            title="异常订单"
            :visible.sync="errOrderVisible"
            width="80%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <ioErrorOrder
            ></ioErrorOrder>
        </el-dialog>

        <el-dialog
            :title="formMap[formName]"
            :visible.sync="addOrderVisible"
            width="85%" append-to-body
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            v-if="addOrderVisible"
            @close='closeDialog'
        >
            <addOrder
                :closeDialog="closeDialog"
                :idQuery="idQuery"
            ></addOrder>
        </el-dialog>

    </div>
</template>

<script>
import ioErrorOrder from "@/views/warehouse/ioErrorOrder";
import addOrder from "@/views/warehouse/addOrder";

export default {
    data() {
        return {
            filterQuery: {
                id: null,
                mainAction: null,
                action: null,
                status: null,
                locStorageCode: null,
                page: 1,
                limit: 20
            },
            loading: false,
            list: [],
            total: 0,
            formData: {
                id: null,
                name: null,
                prefix: null,
                startNum: null,
                step: 1,
                serialNum: null,
                status: 1,
                remark: null
            },
            storageList: [],
            busTypes: [],
            errOrderVisible: false,
            formMap: {
                add: "新增单据",
                update: "编辑单据",
            },
            formName: null,
            addOrderVisible: false,
            idQuery: {
                id: ""
            }
        };
    },
    components: {
        ioErrorOrder,
        addOrder
    },
    methods: {
        onReset() {
            this.$router.push({
                path: ""
            });
            this.query = {
                id: null,
                mainAction: null,
                action: null,
                status: null,
                locStorageCode: null,
                page: 1,
                limit: 20
            };
            this.getList();
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs['formData'].resetFields();
                this.$refs["formData"].clearValidate();
            });
        },
        search() {
            this.query.page = 1;
            this.getList();
        },
        getList() {

        },
        cancelDialog() {
        },
        handleModifyClick(row) {
            this.formData = row;
        },
        change() {
        },
        addOrders() {
            this.addOrderVisible = true;
            this.formName = "add";
        },
        errOrders() {
            this.errOrderVisible = true;
        },
        onUpload(id) {

        },
        closeDialog() {

        },
        deleteDialog(row) {
            this.$confirm("此操作将删除单据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.loading = true;
                let params = {id: row.id};
            }).catch(() => {
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },
    },
    mounted() {
    },
    created() {
        this.getList();
    }
};
</script>

<style>

</style>
