<template>
    <div class="ContainerBox">
        <!-- 按钮区域 -->
        <section class="buttonBox">
            <div>
                <el-button type="primary" @click="DownLoad">下载自动模板</el-button>
                <el-button type="primary" @click="Added">拉取</el-button>
                <el-button type="primary" @click="Refresh">刷新</el-button>
                <el-button type="primary" @click="toQueryList">跳转</el-button>
            </div>
        </section>
        <section class="contentBox">
            <el-table :data="tableData" ref="districtTable" max-height="800" default-expand-all row-key="id">
                <el-table-column v-for="(item,index) in tableColumn" :key="index" :prop="item.prop" :label="item.label"
                    :width="item.width" v-if="item.show">
                    <template slot-scope="scope">
                        <span>{{scope.row[item.prop]}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" min-width="180">
                    <template slot="header" slot-scope="scope">
                        <span class="columnHeader">
                            <strong>操作</strong>
                        </span>
                    </template>
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="primaryColor" @click="downScope(scope.row)" :loading="loading">下载
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <el-dialog v-dialogDrag title="拉取" :visible="showdialog" @close="cancelForm" :close-on-click-modal="false"
            class="el-dialog-single" width="50%">
            <div style="text-align: left;padding:20px">
                <el-form label-width="150px" :model="formList" :rules="rules" ref="ruleForm">
                    <el-form-item label="开始拉取时间：" prop="">
                        <el-date-picker v-model="fromTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                            style="width:100%" clearable>
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="截止拉取时间：" prop="">
                        <el-date-picker v-model="endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                            style="width:100%" clearable>
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="目标系统：" prop="">
                        <el-select v-model="optionvalue" placeholder="请选择" clearable>
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="待拉取的业务信息：" prop="">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
                            全选</el-checkbox>
                        <el-checkbox-group v-model="optionvalue2" @change="handleCheckedCitiesChange" style="height:500px;overflow:auto">
                            <el-checkbox v-for="item in options2" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </div>

            <el-button type="primary" size="small" class="sql-btn" @click="submit">提交</el-button>

        </el-dialog>
    </div>
</template>
<script>
import {
    getchangeLogsApi,
    postchangeLogsApi,
    templateDownloadApi,
    metaTablesApi, downloadLogsApi
} from "@/api/staffApi.js"
import selectTree from "@/components/SelectTree";
var cityOptions = [];
export default {
    name: "ChangeLogs",
    data() {
        return {
            tableColumn: [
                { prop: "id", label: "id", width: "250", show: true, version: 5 },
                { prop: "name", label: "名称", width: "300", show: true, version: 5 },
                { prop: "path", label: "路径及描述", width: "500", show: true, version: 5 },
                { prop: "process", label: "进度(已生成数/总数)", width: "180", show: true, version: 5 },
                { prop: "createdTime", label: "拉取时间", width: "300", show: true, version: 5 },
            ],
            tableData: [],
            showdialog: false,
            id: '',
            value: '',
            fromTime:'',
            endTime:'',
            optionvalue: '',
            optionvalue2: [],
            checkAll: false,
            options: [{
                value: 'beijing',
                label: '北京'
            }, {
                value: 'ningxia',
                label: '宁夏'
            }, {
                value: 'hunan',
                label: '湖南'
            }, {
                value: 'guangxi',
                label: '广西'
            }, {
                value: 'nanning',
                label: '南宁'
            },
            {
                value: 'gansu',
                label: '甘肃'
            },
            {
                value: 'shanxi',
                label: '陕西'
            },
            {
                value: 'guowai',
                label: '国外'
            },
            {
                value: 'govout-to-govin',
                label: '政务外网到公安内网'
            },
            {
                value: 'govin-to-public',
                label: '公安内网到互联网'
            },
            {
                value: 'govin-to-govout',
                label: '公安内网到政务外网'
            }
            
            ],
            options2: [],
            isIndeterminate: true,
            checkAll: false,
            checkedCities: [],
            cities: cityOptions,
            formList: {},
            rules: {},
            loading:false
        }
    },
    components: { selectTree },
    mounted() {
        if(localStorage.getItem("bcx-allowed")==null || localStorage.getItem("token")==null){
               this.$router.push({ path: '/' });
               window.location="/";
            return;
        }

        this.getchangeLogs();
        this.getmetaTables();
        
        /**
         * 针对晋城的情况; 只显示外网到内网
         */
        if(window.location.href.indexOf("zafkxt.jcgov.gov.cn")>-1){
             this.options=[{
                value: 'govout-to-govin',
                label: '政务外网到公安内网'
            },
            {
                value: 'govin-to-govout',
                label: '公安内网到政务外网'
            }];   
        }
    },
    methods: {
        handleCheckAllChange(val) {
            debugger
            console.log(val)
            this.optionvalue2 = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            console.log(value)
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.options2.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.options2.length;
        },
        // 获取列表
        getchangeLogs() {
            getchangeLogsApi().then(res => {
                console.log(res)
                if (res && res.length > 0) {
                    this.tableData = res
                }
            })
        },
        cancelForm() {
            this.showdialog = false
        },
        // 刷新
        Refresh() {
            this.getchangeLogs()
        },
        // 弹窗
        Added() {
            this.showdialog = true
        },
        // 拉取
        submit() {
            postchangeLogsApi({ fromTime: this.fromTime,endTime:this.endTime, regionCode: this.optionvalue, tables: this.optionvalue2 }).then(res => {
                // console.log(res)
                this.$message({ type: "success", message: "提交成功" });
            })
        },
        // 跳转
        toQueryList() {
            this.$router.push("QueryList")
        },
        // 下载自动模板
        DownLoad() {
            let url = `/obpm/v3/extends/change-logs/template/download`
            window.open(url)
        },
        fn2(arr) {
            const res = new Map();
            console.log(res)
            return arr.filter(item => !res.has(item.value) && res.set(item.value, item.value));
        },
        getmetaTables() {
            metaTablesApi().then(res => {
                console.log(res)
                if (res && res.length > 0) {
                    this.options2 = []
                    cityOptions=[]
                    res.forEach(item => {
                        this.options2.push({ value: item.tableName, label: item.displayName })
                    })
                    this.options2 = this.fn2(this.options2)
                    this.options2.forEach(item=>{
                        cityOptions.push(item.value)
                    })
                }
            })
        },
        downScope(item) {
            console.log(item)
            if(item.process){
                let process=item.process&&item.process.split('/')
                if(process.length&&process[0]!=process[1]){
                    this.$message({type:'warning',message:'进度未完成，不可以下载'})
                    return
                }
            }              
            this.loading=true
            let url = `/obpm/v3/extends/change-logs/download/${item.id}`
            setTimeout(() => {
                window.open(url)
                this.loading=false
            }, 5000);//等待5s下载                
        }
    }
}
</script>
<style lang="scss">
.ContainerBox {
    .remarkBox {
        .remarkInfo {
            background: #fafafa;
            color: hsl(0, 0%, 40%);
            border: 1px solid #ebeef5;
            border-radius: 4px;
            line-height: 30px;
            padding: 10px;
            display: flex;

            .el-icon-flag {
                margin-top: 9px;
                color: #ffc108;
                margin-right: 10px;
            }
        }
    }

    .rightBox {
        display: flex;
        justify-content: flex-end;

        .el-input {
            margin-right: 10px;
        }
    }

    .HighSearchBox {
        margin-top: 15px;
    }

    .primaryColor {
        color: #108ee9;
    }

    .dangerColor {
        color: red;
    }

    .bluelink {
        color: #409eff;
    }

    .TableSelectBox {
        display: flex;
        background: #e6f3fc;
        color: #666666;
        border: 1px solid #d4f0fc;
        border-radius: 4px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px 0;

        span {
            line-height: 20px;

            i {
                margin-left: 5px;
                margin-right: 5px;
                color: #2e8ad7
            }
        }
    }

    .el-checkbox {
        display: block;
    }
}
</style>