<template>
    <div>
        <el-card class="el-card">
            <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
                <el-row>
                    <el-form-item class="query-form-item">
                        <el-input v-model="filterQuery.billNo" placeholder="单据号"></el-input>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.billAction" placeholder="业务类型">
                            <el-option label="采购入库" value="PurchaseWareHouseIn"></el-option>
                            <el-option label="销售出库" value="SalesWareHouseOut"></el-option>
                            <el-option label="退货出库" value="ReturnWareHouseOut"></el-option>
                            <el-option label="退货入库" value="ReturnWareHouseIn"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.billFlag" placeholder="单据状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已签字" value="1"></el-option>
                            <el-option label="未签字" value="0"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.isLocal" placeholder="单据位置">
                            <el-option label="本地单据" value="1"></el-option>
                            <el-option label="第三方单据" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <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>
                        <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
                              type="primary"
                              icon="search"
                              @click="importOrder"
                              :loading="mipsLoading"
                              >导入erp业务单据</el-button
                            > -->
                        </el-button-group>
                    </el-form-item>
                </el-row>
            </el-form>

            <el-table
                v-loading="loading"
                :data="list"
                @selection-change="handleSelectionChange"
                @row-click="getOrderDetail"
                style="width: 100%"
            >
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="订单ID" prop="billNo"></el-table-column>
                <el-table-column
                    label="客户ID"
                    prop="corpId"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    label="客户名称"
                    prop="corpName"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="订单日期"
                    prop="billdate"
                    show-overflow-tooltip
                ></el-table-column>

                <el-table-column label="业务类型" prop="billType"></el-table-column>
            </el-table>
            <el-dialog
                title="选择业务单据"
                :visible.sync="addDialogVisible"
                width="80%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                v-if="addDialogVisible"
            >
                <selectErpOrder v-on:closeManuDialog="closeManuDialog"></selectErpOrder>
            </el-dialog>

            <el-pagination
                :page-size="filterQuery.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
                :current-page="filterQuery.page"
            ></el-pagination>
        </el-card>
        <el-card class="el-card">
            <el-table v-loading="detailLoading" :data="detailList" style="width: 100%">
                <el-table-column label="序号" type="index"></el-table-column>

                <el-table-column
                    label="货品ID"
                    prop="productId"
                    :show-overflow-tooltip="true"
                ></el-table-column>

                <el-table-column
                    label="货品名称"
                    prop="productName"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    label="批号"
                    prop="batchNo"
                    :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="reCount"></el-table-column>
                <el-table-column label="实际数量" prop="count">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    import {deleteErpOrder, getCloudErp} from "../../api/inout/erpOrder";
    import selectErpOrder from "./DialogSelectErpOrder";

    export default {
        data() {
            return {
                filterQuery: {
                    billNo: "",
                    billFlag: null,
                    billAction: "PurchaseWareHouseIn",
                    startDate: null,
                    endDate: null,
                    page: 1,
                    limit: 5,
                    isLocal:null,
                },
                value: "",
                total: 0,

                list: [],
                loading: false,
                addDialogVisible: false,

                detailLoading: false,
                detailList: [],
                idQuery: {
                    id: "",
                },
                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]);
                            },
                        },
                    ],
                },
                multipleSelection: [],
            };
        },

        methods: {
            onReset() {
                this.$router.push({
                    path: "",
                });
                this.filterQuery = {
                    billNo: "",
                    billFlag: null,
                    billAction: "PurchaseWareHouseIn",
                    startDate: null,
                    endDate: null,
                    page: 1,
                    limit: 5,
                    isLocal:null,
                };
                this.actDateRange = [];
                this.getList();
            },

            closeDetailDialog(val) {
                this.codeDetailVisible = false;
            },
            onSubmit() {
                if (this.actDateRange != null) {
                    this.filterQuery.startDate = this.actDateRange[0];
                    this.filterQuery.endDate = this.actDateRange[1];
                } else {
                    this.filterQuery.startDate = null;
                    this.filterQuery.endDate = null;
                }
                this.getList();
            },
            getList() {
                this.loading = true;
                getCloudErp(this.filterQuery)
                    .then((response) => {
                        this.loading = false;
                        if (response.code == 20000) {
                            this.list = response.data.list || [];
                            this.total = response.data.total || 0;
                        } else {
                            this.list =  [];
                            this.total =  0;
                            this.$message.error(response.message);
                        }
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.total = 0;
                    });
            },
            //业务明细表
            getOrderDetail(row) {

                this.detailList = row.subErpOrders;
            },
            closeManuDialog(val) {
                this.addDialogVisible = false;
                if (val) {
                    this.$message.success("后台已开始下载，请稍后刷新查看！");
                    this.getList();
                } else {
                    this.$message.error("添加失败！");
                }
            },
            cancelDialog() {
                this.addDialogVisible = false;
            },
            importOrder() {
                this.addDialogVisible = true;
            },

            handleSizeChange(val) {
                this.filterQuery.limit = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.filterQuery.page = val;
                this.getList();
            },
            handleSelectionChange(val) {
                console.log(val);
                this.multipleSelection = val;
            },
            deleteOrders(data) {
                this.loading = true;
                let tquery = {
                    id: data.docid + "",
                };

                deleteErpOrder(tquery)
                    .then((response) => {
                        this.detailList = [];
                        this.getList();
                        this.$message({
                            type: "success",
                            message: "删除成功！",
                        });
                    })
                    .catch(() => {
                    });
            },
            deleteDialog(rowId) {
                this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.deleteOrders(rowId);
                    })
                    .catch(() => {
                    });
            },
        },
        components: {selectErpOrder},
        mounted() {
        },
        created() {
            let end = new Date();
            let start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            this.actDateRange = [start, end];
            this.getList();
        },
    };
</script>
