<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.downstreamEnable"
                            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: 50%"
                                size="small"
                                v-model="configQuery.syncIp" :disabled="configQuery.downstreamEnable"
                                splaceholder="请输入内容"
                            ></el-input>
                            <el-button type="primary" size="small" @click="testConnect()" style="margin-left: 20px;"
                                       :disabled="configQuery.downstreamEnable"
                                       :loading="testLoading">测试连通
                            </el-button>

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

            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="上传至UDI自助平台基础数据" :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-input
                                style="width: 100px"
                                size="small"
                                type="number"
                                v-model="configQuery.syncTime" :disabled="configQuery.downstreamEnable"
                                splaceholder="请输入内容"
                            ></el-input>
                            <span style="margin-left: 30px;">延时上传(单位:分钟):&nbsp;</span>
                            <el-input
                                style="width: 100px"
                                size="small"
                                type="number"
                                v-model="configQuery.delaySyncTime" :disabled="configQuery.downstreamEnable"
                                splaceholder="请输入内容"
                            ></el-input>

                            <span style="margin-left: 30px;">数据下载时间间隔(单位:分钟):&nbsp;</span>
                            <el-input
                                style="width: 100px"
                                size="small"
                                type="number"
                                v-model="configQuery.syncDownloadTime" :disabled="configQuery.downstreamEnable"
                                splaceholder="请输入内容"
                            ></el-input>
                        </div>
                    </el-col>
                </el-row>

            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    运行参数
                </template>
                <el-checkbox v-model="configQuery.entrustAction" :disabled="configQuery.downstreamEnable">委托验收
                </el-checkbox>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    单据类型
                </template>
                <el-checkbox v-model="configQuery.typeBus" :disabled="configQuery.downstreamEnable">业务单据类型</el-checkbox>
                <el-checkbox v-model="configQuery.typeScan" :disabled="configQuery.downstreamEnable">扫码单据类型
                </el-checkbox>
                <el-checkbox v-model="configQuery.typeThird" :disabled="configQuery.downstreamEnable">第三方单据类型
                </el-checkbox>
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    基础信息
                </template>
                <el-checkbox v-model="configQuery.basicProducts" :disabled="configQuery.downstreamEnable">耗材字典
                </el-checkbox>
                <el-checkbox v-model="configQuery.basicCorp" :disabled="configQuery.downstreamEnable">往来单位字典
                </el-checkbox>
                <el-checkbox v-model="configQuery.basicInv" :disabled="configQuery.downstreamEnable">仓库字典</el-checkbox>
                <el-checkbox v-model="configQuery.sysUser" :disabled="configQuery.downstreamEnable">用户信息</el-checkbox>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    第三方基础信息
                </template>
                <el-checkbox v-model="configQuery.basicThirdProducts" :disabled="configQuery.downstreamEnable">第三方产品信息
                </el-checkbox>
                <el-checkbox v-model="configQuery.basicThirdCorp" :disabled="configQuery.downstreamEnable">第三方往来信息
                </el-checkbox>
                <el-checkbox v-model="configQuery.basicThirdInv" :disabled="configQuery.downstreamEnable">第三方仓库信息
                </el-checkbox>
                <el-checkbox v-model="configQuery.basicThirdBusOrder" :disabled="configQuery.downstreamEnable">第三方业务单据
                </el-checkbox>
            </el-descriptions-item>

            <!--            <el-descriptions-item>-->
            <!--                <template slot="label">-->
            <!--                    国家库DI数据-->
            <!--                </template>-->
            <!--                <el-checkbox v-model="configQuery.dbDiProducts">DI产品信息</el-checkbox>-->
            <!--            </el-descriptions-item>-->

            <el-descriptions-item>
                <template slot="label">
                    首营资质证书
                </template>
                <el-checkbox v-model="configQuery.companyCert" :disabled="configQuery.downstreamEnable">配送企业
                </el-checkbox>
                <el-checkbox v-model="configQuery.manufacturerCert" :disabled="configQuery.downstreamEnable">生产企业
                </el-checkbox>
                <el-checkbox v-model="configQuery.productCert" :disabled="configQuery.downstreamEnable">配送产品
                </el-checkbox>
            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" title="上传至UDI自助平台单据" :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-input
                                style="width: 100px"
                                size="small"
                                type="number"
                                v-model="configQuery.orderSyncTime" :disabled="configQuery.downstreamEnable"
                                splaceholder="请输入内容"
                            ></el-input>

                            <span style="margin-left: 30px;">单据下载时间间隔(单位:分钟):&nbsp;</span>
                            <el-input
                                style="width: 100px"
                                size="small"
                                type="number"
                                v-model="configQuery.orderSyncDlTime" :disabled="configQuery.downstreamEnable"
                                splaceholder="请输入内容"
                            ></el-input>
                        </div>
                    </el-col>
                </el-row>

            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    单据(单据状态)
                </template>
                <el-checkbox v-model="configQuery.orderUnCheck" :disabled="configQuery.downstreamEnable">待校验单据
                </el-checkbox>
                <el-checkbox v-model="configQuery.orderUnReceive" :disabled="configQuery.downstreamEnable">未验收单据
                </el-checkbox>
                <el-checkbox v-model="configQuery.orderScanFinish" :disabled="configQuery.downstreamEnable">已完成单据
                </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.downstreamEnable"
                               @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 width="180" label="允许自动补单">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.outChange">自动补单</el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small" :disabled="configQuery.downstreamEnable"
                                @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"
                :current-page="busQuery.page"
            ></el-pagination>

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

<script>
import {findConfig, testConnect, updateConfig} from "@/api/thrsys/spsSyncStatus";
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,
                downstreamEnable: null,
                syncIp: null,
                syncTime: null,
                syncDownloadTime: null,
                orderUnCheck: null,
                orderUnReceive: null,
                sysUser: null,
                orderSyncTime: null,
                orderSyncDlTime: null,
                delaySyncTime: null,
                busTypes: [],
                companyCert: null,
                manufacturerCert: null,
                productCert: 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) {
                        // for (let i = 0; i < this.configQuery.busTypes.length; i++) {
                        //
                        //     for (let k = 0; k < this.busTypes.length; k++) {
                        //         if (this.busTypes[k].action == this.configQuery.busTypes[i]) {
                        //             this.checkedBusTypes.push(this.busTypes[k]);
                        //             this.busTypes[k].isSelect = true;
                        //         }
                        //     }
                        // }
                    } 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;
                    // for (let i = 0; i < this.checkedBusTypes.length; i++) {
                    //     this.configQuery.busTypes.push(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(() => {
            });
        },

        testConnect() {
            this.testLoading = true;
            testConnect()
                .then((response) => {
                    this.testLoading = false;
                    if (response.code == 20000) {
                        this.$message.success("连接成功");
                    } else {
                        this.$message.error("连接失败！");
                    }
                })
                .catch(() => {
                    this.testLoading = false;
                });


        },

        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;
                let isPut = true;
                for (let i = 0; i < this.checkedBusTypes.length; i++) {
                    if (this.checkedBusTypes[i].action == obj.action) {
                        isPut = false;
                    }
                }
                if (isPut)
                    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();
        this.getConfig();
    },
}
</script>

<style scoped>

</style>
