<template>
    <div id="drdc">
        <el-tabs type="border-card" v-model="editableTabsValue">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-download"></i>导出数据</span>
                <div style="width:100%;height:100%;">
                    <div class="top-div">
                        <el-select v-model="valueSelected" placeholder="请选择模块" >
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="block sjxz">
                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="times" type="daterange" range-separator="至" start-placeholder="上传起始时间" end-placeholder="上传结束时间" :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </div>
                        <div class="button-discuss" @click="searchs">搜索</div>
                        <div class="button-discuss" @click="export_data">导出</div>
                    </div>
                    <div class="bottom-div">
                        <component :is="valueSelected" :clientDetails="clientDetails" ref = "compoent_drdc" @change_Select="multiple"/>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-upload2"></i>导入数据</span>
                <div style="width:100%;height:100%;">
                     <div class="top-div">
                        <div style="height:100%">
                            <el-select v-model="valueSelected" placeholder="请选择模块">
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>

                        <el-upload class="upload-demo" action="" :on-change="handleChangeZip" :on-remove="handleRemove"  :file-list="fileListZip" :auto-upload="false" multiple accept=".zip,.json">
                            <el-button size="small" type="primary">点击选择文件</el-button>
                            <div slot="tip" class="el-upload__tip">单个文件不超过100M，总文件不超过1G。</div> 
                        </el-upload>
                        
                        <div style="margin-top:5px"><el-checkbox v-model="autoImportChecked">常规导入</el-checkbox></div>
                        <div class="button-discuss" @click="import_data" style="margin-top: 20px;">导入本系统</div>
                        
                    </div>
                </div>

                <!-- <div style="width:50%;height:100%;float:left;text-align:center;display:none" ref="drsjck">
                     <div class="top-div">
                        <el-select v-model="valueSelected" placeholder="请选择模块" style="margin-left: 29%;">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>

                        <el-upload class="upload-demo" action="" :on-change="handleChangeZipCollection" :on-remove="handleRemoveCollection"  :file-list="fileListZipCollection" :auto-upload="false" multiple accept=".zip,.json">
                            <el-button size="small" type="primary">点击选择文件</el-button>
                            <div slot="tip" class="el-upload__tip">单个文件不超过500M，总文件不超过1G。</div>
                        </el-upload>
                          
                        <div class="button-discuss" @click="import_data_collect()" style="margin-left: calc(50% - 65px);margin-top: 20px;">导入数据仓库</div>
                    </div>
                    
                </div> -->
            </el-tab-pane>

            <el-tab-pane>
                <span slot="label"><i class="el-icon-upload3"></i>大文件导入数据</span>
                 <div>
                    <div class="top-div">
                         <el-select v-model="valueSelected" placeholder="请选择模块">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                     <bigfile-upload style="height: calc(100% - 119px);" :fileType="valueSelected"/>
                 </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import {fileUpload, fileDownload1, startLoading, endLoading} from '../../util/http_util';
