<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="querybody">
                <div id="querybody_top">
                    <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_body">
                    <el-form size="small" :model="formData" inline>
                        <el-row  :gutter="20">
                            <el-col :span="24">
                                <div class="search_right">
                                    <span>共有</span>
                                    <span>{{totalCount}}</span>
                                    <span>条记录</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row  :gutter="20">
                            <el-col :span="24">
                                <el-table
                                        :data="tableData"
                                        :height="630"
                                        style="width: 100%">
                                    <el-table-column
                                            v-for="(item,index) in coloumList" :key="index"
                                            show-overflow-tooltip
                                            align="center"
                                            :prop="item.prop"
                                            :label="item.label"
                                            :width="item.width"
                                     >
                                    </el-table-column>
                                    <el-table-column   align="center" width="140" label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>

                    </el-form>
                </div>
                <div id="querybody_bottom">
                    <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 {MessageBox} from "element-ui";
    import MyHeader from "@/view/show-platform/common/MyHeader";
    import LoginOut from "@/view/show-platform/common/LoginOut";
    import {selectInterfaceKoolkitApplyPageList} from "@/service/interfaceKoolkit";
    export default {
        name: "myInterfaceController",
        components: {LoginOut,MyHeader},
        data() {
            return {
                loading: false,
                totalCount:0,
                tableHeight: 0,
                tableData:[],
                currentPage:1,
                pageSize:10,
                coloumList:[
                    {
                        prop:"RN",
                        label:"序号",
                        width:80
                    },
                    {
                        prop:"RESOURCE_NAME",
                        label:"资源名称"
                    },
                    {
                        prop:"RESOURCE_TYPE",
                        label:"资源分类"
                    },
                    {
                        prop:"RELEASE_REMARKS",
                        label:"资源简介",
                        width:320
                    },
                    {
                        prop:"AUDIT_STATE",
                        label:"申请状态",
                        sortable:"sortable"
                    },
                    {
                        prop:"USERNAME",
                        label:"申请人"
                    },
                    {
                        prop:"UNIT_NAME",
                        label:"申请单位"
                    },
                    {
                        prop:"APPLY_TIME",
                        label:"申请时间",
                        sortable:"sortable"
                    }
                ],
                formData:{
                    name:'',
                    type:''
                },
            }
        },mounted(){
            this.commit();
        },methods:{
            handleEdit(index, row) {
                var json_para = {
                    uuid:row["UUID"],
                    type: "apply",
                    apply_uuid:row["APPLY_UUID"]
                };
                localStorage.setItem("JSON_PARA",JSON.stringify(json_para));
                this.$router.push('interfaceBrowseDetails');
                console.log(index, row);
            },
            commit(){
                //this.loading=true;
                selectInterfaceKoolkitApplyPageList(
                    this.formData.name,
                    this.formData.type,
                    localStorage.getItem("zhfx_usercode"),
                    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;
                this.tableData=[];
                if(dataArr.length > 0){
                    for(let i=0;i<dataArr.length;i++){
                        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;
                        }

                        switch (dataArr[i]["AUDIT_STATE"]) {
                            case "1":
                                dataArr[i]["AUDIT_STATE"] =  "待审核";
                                break;
                            case "2":
                                dataArr[i]["AUDIT_STATE"] =  "审核通过";
                                break;
                            case "3":
                                dataArr[i]["AUDIT_STATE"] =  "审核不通过";
                                break;
                        }
                        if(dataArr[i]["APPLY_TIME"] != null ){
                            dataArr[i]["APPLY_TIME"] = dataArr[i]["APPLY_TIME"].toString().split(".")[0];
                        }

                        this.tableData.push(dataArr[i]);
                    }
                }else{
                    this.loading=false;
                    this.tableData = [];
                }
            }

        }
    }
</script>

<style scoped lang="scss">

    ::v-deep{
        .el-tabs__item{
            color: #fff;
        }
        .el-tabs__item.is-active {
            color: #409EFF !important;
        }
        .el-tabs--card>.el-tabs__header{
            border-bottom: 1px solid rgba(0, 170, 255, 0.8);
        }
        .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
            border-bottom: 1px solid rgba(0, 170, 255, 0.8);
        }
        .el-tabs--card>.el-tabs__header .el-tabs__nav{
            border:1px solid rgba(0, 170, 255, 0.8);
        }
        .el-tabs--card>.el-tabs__header .el-tabs__item{
            border-left:1px solid rgba(0, 170, 255, 0.8);
        }
        .el-table, .el-table__expanded-cell{
            background-color: transparent;
        }
        .el-table th.el-table__cell{
            background-color: transparent;
        }
        .el-table tr{
            background-color: transparent;
        }
        .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
            border-bottom: 1px solid rgba(0, 170, 255, 0.8);
        }
        .el-table thead{
            color: #fff;
        }
        .el-table{
            color: #fff;
            border: 1px solid #00aaff;
        }
        .el-table--border::after, .el-table--group::after, .el-table::before{
            background-color: transparent;
        }
        .el-table tbody tr:hover>td {
            background: rgba(0, 204, 255, 0.7) !important
        }

        .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;
        }
        .el-form-item__label{
            height: 40px;
            line-height: 20px;
        }
    }


    #show-platform{
        width: 100%;
        height:100%;
        overflow: hidden;
    }
    #interfaceBrowse{
        width:100%;
        height: 100%;
        background-color:#061635;
        position: absolute;
        color: white;
        font-size: 14px;

    }

    #querybody{
        width: 96%;
        position:absolute;
        left: 2%;
        top:13%;
        background: rgba(0, 38, 115, 0.6);
        border-radius: 4px;
        color: white;
        font-size: 14px;
        height:86%;
    }
    #querybody_top{
        width:100%;
        height: 80px;
        line-height: 50px;
        font-size: 18px;
        border:1px solid #00aaff;
    }

    #querybody_body{
        margin-top:15px;
        padding: 10px;
        font-size: 16px;
        color: white;
        overflow-y: scroll;/*y轴滚动*/
        height:80%;
        border: 1px solid #00aaff;
    }

    #querybody_body::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }


    #querybody_bottom{
        margin-top:10px;
        width:100%;
        height:10%;
        color: white;
        font-size: 14px;
        broder:1px solid red;
        text-align:center;
    }

    #queryCriteria_select{
        width: 96%;
        height: 40px;
        margin-top: 20px;
        margin-left: 50px;
        color: white;
        font-size: 14px;
        color: #ffffff;
    }

    .search_right{
        width: 100%;
        height: 30px;
        color: #fff;
        font-size: 17px;
        line-height: 17px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

</style>