<template>
    <div>
        <el-card class="el-card" style="margin-top: -15px">
            <div>
                <el-form :inline="true" :model="listQuery" style="display: flex;" size="mini">
                    <el-row>
                        <el-form-item class="query-form-item">
                            <el-input
                                v-model="listQuery.billNo"
                                placeholder="单据号"
                                clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item class="query-form-item">
                            <el-input
                                v-model="listQuery.corpName"
                                placeholder="往来单位"
                                clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item class="query-form-item">

                            <el-select v-model="listQuery.billAction" placeholder="请选择第三方系统单据类型" clearable="true">
                                <el-option
                                    v-for="item in originTypes"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.action">
                                    <span style="float: left;font-size: 13px">{{ item.name }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px;margin-left: 10px">{{
                                            item.thirdSysName
                                        }}</span>
                                </el-option>

                            </el-select>


                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item class="query-form-item">
                        <span style="color: #000; margin-left: 10px; margin-right: 6px"
                        >单据日期:</span
                        >
                            <el-date-picker
                                :picker-options="pickerOptions"
                                v-model="actDateRange"
                                type="daterange"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item style="display: flex">
                            <el-button-group>
                                <el-button
                                    type="primary"
                                    icon="el-icon-refresh"
                                    @click="onReset"
                                ></el-button>
                                <el-button type="primary" icon="search" @click="submitFind">查询</el-button>
                                <el-button type="primary" icon="search" @click="combine"
                                >确定
                                </el-button
                                >
                            </el-button-group>
                        </el-form-item>
                    </el-row>

                </el-form>
                <el-table
                    :data="dataList"
                    style="width: 100%"
                    highlight-current-row="true"
                    v-loading="loading"
                    :row-class-name="tableRowClassName"
                    @current-change="handleChange"
                >
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="单据号" prop="billNo"></el-table-column>
                    <el-table-column label="往来单位" prop="corpName" width="300"
                                     show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="单据类型" prop="billType"></el-table-column>
                    <el-table-column label="单据状态" prop="billFlag" width="80"></el-table-column>
                    <el-table-column label="单据日期" prop="billdate"></el-table-column>
                </el-table>
                <el-pagination
                    :page-size="listQuery.limit"
                    @current-change="handleErpPageChange"
                    layout="prev, pager, next"
                    :total="pageTotal"
                    :current-page="listQuery.page"
                ></el-pagination>
            </div>
        </el-card>


        <el-card class="el-card">
            <el-table v-loading="loading" :data="detailList" style="width: 100%">
                <el-table-column label="序号" type="index" width="120"></el-table-column>
                <el-table-column label="产品编码" prop="productId"></el-table-column>
                <el-table-column label="产品通用名" prop="productName" show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="规格型号" prop="spec" show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="批次号" prop="batchNo"></el-table-column>
                <el-table-column label="生产日期" prop="productDate"></el-table-column>
                <el-table-column label="失效日期" prop="expireDate"></el-table-column>
                <el-table-column label="单据数量" prop="count"></el-table-column>
            </el-table>
        </el-card>

        <el-dialog
            v-if="storageVisible"
            title="请选择单据所属仓库信息"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            append-to-body
            :visible.sync="storageVisible">

            <selectInvDialog
                :closeInvDialog="closeInvDialog"
                :billData="currentRow"
                :closeSubmitDialog="closeSubmitDialog"
            ></selectInvDialog>

        </el-dialog>
    </div>
</template>

<script>
import {addStockOrder, getCloudErp} from "../../api/inout/erpOrder";
import {getLocalJoinBusType} from "../../api/basic/busLocalType";
import store from "../../store";
import {getOriginBusType} from "@/api/basic/busOriginType";
import {filterAllByUser} from "@/api/basic/invWarehouse";

import selectInvDialog from "../inout/DialogSelectInv";

