<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 v-bind:style="[i % show_num == 0 ? block : block_left]"  v-for="(item,i) in tableData">
                    <div>
                        <el-image @click="pushDetails(item.UUID)" class="slt_img" :src="item.SLT_URL"></el-image>
                        <el-image @click="pushApplyDetails(item.UUID)" class="slt_img_float" :src="item.GWC_URL"></el-image>
                    </div>
                    <span class="text_resource_name">{{ item.RESOURCE_NAME }}</span>
                    <span class="text_resource_type">{{ item.RESOURCE_TYPE }}</span>
                    <el-tooltip :content="item.RELEASE_REMARKS" placement="top" effect="dark" popper-class="atooltip">
                            <span class="text_resource_remarks" >{{ item.RELEASE_REMARKS | ellipsis }} </span>
                    </el-tooltip>
                </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>
</template>


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

    export default {
        name: "interfaceBrowseController",
        components: {LoginOut,MyHeader},
        data() {
            return {
                loading: false,
                show_num:0,
                show_width:346,//图片宽度
                show_height:319,//图片高度
                totalCount:0,
                tableHeight: 0,
                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.commit();
            // MessageBox.alert('文件上传成功', '提示', {
            //     confirmButtonText: '确定'
            // });
        },
        methods:{
            commit(){
                //this.loading=true;
                selectInterfaceKoolkitMainPageList(
                    this.formData.name,
                    this.formData.type,
                    '2',
                    this.pageSize,
                    this.currentPage).then(response => {
                        this.loading=false;
                        this.loadInterfaceKoolkitMainPageList(response);
                    });
            },
            loadInterfaceKoolkitMainPageList(response){
                let dataArr = response.msg[0].Rows
                this.totalCount =response.msg[0].TotalRowCount;
                if(dataArr.length > 0){
                    this.tableData = [];
                    //获取当前宽度 计算最大显示多少个，和间隔
                    const querybodywidth = this.$refs.querybody.clientWidth;
                    //计算当前页面最大显示数量
                    const js_width = querybodywidth / this.show_width;
                    this.show_num = js_width.toFixed(0);
                    //需要减边框
                    this.block_left["margin-left"] = ((querybodywidth - this.show_width * this.show_num - 2.5 * this.show_num) / (this.show_num-1)).toFixed(2) +"px";
                    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.tableData.push(dataArr[i]);
                    }
                }else{
                    this.loading=false;
                    this.tableData = [];
                }
            },
            handleSizeChange(val) {
                this.pageSize = val;
                selectInterfaceKoolkitMainPageList(
                    this.formData.name,
                    this.formData.type,
                    '2',
                    this.pageSize,
                    this.currentPage).then(response => {
                    this.loading=false;
                    this.loadInterfaceKoolkitMainPageList(response);
                });
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                selectInterfaceKoolkitMainPageList(
                    this.formData.name,
                    this.formData.type,
                    '2',
                    this.pageSize,
                    this.currentPage
                    ).then(response => {
                    this.loading=false;
                    this.loadInterfaceKoolkitMainPageList(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');
            }
        },
        filters:{
            ellipsis(value){
                if (!value) return '';
                if (value.length > 39) {
                    return value.slice(0,39) + '...'
                }
                return value;
            }
        }
    }
</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-color:#061635;
        position: absolute;
        color: white;
        font-size: 14px;
    }
    #queryCriteria{
        width: 96%;
        border:1px solid red;
        height: 8%;
        position:absolute;
        left: 2%;
        top:13%;
        background: rgba(0, 38, 115, 0.6);
        border: 1px solid #00aaff;
        border-radius: 4px;
        color: white;
        font-size: 14px;

    }
    #queryCriteria_select{
        width: 96%;
        height: 60%;
        position: absolute;
        top:25%;
        left:2%;
        color: white;
        font-size: 14px;
        color: #ffffff;
    }

    #querybody{
        width: 96%;
        height: 70%;
        position:absolute;
        left: 2%;
        top:24%;
        color: white;
        font-size: 14px;
        broder:1px solid red;
        overflow-y: scroll;/*y轴滚动*/
    }
    #querybody::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }

    #querybottom{
        width: 96%;
        height: 64%;
        position:absolute;
        left: 2%;
        top:94%;
        color: white;
        font-size: 14px;
        broder:1px solid red;
        text-align:center;
    }



    .slt_img{
        width: 346px;
        height: 139px;

    }
    .slt_img_float{
        width: 60px;
        height: 60px;
        position: absolute;/*这里一定要设置*/
        top:53%;
        right:10%;
        border-radius:50%;
        z-index: 50;/*这里是该元素与显示屏的距离，据说越大越好，因为没有它也是可以的*/
        background: #3388FF;
    }

    .text_resource_name{
        display: inline-block;
        width: 95%;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 38px;
        padding-left: 24px;
        padding-top:14px;

        height: 22px;
        font-size: 22px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 38px;
    }
    .text_resource_type{
        display: inline-block;
        padding-left: 15px;
        width: 95%;
        height: 16px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #FFFFFF;
        line-height: 48px;
        padding-left: 24px;


    }
    .text_resource_remarks{
        display: inline-block;
        margin:12px 24px 2px 24px;
        width: 88%;
        height:60px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
        overflow-y: scroll;/*y轴滚动*/
    }
    .text_resource_remarks::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }

</style>