<template>
    <div>
        <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="单据号" clearable></el-input>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-input v-model="filterQuery.thirdBillNo" placeholder="第三方单据号" clearable></el-input>
                    </el-form-item>

                    <el-form-item class="query-form-item">
                        <el-date-picker
                            v-model="filterQuery.submitTime"
                            type="date"
                            placeholder="请选择提交时间"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.status" placeholder="处理状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="提交成功" value="2"></el-option>
                            <el-option label="提交失败" value="3"></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-form-item>
                </el-row>
            </el-form>
            <el-table
                v-loading="loading"
                :data="list"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column
                    label="单据号"
                    prop="billNo"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    label="第三方单据号"
                    prop="thrBillNo"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="单据类型"
                    prop="billType"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    label="单据日期"
                    prop="billDate"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="提交时间"
                    prop="submitTime"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="提交状态"
                    prop="status"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <el-tag :type="(scope.row.status ) | statusFilterType">{{
                                statusMap[scope.row.status]
                            }}
                        </el-tag>
                    </template>


                </el-table-column>
                <el-table-column
                    label="结果信息"
                    prop="result"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="160">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="showResultInfo(scope.row)"
                        >详情
                        </el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="deleteLog(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-card>
        <el-dialog
            title="结果详情"
            width="35%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="submitResultVisible"
        >
            <span v-text="resultInfo" style="white-space:pre-line;" class="resultInfo"></span>
        </el-dialog>
    </div>
</template>

<script>
import {stockOrderUploadLogList, deleteUploadLog} from "@/api/inout/stockOrderUploadLog";

export default {
    data() {
        return {
            filterQuery: {
                billNo: null,
                thirdBillNo: null,
                submitTime: null,
                status: null,
                fromType: 1,
                page: 1,
                limit: 20,
            },
            list: [],
            total: 0,
            statusMap: {
                0: "未提交",
                1: "正在提交",
                2: "提交成功",
                3: "提交失败"
            },
            busTypes: [],
            loading: false,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            submitResultVisible: false,
            resultInfo: null        //结果信息
        };
    },

    methods: {
        onReset() {
            this.filterQuery = {
                fromType: 1,
                genKey: null,
                status: null,
                page: 1,
                limit: 20,
                thirdSysFk: null,
            };
            this.getList();
        },
        search() {
            this.filterQuery.page = 1;
            this.getList();
        },
        getList() {
            this.loading = true;
            stockOrderUploadLogList(this.filterQuery).then((res) => {
                this.loading = false;
                if (res.code === 20000) {
                    this.list = res.data.list || [];
                    this.total = res.data.total || 0;
                } else {
                    this.$message.error(res.message);
                    this.list = [];
                    this.total = 0;
                }
            }).catch((error) => {
                this.loading = false;
                this.list = [];
            })
        },
        deleteLog(id) {
            this.$confirm('是否确认删除提交记录？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {id: id};
                deleteUploadLog(params).then((res) => {
                    if (res.code === 20000) {
                        this.$message.success("删除成功");
                        this.getList();
                    }
                }).catch((error) => {
                    this.$message.error("删除失败");
                })
            }).catch(() => {
                this.$message.info("已取消删除");
            })
        },
        getStatusInfo(status) {
            return this.statusMap[status];
        },
        getBusType() {
            let query = {
                enabled: true,
            };
            getLocalJoinByUser(query)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                    this.filterQuery.billAction = this.busTypes[0].action;
                })
                .catch(() => {
                });
        },
        showResultInfo(row) {
            this.resultInfo = row.result;
            this.submitResultVisible = true;
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                2: "success",
                3: "danger",
            };
            return statusMap[status];
        },
    },
    mounted() {
    },
    created() {
        this.getList();
    },
};
</script>
<style>
.itemTag {
    float: left;
    text-align: left;
    margin-top: 10px;
    width: 100px;
}

.text {
    font-size: 13px;
    font-family: "Microsoft YaHei";
}

.el-row {
    display: flex;
    flex-wrap: wrap;

}

.el-col {
    border-radius: 4px;
    flex-wrap: wrap;
}

.resultInfo {
    font-size: medium;
    font-family: "Microsoft YaHei";
    line-height: 25px;
}
</style>