export default {
    name: "closeDialog",
    props: {
        data: {
            type: Object,
            required: true,
        },
        closeDialog: {
            type: Function,
            required: true,
        },
    },

    data() {
        return {
            listQuery: {
                billNo: "",
                thirdSysFk: "",
                billAction: null,
                originType: null,
                page: 1,
                limit: 10,
                allocateStatus: 0,
                type: 0,
                customerId: null,
            },
            detailList: [],
            combineQuery: {
                thirdId: "",
                relId: "",
                erpName: "",
                keys: [],
            },
            storageVisible: false,
            dataList: [],
            pageTotal: 1,
            total: 1,
            currentRow: null,
            curLocInv: null,
            loading: false,
            multipleUdiSelection: [],
            thirdSys: [],
            thirdSysFk: null,
            busTypes: [],
            originTypes: [],
            storageList: [],
            actDateRange: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
        };
    },
    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.listQuery = {
                billNo: "",
                corpName: null,
                billAction: null,
                page: 1,
                limit: 10,
                allocateStatus: 0,
            };
            this.actDateRange = [];
            this.getList();
        },

        tableRowClassName({row}) {
            if (row.checked) return "warning-row";
            return "";
        },
        checkSelectable(row) {
            return !row.check;
        },
        handleCurrentChange(val) {
            this.unionQuery.page = val;
            this.getList();
        },
        handleChange(val) {
            console.log(val);
            this.currentRow = val;
            this.detailList = val.subErpOrders;
        },
        handleErpPageChange(val) {
            this.listQuery.page = val;
            this.getList();
        },
        keyup_submit(event) {
            this.getList();
            event.target.select();
        },
        getList() {
            this.loading = true;
            if (this.actDateRange !== null) {
                this.listQuery.startDate = this.actDateRange[0];
                this.listQuery.endDate = this.actDateRange[1];
            } else {
                this.listQuery.startDate = null;
                this.listQuery.endDate = null;
            }
            this.listQuery.customerId = store.getters.customerId;
            getCloudErp(this.listQuery)
                .then((response) => {
                    console.log(response)
                    this.loading = false;
                    if (response.code === 20000) {
                        this.dataList = response.data.list || [];
                        this.pageTotal = response.data.total || 0;
                    } else {
                        this.$message.error(response.message);
                        this.dataList = [];
                        this.pageTotal = 0;
                    }
                })
                .catch(() => {
                    this.loading = false;
                    this.dataList = [];
                    this.pageTotal = 0;
                });
        },
        intentBack() {
            this.closeDialog();
        },
        combine() {
            if (this.$isBlank(this.currentRow.id)) {
                return;
            }
            this.curLocInv = this.currentRow.locStorageCode;
            if (this.$isBlank(this.curLocInv)) {
                this.storageVisible = true;
            } else {
                let tQuery = {
                    id: this.currentRow.id,
                    locStorageCode: this.curLocInv,
                    invWarehouseCode: this.currentRow.invWarehouseCode,
                }
                addStockOrder(tQuery)
                    .then((response) => {
                        if (response.code === 20000) {
                            this.closeDialog();
                        } else {
                            this.$message.error(response.message);
                        }
                    })
                    .catch(() => {
                    });
            }
        },
        submitFind() {
            this.listQuery.page = 1;
            this.getList();
        },
        selectStorage(row) {
            this.curLocInv = row.code;
            let tQuery = {
                id: this.currentRow.id,
                locStorageCode: this.curLocInv,
            }
            addStockOrder(tQuery)
                .then((response) => {
                    if (response.code === 20000) {
                        this.storageVisible = false;
                        this.closeDialog();
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                });
        },

        handleSelectionUdiChange(val) {
            console.log("----" + val);
            this.multipleUdiSelection = val;
        },
        getBusType() {
            let query = {
                enabled: true,
            };
            getLocalJoinBusType(query)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                })
                .catch(() => {
                });
            getOriginBusType(query)
                .then((response) => {
                    this.originTypes = response.data.list || [];
                })
                .catch(() => {
                });
        },
        getStorage(event) {
            this.storageList = [];
            filterAllByUser()
                .then((response) => {
                    this.storageList = response.data || [];
                    if (this.storageList.length == 1) {
                        this.curLocInv = this.storageList[0].code;
                    }
                })
                .catch(() => {
                });
        },


        closeInvDialog() {
            this.storageVisible = false;
        },

        closeSubmitDialog() {
            this.storageVisible = false;
            this.combine();
        },
    },
    created() {
        this.getBusType();
        this.getStorage();
        this.getList();
    },
    components: {selectInvDialog}

};
</script>

<style scoped>

div /deep/ .el-table .warning-row {
    background: #bebebe;
}

div /deep/ .el-table .success-row {
    background: #ffffff;
}
</style>
