<style>
    .form-control.ui-queryString option {
        padding: 5px;
    }
</style>

<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i>附件表管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>


    <template>
        <el-tabs type="card" v-model="searchData.state" v-on:tab-click="tabClick">
            <el-tab-pane label="使用中" name="1"></el-tab-pane>
            <el-tab-pane label="已废弃" name="0"></el-tab-pane>
        </el-tabs>
    </template>

    <div class="menu-bar-box">
        <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
            <tr>
                <td>
                        <el-tooltip effect="dark" content="添加附件表" placement="bottom-start">
                            <el-button size="small" v-on:click="dialog({title:'添加',url:'@Url.ActionUrl("Add")',width:'60%',height:'60%',target:'self'})">
                                添加
                            </el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="清理冗余数据，释放数据空间" placement="bottom-start">
                            <el-button size="small" v-on:click="clearAll">一键清理冗余数据</el-button>
                        </el-tooltip>
                </td>
                <td align="right">
                    <el-select size="mini" v-model="searchData.searchField">
                        <el-option value="name" label="按表名搜索"></el-option>
                        <el-option value="remark" label="按备注搜索"></el-option>
                        <el-option value="parentTable" label="按父级表名搜索"></el-option>
                    </el-select>
                    <el-input size="mini" style="width:150px;" placeholder="搜索关键词" v-model.trim="searchData.searchKeyword" clearable v-on:clear="loadData"></el-input>
                    <el-button size="mini" onclick="loadData()">确定</el-button>
                </td>
            </tr>
        </table>
    </div>


    <table border=0 cellpadding=0 cellspacing=0 class="table table-bordered form-inline form-group-sm" id="tb_list">
        <thead>
            <tr>
                <td align="center" rowspan="2">附件表</td>
                <td align="center" rowspan="2">父级表</td>
                <td align="center" rowspan="2">备注</td>

                <td align="center" rowspan="2">创建日期</td>
                <td align="center" colspan="3">统计</td>
                <td align="center" rowspan="2">数据</td>
                <td align="center" rowspan="2">管理</td>
            </tr>
            <tr>
                <td align="center">使用中</td>
                <td align="center">未使用</td>
                <td align="center">已冗余</td>
            </tr>
        </thead>
        <tr class="item list-template-item" v-for="(dataItem) in dataList">
            <td align="center">{{dataItem.Name}}</td>
            <td align="center">{{dataItem.ParentTable}}</td>
            <td align="center">{{dataItem.Remark}}</td>
            <td align="center">{{dataItem.Thedate}}</td>
            <td align="center">{{dataItem.DataCount.Using}}</td>
            <td align="center">{{dataItem.DataCount.Nousing}}</td>
            <td align="center"><span>{{dataItem.DataCount.Deleted}}</span></td>
            <td align="center">
                <el-button-group>
                    <el-button size="small" v-on:click="dialog({title:dataItem.Name+'-附件管理',url:'@Url.ActionUrl("Index","AttachmentDataAdmin")?parentTable='+dataItem.ParentTable+'&table='+dataItem.Name,width:'95%',height:'95%'})">管理数据</el-button>
                    <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("ClearInvalidData","AttachmentDataAdmin")',data:{table:dataItem.Name},confirmMsg:'是否确定此操作？',successMsg:'已经提交,请等待处理！',callback:''})">清理冗余</el-button>
                </el-button-group>
            </td>
            <td align="center">
                <el-button-group>
                    <el-button size="small" v-on:click="dialog({title:dataItem.Remark==''?dataItem.Name:dataItem.Remark,url:'@Url.ActionUrl("Edit")?id='+dataItem.Id,width:'750px',height:'60%'})">修改</el-button>
                    <el-button size="small" v-show="dataItem.State==0" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{id:dataItem.Id},confirmMsg:'确定删除吗？',success:function(){loadData()}})">删除</el-button>
                </el-button-group>
            </td>
        </tr>
    </table>
    <ui-page-panel v-model="pageInfo" v-on:change="loadData" v-if="pageInfo.RecordCount>0"></ui-page-panel>
</div>

<script type="text/javascript">
        //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            searchData: {state:"1",showCount:1,searchField:"name",searchKeyword:""},
            pageInfo: { PageSize: 15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            dataList:[],
        },
       methods: {
           loadData: function () {
                loadData();
           },
           tabClick: function(tab, event) {
                //this.searchData.state = tab.name;
                this.loadData();
           },
           clearAll: function ()
           {
                this.submit({ url: "@Url.ActionUrl("ClearAllInvalid")", successMsg: '已提交,后台正在处理中!' });
           },
        }
    });

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