<template>
    <div id="show-platform" v-loading="loading" element-loading-text="数据分析中" element-loading-spinner="el-icon-loading"  element-loading-background="rgba(0, 0, 0, 0.8)">
        <my-header/>
        <login-out/>
        <div id="interfaceBrowse">
            <div id="queryCriteria">
                <div id="queryCriteria_select">
                    <el-form size="small" :model="formData" inline>
                        <el-row  :gutter="20">
                            <el-col :span="20">
                                <el-form-item label="工具名称">
                                    <el-input
                                            v-model="formData.name"
                                            placeholder="工具名称">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="资源分类">
                                    <el-select  readonly v-model="formData.type" placeholder="请选择资源分类">
                                        <el-option label="资源访问类" value="1"></el-option>
                                        <el-option label="地图类" value="2"></el-option>
                                        <el-option label="控件类" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item >
                                    <el-button v-on:click="commit()">查询</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div id="querybody" ref="querybody">
                <div id="querybody_body">
                    <div class="title">接口共享</div>
                    <div v-for="(item,i) in data_map">
                        <div class="typ_line" v-on:click="show_type(item.CODE)">
                            <div class="type_line01">
                                <div class="type_line01_top">
                                    <el-image class="type_img" :src="item.TYPE_URL"></el-image>
                                </div><br/>
                                <div class="type_line01_bottom">
                                    {{item.NAME}}
                                </div>
                            </div>
                            <div class="type_line02">
                                <span class="type_line02_body">{{item.REMARKS}}</span>
                            </div>
                            <div class="type_line03">
                                <span>
                                    最新更新时间<br/>
                                {{item.INSERT_TIME.toString().split(".")[0]}}
                                </span>
                            </div>
                            <div class="type_line04"></div>
                        </div>
                        <div class="typ_line"  v-for="(child_item,child_i) in item.child" v-show="show_map[child_item.TYPE] == true" :key="child_i">
                            <div class="type_line02">
                                <div class="type_line02_left">
                                    <el-image class="type_line02_left_img" :src="child_item.SLT_URL"></el-image>
                                </div>
                                <div class="type_line02_right">
                                    <span class="type_line02_right_top">{{child_item.RESOURCE_NAME}}</span><br/>
                                    <span class="type_line02_right_bottom">{{child_item.RELEASE_REMARKS}}</span>
                                </div>
                            </div>
                            <div class="type_line03">
                                <span>
                                    最新更新时间<br/>
                                {{item.INSERT_TIME.toString().split(".")[0]}}
                                </span>
                            </div>
                            <div class="type_line04">
                                <div class="type_line04_button">
                                    <el-button v-on:click="pushDetails(child_item.UUID)">查看详情</el-button>
                                    <el-button :disabled="child_item.TEXT_ADDRESS == null" v-on:click="textServer(child_item.TEXT_ADDRESS)">在线测试</el-button>
                                    <el-button v-on:click="pushApplyDetails(child_item.UUID)">申请资源</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="querybottom">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 30, 50,100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import LoginOut from "@/view/show-platform/common/LoginOut";
    import MyHeader from "@/view/show-platform/common/MyHeader";
    import {selectInterfaceKooleitMainType,selectInterfaceKoolkitNewMainPageList} from "@/service/interfaceKoolkit";
    import {baseUrl} from "@/service/config";
    import {MessageBox} from "element-ui";

    export default {
        name: "interfaceBrowse",
        components: {LoginOut,MyHeader},
        data() {
            return {
                loading: false,
                type:'',
                show_num:0,
                show_width:346,//图片宽度
                show_height:319,//图片高度
                totalCount:0,
                tableHeight: 0,
                interface_type:0,
                data_map:{},
                show_map:{
                    "1":false,
                    "2":false,
                    "3":false,
                    "4":false,
                    "5":false,
                    "6":false,
                    "7":false,
                    "8":false
                },
                type_map:{
                },
                block:{
                    "display":"inline-block",
                    "border":"1px solid #00aaff",
                    "border-radius":"4px",
                    "background":"rgba(0, 38, 115, 0.6)",
                    "position":"relative",
                    "left":"0px",
                    "top":"0px",
                    "margin-bottom":"20px",
                    "width":"346px",
                    "height":"300px"},
                block_left:{
                    "display":"inline-block",
                    "border":"1px solid #00aaff",
                    "border-radius":"4px",
                    "background":"rgba(0, 38, 115, 0.6)",
                    "position":"relative",
                    "left":"0px",
                    "top":"0px",
                    "margin-bottom":"20px",
                    "width":"346px",
                    "height":"300px",
                    "margin-left":"20px"},
                tableData:[],
                currentPage:1,
                pageSize:10,
                formData:{
                    name:'',
                    type:''
                },
            }
        },mounted(){
            this.selectInterfaceKooleitMainType();
            this.type = JSON.parse(localStorage.getItem("JSON_MAIN_PARA"))["type"];
            this.show_map[this.type] = true;
        },
        methods:{
            selectInterfaceKooleitMainType(){
                selectInterfaceKooleitMainType().then(response => {
                    let dataArr = response.msg[0].Rows
                    for(var i = 0 ; i < dataArr.length ; i++ ){
                        this.type_map[dataArr[i]["CODE"]] = dataArr[i];
                    }
                    this.commit();
                });
            },
            commit(){
                selectInterfaceKoolkitNewMainPageList(
                    this.formData.name,
                    this.formData.type,
                    '2',this.type,
                    this.pageSize,
                    this.currentPage).then(response => {
                    this.loading=false;
                    this.loadInterfaceKoolkitNewMainPageList(response);
                });
            },
            loadInterfaceKoolkitNewMainPageList(response){
                let dataArr = response.msg[0].Rows
                this.totalCount =response.msg[0].TotalRowCount;
                if(dataArr.length > 0){
                    this.tableData = [];
                    for(let i=0;i<dataArr.length;i++){
                        //判断是否上传过缩略图，如果未上传使用默认缩略图
                        if(dataArr[i]["RESOURCE_THUMBNAIL"] == null || dataArr[i]["RESOURCE_THUMBNAIL"] == ""){
                            //判断访问类型 添加默认图标
                            switch(dataArr[i]["RESOURCE_TYPE"]){
                                case "1":
                                    dataArr[i]["SLT_URL"] = baseUrl + "//fileController//image?path=D://files//interfaceKoolkit//slt//资源访问类.jpg";
                                    break;
                                case "2":
                                    dataArr[i]["SLT_URL"] = baseUrl + "//fileController//image?path=D://files//interfaceKoolkit//slt//地图类.jpg";
                                    break;
                                case "3":
                                    dataArr[i]["SLT_URL"] = baseUrl + "//fileController//image?path=D://files//interfaceKoolkit//slt//控件类.jpg";
                                    break;
                            }
                        }else{
                            dataArr[i]["SLT_URL"] = baseUrl + "//fileController//image?path="+dataArr[i]["RESOURCE_THUMBNAIL"];
                        }
                        dataArr[i]["GWC_URL"] = baseUrl + "//fileController//image?path=D://files//interfaceKoolkit//slt//购物车.png";
                        switch(dataArr[i]["RESOURCE_TYPE"]){
                            case "1":
                                dataArr[i]["RESOURCE_TYPE"] = "资源访问类";
                                break;
                            case "2":
                                dataArr[i]["RESOURCE_TYPE"] = "地图类";
                                break;
                            case "3":
                                dataArr[i]["RESOURCE_TYPE"] = "控件类";
                                break;
                        }
                    }

                    this.data_map = {};
                    for(var i = 0 ; i < dataArr.length;i++){
                        if(dataArr[i]["INSERT_TIME"] != null){
                            dataArr[i]["INSERT_TIME"] = dataArr[i]["INSERT_TIME"].toString().split(".")[0];
                        }
                        if(this.data_map[dataArr[i]["TYPE"]] == null){
                            this.data_map[dataArr[i]["TYPE"]] = this.type_map[dataArr[i]["TYPE"]];
                            this.data_map[dataArr[i]["TYPE"]]["TYPE_URL"]= baseUrl + "//fileController//image?path="+this.type_map[dataArr[i]["TYPE"]]["ICON_IMAGE"];
                            this.data_map[dataArr[i]["TYPE"]]["child"] = [];
                            this.data_map[dataArr[i]["TYPE"]]["child"].push(dataArr[i]);
                        }else{
                            this.data_map[dataArr[i]["TYPE"]]["child"].push(dataArr[i]);
                        }
                        console.log(JSON.stringify(dataArr[i]["INSERT_TIME"]));
                    }

                    console.log(JSON.stringify(this.data_map));
                }else{
                    this.loading=false;
                    this.tableData = [];
                }
            },
            handleSizeChange(val) {
                this.pageSize = val;
                selectInterfaceKoolkitNewMainPageList(
                    this.formData.name,
                    this.formData.type,
                    '2',
                    this.pageSize,
                    this.currentPage).then(response => {
                    this.loading=false;
                    this.loadInterfaceKoolkitNewMainPageList(response);
                });
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                selectInterfaceKoolkitNewMainPageList(
                    this.formData.name,
                    this.formData.type,
                    '2',this.type,
                    this.pageSize,
                    this.currentPage
                ).then(response => {
                    this.loading=false;
                    this.loadInterfaceKoolkitNewMainPageList(response);
                });
            },pushDetails(temp_uuid){
                if(temp_uuid == null){
                    MessageBox.alert('数据损坏', '提示', {
                        confirmButtonText: '确定'
                    });
                }

                var json_para = {
                    uuid:temp_uuid,
                    type: "details"
                };
                localStorage.setItem("JSON_PARA",JSON.stringify(json_para));
                this.$router.push('interfaceBrowseDetails');
            },pushApplyDetails(temp_uuid){
                var json_para = {
                    uuid:temp_uuid,
                    type: "apply"
                };
                localStorage.setItem("JSON_PARA",JSON.stringify(json_para));
                this.$router.push('interfaceBrowseDetails');
            },show_type(num){
                this.show_map[num] = !this.show_map[num];
            },textServer(url){
                //打开工具测试页面
                window.open(url);
            }
        },
    }
