<template>
    <el-card>

        <el-descriptions class="margin-top" title="单据上传设置" :column="1" :size="100" border>
            <template slot="extra">
                <el-button type="primary" size="small" @click="saveConfig()">保存</el-button>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    自动上传设置
                </template>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="6" class="el-col">

                        <el-switch
                            v-model="configQuery.autoUpload"
                            active-text="是否启用自动上传">
                        </el-switch>

                    </el-col>
                    <el-col :span="14" class="el-col">
                        <div>
                            <span style="color: red;">说明:&nbsp;修改同步参数时,请关闭数据同步服务 </span>
                        </div>
                    </el-col>

                </el-row>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    参数设置
                </template>

                <el-row :gutter="20" class="el-row" type="flex">

                    <el-col :span="20" class="el-col">
                        <div>
                            <span>单据上传时间间隔(单位:分钟):&nbsp;</span>
                            <el-input
                                style="width: 100px"
                                size="small"
                                type="number" min="10"
                                v-model="configQuery.orderSyncTime" :disabled="configQuery.autoUpload"
                                splaceholder="请输入内容"
                            ></el-input>

                        </div>
                    </el-col>
                </el-row>

            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" title="上传至第三方系统" :column="1" :size="100" style="margin-top: 40px"
                         border>

            <el-descriptions-item>
                <template slot="label">
                    单据时间
                </template>

                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="20" class="el-col">
                        <div>
                            <span>上传起始时间:&nbsp;</span>
                            <el-date-picker
                                type="date"
                                v-model="configQuery.orderStartTime"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                :disabled="configQuery.autoUpload"
                                placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </el-col>
                </el-row>
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    单据(单据状态)
                </template>
                <el-checkbox v-model="configQuery.orderUnCheck" :disabled="configQuery.autoUpload">待校验单据
                </el-checkbox>
                <el-checkbox v-model="configQuery.orderUnReceive" :disabled="configQuery.autoUpload">未验收单据
                </el-checkbox>
                <el-checkbox v-model="configQuery.orderScanFinish" :disabled="configQuery.autoUpload">已完成单据
                </el-checkbox>
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    单据来源
                </template>
                <el-checkbox v-model="configQuery.checkWebNew">web端新增单据
                </el-checkbox>
                <el-checkbox v-model="configQuery.checkPdaUn">手持终端未校验单据
                </el-checkbox>
                <el-checkbox v-model="configQuery.checkPdaEd">手持终端已校验单据
                </el-checkbox>
                <el-checkbox v-model="configQuery.checkUdims">UDIMS平台
                </el-checkbox>
                <el-checkbox v-model="configQuery.checkPc">UDI扫码通</el-checkbox>
                <el-checkbox v-model="configQuery.checkSp">自助平台同步</el-checkbox>
                <el-checkbox v-model="configQuery.checkChange">缺量补单
                </el-checkbox>
                <el-checkbox v-model="configQuery.checkBalacne">平衡补单
                </el-checkbox>
            </el-descriptions-item>

            <el-descriptions-item label="单据(单据类型)" label-style="width: 150px">

                <div style="float: right;margin-bottom: 10px;margin-right: 25px">
                    <el-button type="primary" size="small"
                               :disabled="configQuery.autoUpload"
                               @click="addBusTypeDialog()">添加扫码单据类型
                    </el-button>
                </div>
                <el-table
                    :data="checkedBusTypes"
                    border
                    style="width: 100%"
                >
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column
                        label="单据类型"
                        prop="name"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="单据类型代码"
                        prop="action"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click.native="remveBus(scope.$index, scope.row)"
                            >移除
                            </el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>

            </el-descriptions-item>

        </el-descriptions>

        <el-dialog
            title="添加扫码单据类型"
            :visible.sync="addBusDialogVisible"
            width="55%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            v-if="addBusDialogVisible"
        >

            <div style="float: right;margin-bottom: 10px;margin-right: 25px">
                <el-button type="primary" size="small" @click="addBusType()">选入</el-button>
            </div>
            <el-table
                :data="busTypes"
                border
                style="width: 100%"
                @selection-change="handleCheckedChange"
            >
                <el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column
                    label="单据类型"
                    prop="name"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="单据类型代码"
                    prop="action"
                    show-overflow-tooltip
                ></el-table-column>
            </el-table>

            <el-pagination
                :page-size="busQuery.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>

        </el-dialog>
    </el-card>
</template>

<script>
import {findConfig, updateConfig} from "@/api/thrsys/thirdUploadSet";
import store from "@/store";
import {getBussinessType} from "@/api/basic/bussinessType";

export default {
    name: "SysUdimsConfig",
    data() {
        return {
            configQuery: {
                id: null,
                typeBus: null,
                typeScan: null,
                typeThird: null,
                basicProducts: null,
                basicCorp: null,
                basicInv: null,
                basicThirdProducts: null,
                basicThirdCorp: null,
                basicThirdInv: null,
                basicThirdBusOrder: null,
                orderScanFinish: null,
                dbDiProducts: null,
                autoUpload: null,
                syncIp: null,
                syncTime: null,
                syncDownloadTime: null,
                orderUnCheck: null,
                orderUnReceive: null,
                sysUser: null,
                orderSyncTime: null,
                orderSyncDlTime: null,
                delaySyncTime: null,
                busTypes: [],
                orderStartTimeL: null,
            },
            checkedBusTypes: [],
            busQuery: {
                page: 1,
                limit: 10,
            },
            busTypes: [],
            multipleSelection: [],
            addBusDialogVisible: false,
            total: 0,
            testLoading: false,
        }
    },
    methods: {
        getConfig() {
            findConfig()
                .then((response) => {
                    this.configQuery = response.data;
                    this.checkedBusTypes = this.configQuery.busTypes;
                    if (this.configQuery.busTypes != null) {
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        saveConfig() {

            this.$confirm('是否确认修改?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
            }).then(() => {
                if (this.checkedBusTypes != null) {
                    this.configQuery.busTypes = this.checkedBusTypes;
                }
                updateConfig(this.configQuery)
                    .then((response) => {
                        this.loading = false;
                        if (response.code == 20000) {
                            this.$message.success("修改成功！");
                            this.getConfig();
                        } else {
                            this.$message.error(response.message);
                        }
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            }).catch(() => {
            });
        },


        handleCheckedChange(val) {
            this.multipleSelection = val;
        },

        getBusType() {
            getBussinessType(this.busQuery)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                    this.total = response.data.total || 0;
                    this.getConfig();
                })
                .catch(() => {
                });
        },

        addBusTypeDialog() {
            this.addBusDialogVisible = true;
            this.multipleSelection = [];
        },

        addBusType() {
            var selectData = this.multipleSelection;
            selectData.forEach((obj) => {
                obj.outChange = false;
                this.checkedBusTypes.push(obj);
            });
            this.addBusDialogVisible = false;
        },

        remveBus(index, row) {
            this.checkedBusTypes.splice(index, 1);
        },
        checkSelectable(row) {
            return !row.isSelect;
        },
        handleCurrentChange(val) {
            this.busQuery.page = val;
            this.getBusType();
        },
    },
    created() {
        this.headers = {
            ADMIN_ID: store.getters.adminId,
            ADMIN_TOKEN: store.getters.token,
        };
        this.getBusType();
    },
}
</script>

<style scoped>

</style>
