@{
    Layout = "~/Areas/Admin/Views/_LayoutFramePage.cshtml";
    ViewBag.CurrentMenuId = "#menu_1";
}

<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i><a href="javascript:void(0)" onclick="location.href=location.href">Api管理</a></el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <table border=0 cellpadding=0 cellspacing=0 class="tb-head">
        <tr>
            <td align="right">
                <template>
                    <el-input size="mini" style="width:225px;"  v-model.trim="searchData.searchKeyword" placeholder="请输入Api名称" clearable v-on:clear="loadData()"></el-input>
                    <el-button size="mini" v-on:click="loadData()">搜索</el-button>
                </template>
            </td>
        </tr>
    </table>
    <div class="table-list-box">
        <template>
            <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" highlight-current-row style="width: 100%" border>
                <el-table-column label="Api方法名称(method参数)"  width="500" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      {{scope.row.Name}}
                    </template>
                </el-table-column>
                <el-table-column label="请求类型" align="center" width="100" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      {{scope.row.HttpMethod | formatHttpMethod}}
                    </template>
                </el-table-column>
                <el-table-column label="是否需要签名" width="150" align="center">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="必须添加签名后才能请求！" placement="right">
                            <i class="el-alert__icon el-icon-success" style="color:#67C23A" title="需要验证签名" v-show="scope.row.CheckSignature"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="无需验证签名，可直接通过ajax请求！" placement="right">
                            <i class="el-alert__icon el-icon-error" style="color:#909399" title="需要验证签名" v-show="!scope.row.CheckSignature"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="Remark" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
        </template>
    </div>
    <ui-page-panel v-model="pageInfo" v-if="pageInfo.RecordCount>0" v-on:change="loadData"></ui-page-panel>

    <div class="help-block" style="padding-top:20px"><span class="fa fa-info-circle"></span> 备注：这里只列出通过ApiAttribute特性标注的WebApi。</div>
</div>

<script type="text/javascript">
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            searchData: { searchKeyword: "" },
            pageInfo: { PageSize:20, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            dataList: [],
        },
        filters:{
            formatHttpMethod: function (httpMethod)
            {
                if (httpMethod == "" || httpMethod == null || httpMethod == undefined)
                {
                    httpMethod = "-";
                }
                return httpMethod;
            }
        },
        methods: {
            loadData: function () {
                loadData();
            },
        }
    });

        //加载数据
    function loadData()
    {
        var serverData = extend(vue.pageInfo, vue.searchData);
        vue.ajax({
            url: "@Url.ActionUrl("ApiList")",
            data: serverData,
            success: function (responseData) {
                vue.dataList = responseData.Data;
                vue.pageInfo = responseData.PageInfo;
            }
        });
    }
    loadData();
</script>