@using PageAdmin.Utils;
@using PageAdmin.Common;
@{
    int isTabIframe = StringHelper.Format<int>(Request.QueryString["isTabIframe"]);
    int parentId = ViewBag.ParentId;
    string parentGuid = ViewBag.parentGuid;
    int fieldId = ViewBag.FieldId;
    string subTable = ViewBag.Table;
    CurrentUser currentUser = ViewBag.CurrentUser;
    dynamic parentFieldData = ViewBag.FieldData;
    IEnumerable<dynamic> fieldData = Html.GetFieldList(subTable, "list", currentUser, (FromEnum)ViewBag.From,true);
    IEnumerable<dynamic> allfieldListData = Html.GetFieldList(subTable, "", currentUser, (FromEnum)ViewBag.From);
    string parentField = StringHelper.FirstCharUpper(parentFieldData.Name);
    string order = parentFieldData.Orderby;
    int pageSize = parentFieldData.Pagesize;
}
<div class="main" id="main" v-cloak>
    <div class="menu-bar-box">
        <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
            <tr>
                <td>
                    <el-button-group>
                        <el-tooltip effect="dark" content="添加内容" placement="bottom-start">
                            <el-button size="mini" type="button" v-on:click="dialog({title:'内容添加',url:'@Url.ActionUrl("Add")?fieldId=@fieldId&parentGuid=@parentGuid&parentId=@parentId',width:'95%',height:'95%',target:'self'})">添加</el-button>
                        </el-tooltip>
                        <el-button size="mini" v-on:click="submit({url:'@Url.ActionUrl("Delete")?fieldId=@(fieldId)',data:{id:getSelectedPropertys(selectList,'Id'),fieldId:@fieldId,},confirmMsg:'确定删除吗？',success:function(){loadData()},successMsg:'删除成功',beforeExecute:function(){return checkSelectedItems(selectList)},})">删除</el-button>
                    </el-button-group>
                </td>
                <td align="right">
                    <el-select size="mini" placeholder="选择排序方式" v-model="searchInfo.orderBy" clearable v-on:change="loadData">
                        <el-option value="id desc" label="按id↓"></el-option>
                        <el-option value="id asc" label="按id↑"></el-option>
                        @foreach (var item in allfieldListData.Where(c => c.OrderItem == 1))
                        {
                            <el-option value="@(item.Name) desc" label="按@(item.Remark)↓"></el-option>
                            <el-option value="@(item.Name) asc" label="按@(item.Remark)↑"></el-option>
                        }
                    </el-select>
                    <el-select size="mini" placeholder="选择搜索字段" v-model="searchInfo.searchField">
                        @foreach (var item in allfieldListData.Where(c => c.SearchType != ""))
                        {
                            <el-option value="@(item.Name)" label="按@(item.Remark)搜索"></el-option>
                        }
                        <el-option value="username" label="按用户名搜索"></el-option>
                    </el-select>
                    <el-input v-if="!isDatetime" size="mini" style="width:150px;" placeholder="搜索关键词" v-model="searchInfo.searchKeyword" clearable v-on:clear="loadData"></el-input>
                    <el-date-picker v-if="isDatetime" size="mini" v-model="searchInfo.searchKeyword" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    <el-button size="mini" v-on:click="loadData">搜索</el-button>
                </td>
            </tr>
        </table>
    </div>

    <el-table :data="dataList" row-key="Id"  tooltip-effect="dark" border highlight-current-row style="width:100%"  v-on:selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="40"> </el-table-column>
        @foreach (var item in fieldData)
        {
            int listWords = item.ListWords;
            string remark = item.Remark;
            string field = StringHelper.FirstCharUpper(item.Name);
            string fieldType = item.FieldType;
            string valueType = item.ValueType;
            string width = item.ListWidth;
            if (!string.IsNullOrEmpty(width) && width != "0")
            {
                width = " width=\"" + width + "\" ";
            }
            else
            {
                width = "";
            }
            <el-table-column align="left" label="@remark" @Html.Raw(width) :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    @if (new string[] { "subtable" }.Contains(fieldType))
                    {
                        string subTableType = item.SubTableType;
                        string bt_text = StringHelper.Format<string>(item.BtText);
                        string win_width = StringHelper.Format<string>(item.WinWidth);
                        string win_height = StringHelper.Format<string>(item.WinHeight);
                        <span>
                            <el-button size="mini" v-on:click="dialog({title:'@(remark)',url:'/E/SubData/@(subTableType=="multiple"?"":"Set")?parentId='+scope.row.Id+'&fieldId=@fieldId',width:'@win_width',height:'@win_height',target:'self'})">@(bt_text)</el-button>
                        </span>
                    }
                    else if (fieldType == "image" || fieldType == "images")
                    {
                        <ui-list-attachment-display display-type="image" :file-list="scope.row.@field" :key="refreshKey"></ui-list-attachment-display>
                    }
                    else if (fieldType == "file" || fieldType == "files")
                    {
                        <ui-list-attachment-display display-type="file" :file-list="scope.row.@field" :key="refreshKey"></ui-list-attachment-display>
                    }
                    else if(fieldType == "radio" || fieldType == "checkbox" || fieldType == "select" || fieldType == "cascader")
                    {
                        <span>{{scope.row["_@field"]}}</span>
                    }
                    else
                    {
                        <span>{{scope.row.@field}}</span>
                    }
                </template>
            </el-table-column>
        }
        <el-table-column align="center" label="用户名" prop="Username" width="160" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column align="center" label="状态" width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{stateName(scope.row.State)}}
            </template>
        </el-table-column>
        <el-table-column align="center" label="管理" width="180" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <el-button-group>
                    <el-button size="mini" v-on:click="dialog({title:'内容编辑',url:'@Url.ActionUrl("Edit")?fieldId=@fieldId&id='+scope.row.Id,width:'95%',height:'95%',target:'self',shadeClose:false})">修改</el-button>
                    <el-button size="mini" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{fieldId:@fieldId,id:scope.row.Id,guid:scope.row.Guid},confirmMsg:'确定删除吗？',success:function(){loadData()}})" class="btn btn-default">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <ui-page-panel v-model="pageInfo" v-on:change="loadData" v-if="pageInfo.RecordCount>0"></ui-page-panel>
    <div class="footer-submit-bar" style="padding-left:20px" v-show="@isTabIframe==0">
        <el-button onclick="closeSelf()">关闭</el-button>
    </div>
