<template>
    <div>
        <el-card class="el-card">
            <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="请选择业务类型">-->
                            <!--                            <el-option-->
                            <!--                                v-for="item in busTypes"-->
                            <!--                                :key="item.localName"-->
                            <!--                                :label="item.localName"-->
                            <!--                                :value="item.action">-->
                            <!--                                <span style="float: left">{{ item.localName }}</span>-->
                            <!--                                &lt;!&ndash;<span style="float: right; color: #8492a6; font-size: 13px">{{ item.action }}</span>&ndash;&gt;-->
                            <!--                            </el-option>-->
                            <!--                        </el-select>-->

                            <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-form-item class="query-form-item">-->
                        <!--                            <el-select v-model="listQuery.thirdSys" placeholder="请选择第三方系统" @change="thirdSysChange">-->
                        <!--                                <el-option-->
                        <!--                                    v-for="item in thirdSys"-->
                        <!--                                    :key="item.value"-->
                        <!--                                    :label="item.thirdName"-->
                        <!--                                    :value="item.thirdId">-->
                        <!--                                    <span style="float: left">{{ item.thirdName }}</span>-->
                        <!--                                    <span style="float: right; color: #8492a6; font-size: 13px">{{-->
                        <!--                                            item.thirdId-->
                        <!--                                        }}</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="search" @click="getList">查询</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"
                ></el-pagination>
            </div>
        </el-card>


        <el-dialog
            v-if="storageVisible"
            title="请选择当前仓库"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            append-to-body
            :visible.sync="storageVisible">

            <el-table
                :data="storageList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                highlight-current-row>

                <el-table-column
                    prop="code"
                    label="仓库编码"
                    width="120"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="仓库名称"
                    width="250"
                >
                </el-table-column>


                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">

                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="selectStorage(scope.row)"
                        >选择
                        </el-button
                        >
                    </template>

                </el-table-column>
            </el-table>

        </el-dialog>

    </div>
</template>

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

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,
                customerId: null,
            },
            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: {
        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;
        },
        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,
                }
                addStockOrder(tQuery)
                    .then((response) => {
                        if (response.code === 20000) {
                            this.closeDialog();
                        } else {
                            this.$message.error(response.message);
                        }
                    })
                    .catch(() => {
                    });
            }
        },
        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 || [];
                    // this.listQuery.billAction = this.busTypes[0].action;
                })
                .catch(() => {
                });
            getOriginBusType(query)
                .then((response) => {
                    this.originTypes = response.data.list || [];
                    // this.listQuery.billAction = this.originTypes[0].action;
                    // this.getList();
                })
                .catch(() => {
                });
        },
        getStorage(event) {
            this.storageList = [];
            filterAllByUser()
                .then((response) => {
                    this.storageList = response.data || [];
                    if (this.storageList.length == 1) {
                        this.curLocInv = this.storageList[0].code;
                    }
                })
                .catch(() => {
                });
        },
    },
    created() {
        this.getBusType();
        this.getStorage();
    },
};
</script>

<style scoped>

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

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