<template>
    <div>
        <el-card class="el-card">
            <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"
                                       @change="invChange"
                                       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 class="query-form-item">
                            <el-select v-model="filterQuery.invWarehouseCode" placeholder="请选择当前分库" clearable="true"
                                       size="mini">
                                <el-option
                                    v-for="item in subInvList"
                                    :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="onSubmit"
                                >查询
                                </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="mergesOrders">合并单据</el-button>
                                <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%"
                      @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="action">
                    <template slot-scope="scope">
                        <span>{{ getActionName(scope.row.action) }}</span>
                    </template>
                </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="locStorageCode" width="120">
                    <template slot-scope="scope">
                        <span>{{ getStorageName(scope.row.locStorageCode) }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="当前分库" prop="invWarehouseCode" width="120">
                    <template slot-scope="scope">
                        <span>{{ getSubStorageName(scope.row.invWarehouseCode) }}</span>
                    </template>
                </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-dialog title="错误信息" :visible.sync="dialogVisible" width="30%">
                <span>{{ errorDetail }}</span>
                <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
        >关 闭</el-button
        >
      </span>
            </el-dialog>
            <el-dialog
                title="选择往来单位"
                :visible.sync="dialogTableVisible"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                width="70%"
            >
                <el-form :inline="true" :model="unitquery" class="query-form" size="mini">
                    <el-form-item class="query-form-item">
                        <el-input v-model="unitquery.key" placeholder="搜索"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="search"
                            @click.native.stop="getUnitList()"
                        >查询
                        </el-button
                        >
                    </el-form-item>
                </el-form>

                <el-table
                    v-loading="loading"
                    :data="unitlist"
                    style="width: 100%"
                    @row-click="selectUnit"
                >
                    <el-table-column
                        label="往来单位ID"
                        prop="erpId"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="往来单位名称"
                        prop="name"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="往来单位简写"
                        prop="spell"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="地址"
                        prop="addr"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column label="状态" prop="status"></el-table-column>
                    <el-table-column label="类型" prop="type"></el-table-column>
                </el-table>
            </el-dialog>


            <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="新增订单"
                :visible.sync="addOrderVisible"
                width="75%" 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>


            <el-dialog
                title="单号详情"
                :visible.sync="codeDetailVisible"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                width="80%"
                v-if="codeDetailVisible"
            >
                <codeDetail
                    :idQuery="idQuery"
                    v-on:closeDetailDialog="closeDetailDialog"
                ></codeDetail>
            </el-dialog>
            <el-pagination
                :page-size="filterQuery.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    orderListError,
    codeList,
    filterOrder,
    deleteByOrderId,
    commitOrder,
    updateUnit, mergeOrder,
} from "../../api/inout/order";
import {getBasicUnitMaintains} from "../../api/basic/basicUnitMaintain"
import draggable from "vuedraggable";
import codeDetail from "./errorCode";

import ioErrorOrder from "./IOErrorOrder";
import addOrder from "./IOAddOrder";
import store from "../../store";
import {getBussinessType} from "../../api/basic/bussinessType";
import {filterAllByUser} from "@/api/basic/invWarehouse";
import {getLocalJoinByUser} from "@/api/basic/busLocalType";
import {filterSubByInv} from "@/api/basic/invSubWarehouse";

const formJson = {
    site_id: "",
    site_name: "",
    describe: "",
    ads: [],
};

