<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-form-item>
                        <el-button-group style="display: flex;">
                            <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-button type="primary" icon="search" @click="addOrders">新增单据</el-button>
                            </el-button-group>
                        </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="orderId" show-overflow-tooltip></el-table-column>
            <el-table-column label="来源订单号" prop="corpOrderId" show-overflow-tooltip></el-table-column>
            <el-table-column label="往来单位" prop="fromCorp"></el-table-column>
            <el-table-column label="业务类型" prop="busName"></el-table-column>
            <el-table-column label="来源" prop="fromType"></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>{{ orderStatus[scope.row.status] }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="出入库仓库" prop="locStorageName" width="100"></el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="handleModifyClick(scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="submitOrder(scope.row)"
                    >提交
                    </el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="deleteDialog(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="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 {getBussinessType} from "@/api/basic/bussinessType";
import {filterOrder, deleteByOrderId, submitWebScanOrder} from "@/api/warehouse/order";
import ioErrorOrder from "@/views/warehouse/ioErrorOrder";
import addOrder from "@/views/warehouse/addOrder";

export default {
    data() {
        return {
            filterQuery: {
                id: null,
                mainAction: null,
                action: null,
                status: -1,
                customerId: this.$store.getters.customerId,
                page: 1,
                limit: 20
            },
            loading: false,
            list: [],
            total: 0,
            storageList: [],
            busTypes: [],
            formMap: {
                add: "新增单据",
                update: "编辑单据",
            },
            formName: null,
            addOrderVisible: false,
            idQuery: {
                id: "",
                corpOrderId: null,
                billType: null,
                locStorageCode: null,
                actDate: null,
                fromCorp: null,
            },
            orderStatus: {
                '-1': "草稿",
                1: "等待处理",
                3: "校验失败",
                4: "已校验",
            },
        };
    },
    components: {
        ioErrorOrder,
        addOrder
    },
    methods: {
        onReset() {
            this.$router.push({
                path: ""
            });
            this.filterQuery = {
                id: null,
                mainAction: null,
                action: null,
                status: -1,
                customerId: this.$store.getters.customerId,
                page: 1,
                limit: 20
            };
            this.getList();
        },
        search() {
            this.filterQuery.page = 1;
            this.getList();
        },
        getList() {
            filterOrder(this.filterQuery).then((res) => {
                if (res.code === 20000) {
                    this.list = res.data.list || [];
                    this.total = res.data.total || 0;
                }
            })
        },
        cancelDialog() {
        },
        handleModifyClick(row) {
            this.formName = 'edit';
            this.addOrderVisible = true;
            this.idQuery = {
                id: row.orderId,
                corpOrderId: row.corpOrderId,
                billType: row.action,
                locStorageCode: row.locStorageCode,
                fromCorp: row.fromCorp,
                actDate: row.actDate
            };
        },
        addOrders() {
            this.addOrderVisible = true;
            this.formName = "add";
            this.idQuery = {};
        },
        closeDialog() {
            this.addOrderVisible = false;
            this.getList();
        },
        deleteDialog(row) {
            this.$confirm("此操作将删除单据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.loading = true;
                let params = {id: row.orderId};
                deleteByOrderId(params).then((res) => {
                    if (res.code === 20000) {
                        this.$message.success("删除成功");
                        this.getList();
                    }
                })
            }).catch(() => {
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
        getBusType() {
            let params = {customerId: this.$store.getters.customerId};
            getBussinessType(params).then((res) => {
                this.busTypes = res.data.list;
            })
        },
        submitOrder(row) {
            let params = {
                orderId: row.orderId
            };
            submitWebScanOrder(params).then((res) => {
                if (res.code === 20000) {
                    this.$message.success(res.data.message);
                    this.getList();
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
    },
    mounted() {
    },
    created() {
        this.getBusType();
        this.getList();
    }
};
</script>

<style>

</style>