</div>

<script type="text/javascript">
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            refreshKey:0,
            selectList:[],
            searchInfo: {parentId:"@parentId",parentGuid:"@parentGuid",orderBy:"",searchField:"username",searchKeyword:""} ,
            dataList: [],
            pageInfo: { PageSize: @pageSize, CurrentPage: 0, PageCount: 0, RecordCount: 0 },
            allfieldListData:@Html.Raw(JsonHelper.JsonParse(allfieldListData.Where(c => c.SearchType != ""))),
            isDatetime: false,
        },
        //过滤器
        methods: {
            stateName: function (state) {
                var stateName = { s1: "已审", s0: "待审"};
                state = state.toString().replace("-", "_");
                return stateName["s" + state];
            },
            handleSelectionChange: function (val) {
                this.selectList = val;
                console.log(this.selectList);
            },
            loadData: function () {
                loadData();
            }
        },
        //计算属性
        computed: {},
        watch: {
            "searchInfo.searchField": {
                handler: function (newData, oldData) {
                    var _this = this;
                    if (newData != oldData) {
                        if (newData == "username") {
                            _this.isDatetime = false;
                        } else {
                            _this.allfieldListData.some(function (item, index) {
                                if (item.Name == newData) {
                                    if (item.ValueType == "datetime") {
                                        _this.isDatetime = true;
                                    } else {
                                        _this.isDatetime = false;
                                    }
                                    return true;
                                }
                            });
                        }
                        _this.searchInfo.searchKeyword = "";
                    }
                },
                immediate: true,
                deep: true
            },
        }
    });
        //加载数据
    function loadData()
    {
        var serverData = extend(vue.searchInfo,vue.pageInfo);
        vue.ajax({
            url: "@Url.ActionUrl("PageListData")?fieldId=@fieldId",
            data: serverData,
            success: function (responseData) {
                if (responseData != "")
                {
                    vue.refreshKey++;
                    vue.dataList = responseData.Data;
                    vue.pageInfo = responseData.PageInfo;
                    vue.selectedIds = [];
                }
            }
        });
    }
    loadData();
</script>