import navs_news from "../../components/common/drdc_news.vue";
import navs_CHARACTER from "../../components/common/drdc_character.vue";
import navs_COLLECTION from "../../components/common/drdc_collection.vue";
import navs_LITERTURE from "../../components/common/drdc_literature.vue";
import navs_COLLECTION_FOLDER from "../../components/common/drdc_COLLECTION_FOLDER.vue";
import navs_facebook from "../../components/common/drdc_facebook.vue";
import navs_twitter from "../../components/common/drdc_twitter.vue";
import navs_ORGANIZATION from "../../components/common/drdc_ORGANIZATION.vue";
import navs_THINK_TANK from "../../components/common/drdc_THINK_TANK.vue";
import navs_ATTENTION from "../../components/common/drdc_ATTENTION.vue";
import navs_mould from "../../components/common/drdc_mould.vue";
import navs_document from "../../components/common/drdc_document.vue";
import navs_NEO4J from "../dfzy/test.vue";
import BigfileUpload from '../../components/common/bigfileUpload.vue';
export default {
    components: { 
        "NEWS": navs_news,
        "CHARACTER": navs_CHARACTER,
        "COLLECTION": navs_COLLECTION,
        "COLLECTION_FOLDER": navs_COLLECTION_FOLDER,
        "ATTENTION": navs_ATTENTION,
        "LITERATURE": navs_LITERTURE,
        "TWITTER": navs_twitter,
        "FACEBOOK": navs_facebook,
        "THINK_TANK": navs_THINK_TANK,
        "ORGANIZATION": navs_ORGANIZATION,
        "MOULD": navs_mould,
        "DOCUMENT": navs_document,
        "NEO4J": navs_NEO4J,
        BigfileUpload
    },
    data() {
        return {
            editableTabsValue: "0",
            options:[
                {id:'NEWS',name:'新闻模块'},
                {id:'TWITTER',name:'推特模块'},
                {id:'FACEBOOK',name:'脸书模块'},
                {id:'THINK_TANK',name:'智库模块'},
                {id:'CHARACTER',name:'人物数据'},
                {id:'COLLECTION',name:'收藏'},
                {id:'COLLECTION_FOLDER',name:'收藏夹'},
                {id:'ATTENTION',name:'重点关注'},
                {id:'LITERATURE',name:'文献资料'},
                {id:'ORGANIZATION',name:'机构数据'},
                {id:'MOULD',name:'人物机构模板'},
                {id:'DOCUMENT',name:'文献库'},
                {id:'NEO4J',name:'关系图谱'}
            ],
            times:"",
            //查询参数
            clientDetails:{},
            //选中的下拉
            valueSelected:'NEWS',
            // Role_model:'',
            //选中的行Id
            multipleSelection:[],
            //需要上传的文件
            fileListZip: [],
            fileListZipCollection: [],
            autoImportChecked: false
        };
    },
    methods: {
        //查询
        searchs(){
            let _this = this;
            // _this.currentRole_drdc = _this.Role_model;
            setTimeout(function () {
                _this.clientDetails={
                    stTime: _this.times!=""&&_this.times!=null?_this.times[0]:null,
                    edTime: _this.times!=""&&_this.times!=null?_this.times[1]:null
                };
            }, 300);
        },
        //导出
        export_data(){
            let _this = this;
            let param = {
                stTime: _this.times!=""&&_this.times!=null?_this.times[0]:null,
                edTime: _this.times!=""&&_this.times!=null?_this.times[1]:null,
                ids: _this.multipleSelection,
                tableType: _this.valueSelected,
            }
            // return
            fileDownload1("api/rest/exp_imp/exportObject", param).then(res=>{
                _this.$refs.compoent_drdc.$refs.multipleTables.clearSelection();
            });
        },
        //勾选事件
        multiple(val){
            this.multipleSelection = val;
        },
        //文件上传加入文件
        handleChangeZip(file, fileLis){
            this.fileListZip = fileLis.slice(-5);
        },
        handleRemove(file, fileList) {
            this.fileListZip = fileList;
        },
        //文件上传
        import_data(){
            startLoading();
            let fd = new FormData();
            for (let i = 0; i < this.fileListZip.length; i++) {
                fd.append("file", this.fileListZip[i].raw);
            }
            fileUpload('api/rest/exp_imp/importObject?tableType=' + this.valueSelected, fd).then(res => {
                this.$message.success('上传成功' + res.success + '条数据！');
                endLoading();
            }).catch(err => {
                this.$message.warning(err.message);
                endLoading();
            });
            if(this.autoImportChecked){
                this.import_data_collect_auto();
            }
        },
        //自动导入采集端
        import_data_collect_auto(){
            // startLoading();
            let fd = new FormData();
            for (let i = 0; i < this.fileListZip.length; i++) {
                fd.append("file", this.fileListZip[i].raw);
            }
            let url = "api/rest/exp_imp/synchronize503?tableType=";
            fileUpload(url + this.valueSelected, fd).then(res => {
                this.$message.success('上传成功' + res.success + '条数据！');
                // endLoading();
            }).catch(err => {
                this.$message.warning(err.message);
                // endLoading();
            });
        },
        //手动导入采集端
        // import_data_collect(){
        //     startLoading();
        //     let fd = new FormData();
        //     for (let i = 0; i < this.fileListZipCollection.length; i++) {
        //         fd.append("file", this.fileListZipCollection[i].raw);
        //     }
        //     let url = "api/rest/exp_imp/synchronize503?tableType=";
        //     fileUpload(url + this.valueSelected, fd).then(res => {
        //         this.$message.success('上传成功' + res.success + '条数据！');
        //         endLoading();
        //     }).catch(err => {
        //         this.$message.warning(err.message);
        //         endLoading();
        //     });
        // },
        // handleRemoveCollection(file, fileList) {
        //     this.fileListZipCollection = fileList;
        // },
        // handleChangeZipCollection(file, fileLis){
        //     this.fileListZipCollection = fileLis;
        // }
    },
    activated() {
        this.searchs();
    },
};
</script>

