<template>
    <div id="DataLog">
        <div class="top">
            <h2>数据同步管理</h2>
            <!-- <div class="serve-updata">
                <span> 中台状态 </span>
                <el-popover placement="bottom" width="200" trigger="hover">
                    <div>
                        <div><span class="status-1"></span><span>:正常</span></div>
                        <div><span class="status-2"></span><span>:异常</span></div>
                    </div>
                    <i slot="reference" className="infomations el-icon-information"></i> </el-popover
                >：
                <div ref="status" class="state"></div>
            </div> -->
        </div>
        <div style="margin-top: 8px">
            <div  class="modify">
               <div>     
                    <el-input style="width: 220px" placeholder="请输入内容" @input="httpInputChange" @blur="httpInputBlur" :value="httpValue" />
                    <el-button type="primary" style="margin-left: 8px" :loading='httpBtnLoading' :disabled='!httpValue' @click="httpExportHandle">导出Excel</el-button>
                    <el-button type="primary"  :loading='syncBtnLoading' :disabled='!httpValue' @click="syncDataHandle">同步</el-button>       
               </div> 
            </div>
            <el-divider />    
            <div v-if="isShowTable" class="screen">  
                <p>筛选条件</p>
                <ul class="screen-list">
                    <li>
                        <span>操作符：</span>
                        <el-select v-model="operationValue" :clearable="true" @change="operationChange" placeholder="请选择">
                            <el-option v-for="item in operation" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </li>
                    <li>
                        <span>目标id：</span>
                        <el-input v-model="targetId" :clearable="true" placeholder="请输入对象id" style="width: 220px" @change="objIdChange"></el-input>
                    </li>
                    
                    <li>
                        <span>对象表：</span>
                        <el-select v-model="tableName" @change="objTableChange" placeholder="请选择">
                            <el-option v-for="(item, key) in ENUM_OBJECT_TABLE" :key="key" :label="item"  :value="key"></el-option>
                        </el-select>
                    </li>
                    <li v-if="tableName === 'dt_object'">
                        <span>对象类型：</span>
                        <el-select v-model="objTypeValue" :clearable="true" @change="objTypeChange" placeholder="请选择">
                            <el-option v-for="item in objType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </li>
                </ul>

                <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    style="width: 100%; margin-top: 24px"
                    :data="data"
                    :stripe="true"
                    :maxHeight="620"
                    size='small'
                    @sort-change="handleSort"
                >
                    <el-table-column label="Id" >
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.targetId ? scope.row.targetId : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" >
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.name ? scope.row.name : "--" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作类型">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ typeObj[scope.row.type] ? typeObj[scope.row.type] : "--" }}</span>
                        </template>
                    </el-table-column>
                    <!-- 关系实例表 -->
                    <template v-if="tableName === 'dt_relation'">
                        <el-table-column label="fromId" >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.targetId ? scope.row.targetId : "--" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="toId" >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.targetId ? scope.row.targetId : "--" }}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <!-- 对象实例表 -->
                    <template v-else-if="tableName === 'dt_object'">
                        <el-table-column label="本地名称" >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.localName ? scope.row.localName : "--" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="本地编码">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.localId ? scope.row.localId : "--" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="对象类型" >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.objectType ? OBJ_TYPE[scope.row.objectType] : "--" }}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <!-- 其他表 -->
                     <template v-else>
                        <el-table-column label="编码" >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.code ? scope.row.code : "--" }}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
                <!-- {/* 分页 */} -->
                <div class="pages">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="this.pageObj.total"
                        :pageSizes="[15, 30, 50, 100]"
                        @size-change="onSizeChange"
                        @current-change="onCurrentChange"
                        :pageSize="pageObj.pageSize"
                        :currentPage="pageObj.pageNumber"
                    />
                </div>
            </div>
            <div v-else class="no-data">
                <img src="@/assets/image/no-data.png" />
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
    queryGroupCode,
    queryobjType,
    syncDataLogList,
    syncData,
    queryRecordUpdata,
    dHttpExport
} from "@/api/synclog";
import moment from 'moment'
import { ENUM_OBJECT_TABLE, OBJ_TYPE } from './constant'
export default {
    data() {
        return {
            groupCode: "", //集团id
            isShowTable: false, //是否显示table
            data: [],
            objClassify: [],
            //对象类型
            objType: [
                {
                    value: "building",
                    label: "建筑",
                },
                {
                    value: "floor",
                    label: "楼层",
                },
                {
                    value: "equipment",
                    label: "设备",
                },
                {
                    value: "component",
                    label: "部件",
                },
                {
                    value: "space",
                    label: "空间",
                },
                {
                    value: "system",
                    label: "系统",
                },
                {
                    value: "shaft",
                    label: "竖井",
                },
            ],
            typeObj: { // 操作符类型
                create: "创建",
                update: "修改",
                delete: "删除",
            },
            //操作下拉框
            operation: [
                {
                    value: "create",
                    label: "创建",
                },
                {
                    value: "update",
                    label: "修改",
                },
                {
                    value: "delete",
                    label: "删除",
                },
            ],
            objClassifyValue: "", //对象分类状态
            operationValue: "", //操作符状态
            objTypeValue: "", //对象类型状态
            targetId: '',   //对象id
            tableName: 'dt_object',  //对象表
            loading: false, //是否加载
            order: "lastUpdate asc, objId asc", //顺序
            pageObj: {
                total: 0, //总计
                pageSize: 50, //每页数量
                pageNumber: 1, //第几页
            },

            
            httpBtnLoading: false,  //域名导出按钮状态
            httpBtnDisable: true, //域名导出按钮禁用状态
            httpValue: '', //域名内容

            syncBtnLoading: false,  //同步按钮状态
        }
    },
    computed: {
        ...mapGetters("layout", ["projectId", "projectName"]),
    },
    filters: {
        timeFormat(val) { 
            if(!val) return '--';
            return moment(val).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    methods: {
        // 同步数据

        syncDataHandle() {
            this.$message.closeAll();
            this.syncBtnLoading = true;          
            syncData(
                {
                    targetUrl: this.httpValue
                },
                res => {
                    this.pageObj = {
                        ...this.pageObj,
                        pageNumber: 1
                    }
                    this.syncBtnLoading = false
                    this.getData();
                },
                err => {
                    this.syncBtnLoading = false;
                    // this.getData();
                }
            )
        },

        httpInputChange(val) {               
            this.httpValue = val.trim(); 
        },
        httpInputBlur(e) {
            const value = e.target.value;
            const regExp = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/  //域名校验正则   
            this.$message.closeAll();
            if (value && !regExp.test(value)) {
                this.httpValue = '';
                this.$message.warning('请输入合法的域名')
            }   
        },
        httpExportHandle() {
            this.httpBtnLoading = true;
           
            dHttpExport(
                {
                    targetUrl: this.httpValue
                },
                () => {
                    this.httpBtnLoading = false
                }
            )
            
           
            
        },

        // 项目id请求接口
        getData() {
            this.getTable();
            this.loading = true;
          
        },
        
        // 获取对象类型下拉框
        getObjTypeList() {
            const data = {
                projectId: this.projectId,
                objType: this.objTypeValue,
            };
            queryobjType(data, res => {
                const objClassify = res.content.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                    };
                });
                this.objClassify = objClassify;
            });
        },
        // 对象类型发生变化
        objTypeChange(val) {
            this.objTypeValue = val;
            this.objClassifyValue = "";
            // if (val == "equipment" || val == "space" || val == "system" || val == "component") {
            //     this.getObjTypeList();
            // } else {
                this.objClassify = [];
            // }
            this.getTable();
        },
        // change变化触发获取tablelist
        operationChange(val) {
            this.operationValue = val;
            this.getTable();
        },
        // 对象类型编号
        objClassChange(val) {
            this.objClassifyValue = val;
            this.getTable();
        },
        // 对象表变化
        objTableChange(val) {
            this.tableName = val;
            this.getTable();
        },
        // 对象id变化
        objIdChange(val) {
            this.targetId = val.trim();
            this.getTable();
        },
        // 请求table
        getTable() {
            this.loading = true;
            if (this.projectId) {
                // 请求table以及中台状态接口
                //对象类型
                const objectType = this.objTypeValue
                    ? `;objectType='${this.objTypeValue}'`
                    : "";
                // 对象分类
                const classCodeName = this.objClassifyValue
                    ? `;classCode='${this.objClassifyValue}'`
                    : "";
                // 操作符状态
                const type = this.operationValue
                    ? `;type='${this.operationValue}'`
                    : "";
                // 对象表
                const tableName = this.tableName ? `;tableName='${this.tableName}'` : ''

                // 对象id
                const targetId = this.targetId ? `;targetId='${this.targetId}'` : ''


                const postParam = {
                    order: this.order,
                    pageNumber: this.pageObj.pageNumber,
                    pageSize: this.pageObj.pageSize,
                    filters: `projectId='${this.projectId}';sign=2${type}${classCodeName}${objectType}${tableName}${targetId}`,
                };


                syncDataLogList(postParam, res => {
                    this.isShowTable = true;
                    this.data = res.content;
                    this.loading = false;
                    this.pageObj = Object.assign(this.pageObj, {
                        total: res.total,
                        // pageNumber: res.pageNumber,
                        // pageSize: res.pageSize,
                    });
                }, () => {
                    this.isShowTable = false;
                    this.loading = false;
                    this.data = [];
                })
            } else {
                this.isShowTable = false;
            }
        },
        // 输入改变输入参数
        onChange(key, value) {
            this[key] = value;
            // this.forceUpdate();
        },
        // 忽略该条信息
        hideMsg(res) {
            const data = {
                content: [
                    {
                        ...Object.assign(res, {
                            sign: 3,
                        }),
                    },
                ],
            };
            this.loading = true;
            queryRecordUpdata(data, res => {
                if (res.result == "success")
                    this.$message({
                        showClose: true,
                        message: "忽略完成",
                        type: "success",
                        duration: 3000,
                    });
                this.getTable();
            }, () => {
                this.$message({
                    showClose: true,
                    message: "忽略失败，请重新同步或联系管理人员！",
                    type: "error",
                    duration: 3000,
                });
                this.loading = false;
            })
        },

        // 改变pageSize
        onSizeChange(val) {
            this.pageObj = Object.assign(this.pageObj, {
                pageSize: val,
                pageNumber: 1,
            });
            this.getTable();
        },
        // 改变当前页
        onCurrentChange(val) {
            this.pageObj = Object.assign(this.pageObj, {
                pageNumber: val,
            });
            this.getTable();
        },
        // 时间排序
        handleSort(data) {
            if (data.order == "descending") {
                this.order = "lastUpdate desc, objId desc";
            } else {
                this.order = "lastUpdate asc, objId asc";
            }
            this.getTable();
        },
    },
    mounted() {
        this.getData();
        this.ENUM_OBJECT_TABLE = ENUM_OBJECT_TABLE;
        this.OBJ_TYPE = OBJ_TYPE
    },
    watch: {
        projectId() {
            this.getData();
        }
    }
    
}
</script>

<style lang="less">
#DataLog {
    padding: 20px 20px;
    box-sizing: border-box;
}
.pages {
    float: right;
    margin-top: 12px;
    margin-right: 24px;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top .serve-updata {
    display: flex;
    align-items: center;
    margin-right: 12px;
}
.top .serve-updata .state {
    width: 20px;
    height: 20px;
    /* background: ; */
    border-radius: 50% 50%;
    margin-left: 6px;
    margin-right: 6px;
}
.status-1 {
    background: #19f704;
    border-radius: 50% 50%;
    width: 12px;
    height: 12px;
    display: inline-block;
}
.status-2 {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #4a4a4a;
    border-radius: 50% 50%;
}

.project {
    display: flex;
    width: 300px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.project p {
    width: 90px;
}
.screen {
    margin-bottom: 12px;
}
.screen .screen-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
}
.screen ul li {
    margin-left: 12px;
}
.infomations {
    cursor: pointer;
}
.no-data {
    width: 100%;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mlr8 {
    margin: 0 8px;
}
.el-divider--horizontal {
    height: 0.5px;
}
.modify {
    
    display: flex;
    justify-content: flex-end;
}

</style>