export default {
    data() {
        return {
            filterQuery: {
                id: "",
                mainAction: null,
                action: null,
                page: 1,
                status: 10,
                limit: 10,
                locStorageCode: this.$store.getters.locInvCode,
                invWarehouseCode: this.$store.getters.locSubInvCode,
            },
            checkStatus: {
                '-1': "草稿",
                // 1: "等待处理",
                1: "等待处理",
                2: "等待校验",
                3: "校验异常",
                4: "校验成功",
            },
            curIndex: "",
            unitquery: {key: "", page: 1, limit: 20},
            unitlist: [],
            multipleSelection: [],
            unitUpdateQuery: {
                id: "",
                fromCorpId: "",
                fromCorp: "",
            },
            idQuery: {
                id: "",
            },
            storageList: [],
            subInvList: [],
            errOrderVisible: false,
            list: [],
            adId: [],
            adSelectList: [],
            adList: {},
            adListNoDataText: "无数据",
            queryAdIdAsyncLoading: false,
            codeDetailVisible: false,
            addOrderVisible: false,
            total: 0,
            loading: false,
            index: null,
            formName: null,
            errorDetail: "1111111111111",
            formMap: {
                add: "新增",
                edit: "编辑",
            },
            fromTypeMap: {
                "1": "UDIMS平台",
                "2": "网页新增",
                "3": "pda即时校验",
                "4": "pda未校验",
                "5": "pc端扫码精灵",
                "6": "缺量补录单据",
                "7": "UDI供应商平台",
                "8": "平衡补录单据",
            },
            deleteData: {
                id: "",
            },
            dialogTableVisible: false,
            formLoading: false,
            dialogVisible: false,
            formData: formJson,
            deleteLoading: false,
            busTypes: [],
        };
    },
    components: {
        draggable,
        codeDetail,
        addOrder,
        ioErrorOrder
    },
    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                status: 10,
                page: 1,
                limit: 10,
            };
            this.getList();
        },
        onSubmit() {
            this.loading = true;
            this.getList();
        },
        handleSizeChange(val) {
            this.filterQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
        handleUnitClick(row) {
            this.curIndex = row.id;
            this.dialogTableVisible = true;
        },
        closeDetailDialog(val) {
            this.codeDetailVisible = false;
        },
        getActionName(action) {
            for (let i = 0; i < this.busTypes.length; i++) {
                if (this.busTypes[i].action === action) {
                    return this.busTypes[i].name;
                }
            }
        },
        getBusType() {
            let query = {
                enabled: true,
            };
            getLocalJoinByUser(query)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                    this.filterQuery.billAction = this.busTypes[0].action;
                    // this.getList();
                })
                .catch(() => {
                });
        },
        getStorage() {
            this.storageList = [];
            filterAllByUser()
                .then((response) => {
                    this.storageList = response.data || [];
                    if (this.storageList.length > 0) {
                        this.invChange();
                        this.getList();
                    }
                })
                .catch(() => {
                });
        },
        getStorageName(code) {
            for (let i = 0; i < this.storageList.length; i++) {
                if (this.storageList[i].code === code) {
                    return this.storageList[i].name;
                }
            }
        },
        getSubStorageName(code) {
            for (let i = 0; i < this.subInvList.length; i++) {
                if (this.subInvList[i].code === code) {
                    return this.subInvList[i].name;
                }
            }
        },
        addOrders(row) {
            console.log(row)
            this.idQuery.id = '';
            this.idQuery.actDate = '';
            this.idQuery.corpOrderId = '';

            this.idQuery.outChangeEnable = row.outChangeEnable;
            if (row.id !== null && row.id !== undefined && row.id !== '') {
                this.idQuery.id = row.id;
                this.idQuery.actDate = row.actDate;
                this.idQuery.corpOrderId = row.corpOrderId;
                this.idQuery.billType = row.action;
                this.idQuery.locStorageCode = row.locStorageCode;
                this.idQuery.invWarehouseCode = row.invWarehouseCode;
                this.idQuery.fromSubInvCode = row.fromSubInvCode;


                this.idQuery.preCheck = row.preCheck;
            }
            this.addOrderVisible = true;
            this.idQuery.action = row.action;
            this.idQuery.fromCorp = row.fromCorp;
            this.idQuery.fromCorpId = row.fromCorpId;
            this.idQuery.preCheck = row.preCheck;
        },
        errOrders() {
            this.errOrderVisible = true;
        },
        closeDialog() {
            this.addOrderVisible = false;
            this.addHosOrderVisible = false;
            this.getList();
        },
        getUnitList() {
            this.loading = true;
            getBasicUnitMaintains(this.unitquery)
                .then((response) => {
                    this.loading = false;
                    this.unitlist = response.data.list || [];
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
        },
        selectUnit(row) {
            console.log(row.id);
            this.unitUpdateQuery.id = this.curIndex;
            this.unitUpdateQuery.fromCorp = row.name;
            this.unitUpdateQuery.fromCorpId = row.unitid;
            updateUnit(this.unitUpdateQuery)
                .then((response) => {
                    this.dialogTableVisible = false;
                    this.getList();
                })
                .catch(() => {
                    this.dialogTableVisible = false;
                });
        },
        //获取订单列表
        getList() {
            this.loading = true;
            // this.filterQuery.status = -1;
            this.filterQuery.customerId = store.getters.customerId;
            // this.filterQuery.status = 1;
            // this.filterQuery.statusOrOne = -1;
            filterOrder(this.filterQuery)
                .then((response) => {
                    console.log(response)
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        mergesOrders() {
            let repeatData = this.multipleSelection;
            if (repeatData.length <= 1) {
                this.$message.warning("未选择单据！");
                return;
            }
            let orderid = repeatData[0].id;
            let unit = repeatData[0].fromCorp;
            let action = repeatData[0].action;
            let orderList = [];
            repeatData.forEach((obj, index) => {
                if (unit !== obj.fromCorp) {
                    this.$message.warning("往来单位不一致！");
                    return;
                }
                if (action !== obj.action) {
                    this.$message.warning("业务类型不一致！");
                    return;
                }
                orderList.push(obj.id);
            });
            let tquery = {
                orderList: orderList,
                type: 2,
            };

            this.$confirm(
                "所选择的订单将会合并到订单号为" + orderid + "的订单下",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    mergeOrder(tquery).then((response) => {
                        if (response.code === 20000) {
                            this.getList();
                            this.$message({
                                type: "success",
                                message: "合并成功",
                            });
                        } else {
                            this.$message.error(response.message);
                        }
                    });
                })
                .catch(() => {
                });
        },
        deleteOrders(data) {
            this.loading = true;
            this.deleteData.id = data;
            deleteByOrderId(this.deleteData)
                .then((response) => {
                    this.getList();
                    this.$message({
                        type: "success",
                        message: "删除成功！",
                    });
                })
                .catch(() => {
                });
        },

        deleteDialog(rowId) {
            this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteOrders(rowId);
                })
                .catch(() => {
                });
        },

        onUpload(data) {
            this.loading = true;
            var idQuery = {
                orderId: "",
            };
            idQuery.orderId = data;
            commitOrder(idQuery)
                .then((response) => {
                    if (response.code == 20000) {
                        this.$message.success(response.data);
                        this.getList();
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                });
        },

        handleErrorDetail(poistion) {
            var mOrder = this.list[poistion];
            var corpOrderId = mOrder.remark;

            this.errorDetail = mOrder.remark;
            console.log(corpOrderId + "  " + mOrder + "  " + mOrder.remark);
            this.dialogVisible = true;
        },

        intentDetail(row) {
            this.codeDetailVisible = true;
            this.idQuery.id = row.id;

        },
        invChange() {
            this.subInvList = [];
            this.filterQuery.invWarehouseCode = "";
            let query = {
                pcode: this.filterQuery.locStorageCode
            };
            filterSubByInv(query)
                .then((response) => {
                    this.subInvList = response.data || [];
                })
                .catch(() => {
                });
        },
        init() {
            axios.get("./config.json").then(res => {
                // 基础地址
                let response = res.data.BASE_URL;
                this.uploadFileUrl = response + "/udiwms/orders/file/upload";
            });
        },
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                false: "success",
                true: "warning",
            };
            return statusMap[status];
        },
    },
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
    },
    created() {
        this.getStorage();
        this.getBusType();
        let query = this.$route.query;
        this.filterQuery = Object.assign(this.filterQuery, query);
        this.filterQuery.limit = parseInt(this.filterQuery.limit);

    },
};
</script>

<style type="text/scss" lang="scss">
</style>