<style lang="scss">
#drdc {
  width: 99%;
  height: 98%;
  padding: 30px;
  box-sizing: border-box;
  overflow-y: auto;
  >.el-tabs--border-card {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border: 2px solid #125473;
    border-radius: 5px;
    box-sizing: border-box;
    background: #ffffff00;
        >.el-tabs__content{
            width: 100%;
            height: calc(100% - 40px);
            box-sizing: border-box;
        }
        > .el-tabs__header {
            background-color: unset;
            border-bottom: 2px solid #125473;
            .el-tabs__item {
                color: #dedede;
            }
            .el-tabs__item.is-active {
                color: #ffe000;
                background-color: #116791;
                border-right-color: #116791;
                border-left-color: #116791;
            }
            .el-tabs__item:not(.is-disabled):hover {
                color: #ffe000;
            }
        }
        .top-div {
            width: 100%;
            height: 60px;
            .el-button {
                float: left;
                margin-left: 10px;
                margin-top: 3px;
            }
            .el-input {
                float: left;
                width: 200px;
                margin-right: 30px;
                .el-input__inner {
                    background: none;
                    color: #ffff;
                    border: 1px solid #146a80 !important;
                    box-shadow: 0 0 10px #1b6097;
                }
            }
            .el-select {
                float: left;
            }
            .sjxz {
                width: 350px;
                float: left;
                .el-date-editor {
                    background: none;
                    span {
                        color: white;
                    }
                    .el-range-input {
                        color: white;
                        background: none;
                    }
                }
                .el-input__inner {
                    border: 1px solid #146a80 !important;
                }
            }
            .el-upload__tip {
                color: rgb(214, 214, 214);
                margin-top: 20px;
            }
            .upload-demo{
                width: 300px;
                // margin-left: calc(50% - 150px);
                .el-upload--text{
                    display: flex;
                }
                .el-upload-list__item {
                    line-height: 30px;
                    height: 30px;
                    &:hover {
                        background: #628ed4;
                    }
                    .el-upload-list__item-name {
                        color: white;
                    }
                    .el-upload-list__item-name [class^='el-icon'] {
                        color: white;
                    }
                }
            }
            .button-discuss {
                width: 100px;
                height: 30px;
                line-height: 30px;
                float: left;
                font-size: 14px;
                margin-top: 5px;
                margin-left: 20px;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/yqjc/40.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }
        .bottom-div {
            width: 100%;
            height: calc(100% - 55px);
            box-shadow: 0 0 10px #1b6097;
        }
    }
    .el-dialog {
        background: #1d2d46 !important;
        .el-dialog__title {
            color: #ffffff;
        }
        .el-form-item__label {
            color: #dadada;
        }
        .button-preview {
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin-left: calc(50% - 110px);
            margin-top: 10px;
            text-align: center;
      font-size: 14px;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/40.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .button-cancel {
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin-left: 20px;
            margin-top: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .el-upload-list__item-name [class^='el-icon'] {
            color: #2870ff;
            height: unset !important;
        }
        .el-upload__tip {
            color: #c7c7c7;
        }
        .el-upload-list__item-name {
            color: #4382ff;
        }
        .audio-class {
            margin-left: 75px;
        }
    }
    .el-input__count {
        color: #229dbd;
        background: #1d2d4600;
    }
    .el-input__count-inner {
        color: #229dbd;
        background: #1d2d46;
    }
    .el-dialog {
        .el-input__inner {
            color: white !important;
            background: none !important;
            border: 1px solid #146a80 !important;
            box-shadow: 0 0 10px #1b6097;
        }
        .el-textarea__inner {
            color: white !important;
            background: none !important;
            border: 1px solid #146a80 !important;
            box-shadow: 0 0 10px #1b6097;
        }
    }
}
</style>