</script>

<style scoped lang="scss">
    ::v-deep{
        .el-button{
            box-sizing: border-box;
            border: 1px solid #00aaff;
            background: rgba(255, 255, 255, 0.1);
            outline: #00aaff;
            color: white;
            resize:none;
        }
        .el-form-item__label{
            color: white;
        }
        .el-pagination__total{
            color:white;
        }
        .el-pagination button{
            background: rgba(255, 255, 255, 0.1);
            color:white;
            border: 1px solid #00aaff;
            outline: #00aaff;
        }
        .el-pager li.active {
            color: #409EFF;
            cursor: default;
        }
        .el-pager li {
            padding: 0 4px;
            background: rgba(255, 255, 255, 0.1);
            font-size: 13px;
            min-width: 35.5px;
            height: 28px;
            line-height: 28px;
            box-sizing: border-box;
            color:#ffffff;
            border: 1px solid #00aaff;
        }
        .el-pagination__jump{
            color:white;
        }
    }
    #show-platform{
        width: 100%;
        height:100%;
        overflow: hidden;
    }
    #interfaceBrowse{
        width:100%;
        height: 100%;
        background: url('../../assets/imgs/interfaceKoolkit/首页3.jpg');
        background-size: 100% 100%;
        background-color:#061635;
        position: absolute;
        color: white;
        font-size: 14px;
    }
    #queryCriteria{
        width: 1860px;
        height: 10%;
        background: rgba(0,38,115,0.6);
        border: 1px solid #00AAFF;
        border-radius: 4px;
        position:absolute;
        left: 2%;
        top:13%;
    }

    #queryCriteria_select{
        width: 96%;
        height: 70%;
        position: absolute;
        top:30%;
        left:2%;
        color: white;
        font-size: 14px;
        color: #ffffff;
    }
    #querybody{
        width: 1860px;
        height: 73%;
        background: rgba(0,38,115,0.6);
        border: 1px solid #00AAFF;
        border-radius: 4px;
        position:absolute;
        left: 2%;
        top:25%;
        overflow-y:hidden;
    }

    #querybottom{
        width: 100%;
        height: 6%;
        position:absolute;
        left: 0%;
        top:94%;
        color: white;
        font-size: 14px;
        broder:1px solid red;
        text-align:center;
    }
    #querybody_body{
        width: 100%;
        height: 93%;
        overflow:scroll;
    }
    .title{
        width: 7%;
        height: 60px;
        font-size: 22px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        line-height: 60px;
    }
    .typ_line{
        width: 98%;
        height: 120px;
        /*height: 160px;*/
        margin-left: 1%;
        background: rgba(255,255,255,0.04);
        position: relative;
    }
    .type_img{
        width:70px;
        height: 79px;
    }
    .type_line01{
        display: inline-block;
        width:10.8%;
        height: 100%;
        margin:0px;
        text-align: center;

        border-top: 1px solid rgba(255,255,255,0.15);
        border-left: 1px solid rgba(255,255,255,0.15);
        border-bottom: 1px solid rgba(255,255,255,0.15);

        position: absolute;
        left: 0%;
    }

    .type_line01_top{
        width:70px;
        height: 79px;
        display: inline-block;
        margin-top: 5px;
    }
    .type_line01_bottom{
        display: inline-block;
        height: 16px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
    }

    .type_line02{
        display: inline-block;
        width:35%;
        height: 100%;
        margin:0px;
        border-left: 1px solid rgba(255,255,255,0.15);
        border-top: 1px solid rgba(255,255,255,0.15);
        border-bottom: 1px solid rgba(255,255,255,0.15);

        position: absolute;
        left: 10.8%;
    }
    .type_line02_body{
        display: inline-block;
        width:80%;
        height:80%;
        padding-left:10%;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        text-align: left;
        line-height: 30px;
        padding-top: 5%;
    }

    .type_line02_left{
        display: inline-block;
        width:40%;
        height: 100%;
        padding-left:10%;
    }

    .type_line02_right{
        display: inline-block;
        width:50%;
        height: 100%;
        overflow:hidden;
    }
    .type_line02_right_top{
        display: inline-block;
        width:98%;
        height: 20%;

        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 16px;
        padding-top:5%;
    }
    .type_line02_right_bottom{
        display: inline-block;
        width:98%;
        height: 58%;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 14px;
        overflow:hidden;
    }


    .type_line02_left_img{
        width:200px;
        height: 80%;
        padding-bottom:5%;
    }


    .type_line03{
        display: inline-block;
        width:34%;
        height: 100%;
        margin:0px;

        border-top: 1px solid rgba(255,255,255,0.15);
        border-bottom: 1px solid rgba(255,255,255,0.15);

        position: absolute;
        left: 45.8%;
    }

    .type_line03 span{
        display: inline-block;
        width:100%;
        height:80%;

        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        line-height: 30px;
        padding-top: 5%;
    }

    .type_line04{
        display: inline-block;
        width:20%;
        height: 100%;
        margin:0px;

        border-top: 1px solid rgba(255,255,255,0.15);
        border-bottom: 1px solid rgba(255,255,255,0.15);
        border-right: 1px solid rgba(255,255,255,0.15);

        position: absolute;
        left: 79.8%;
    }

    .type_line04_button{
        padding-top: 12%;
    }
    // chrome 和 safari
    .element::-webkit-scrollbar { width: 0 !important }
    // ie10+
    .element { -ms-overflow-style: none; }
    // firefox
    element { overflow: -moz-scrollbars-none; }
    ::-webkit-scrollbar {
        width: 0;
    }

</style>