@using PageAdmin.Utils
@{
    dynamic permissionsSet = ViewBag.PermissionsSet;
    string State = Request.QueryString["state"];
    CurrentUser user = ViewBag.CurrentUser;
    string table = ViewBag.Table;
    IEnumerable<dynamic> fieldData = Html.GetFieldList(table, "list", user, PageAdmin.Common.FromEnum.Member);
    IEnumerable<dynamic> searchFieldListData = Html.GetFieldList(table, "search", user, PageAdmin.Common.FromEnum.Member).Select(c=>new {Name=c.Name,Remark=c.Remark,ValueType=c.ValueType });
    int tableId = ViewBag.TableId;
}
<style>
    .count0 .el-badge__content {display: none}
</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-item>@ViewBag.TableRemark</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <template>
        <el-tabs type="card" v-model="searchInfo.state" v-on:tab-click="tabClick">
            <el-tab-pane label="已审核" name="1"></el-tab-pane>
            <el-tab-pane name="0">
                <span slot="label">
                    <el-badge :value="infoCount.nopass" :class="['count'+infoCount.nopass.toString()]" :max="999">待审核</el-badge>
                </span>
            </el-tab-pane>
            <el-tab-pane name="-1">
                <span slot="label">
                    <el-badge :value="infoCount.returned" :class="['count'+infoCount.returned.toString()]" :max="999" type="info">已退回</el-badge>
                </span>
            </el-tab-pane>
            <el-tab-pane name="-2">
                <span slot="label">
                    <el-badge :value="infoCount.draft" :class="['count'+infoCount.draft.toString()]" :max="999" type="info">草稿</el-badge>
                </span>
            </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 class="item" effect="dark" content="添加内容" placement="bottom-start">
                        <el-button size="small" v-on:click="dialog({title:'内容添加',url:'@Url.ActionUrl("add")?table=@ViewBag.Table',target:'self',shadeClose:false})">添加</el-button>
                    </el-tooltip>
                </td>
                <td align="right">
                    <ui-cascader size="mini" v-model="searchInfo.columnId" placeholder="请选择栏目" :options="columnOptions" :props="{ expandTrigger: 'hover',multiple:false,checkStrictly:false }">
                    </ui-cascader>
                    <el-select size="mini" placeholder="选择搜索字段" v-model="searchInfo.searchField">
                        @foreach (var item in searchFieldListData)
                        {
                            <el-option value="@(item.Name)" label="按@(item.Remark)搜索"></el-option>
                        }
                    </el-select>
                    <el-input v-show="!isDatetime" size="mini" style="width:150px;" placeholder="搜索关键词" v-model="searchInfo.searchKeyword" clearable v-on:clear="loadData"></el-input>
                    <el-date-picker v-show="isDatetime" size="mini" v-model="searchInfo.searchDateRange" 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 fieldId = item.Id;
            int listWords =StringHelper.Format<int>(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" @Html.Raw(field == "Title" ? "class-name=\"fa-eye-hover\"" : "")>
                <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="small" 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" || fieldType == "datapicker")
                    {
                        <span>{{left(@listWords,scope.row["_@field"])}}</span>
                    }
                    else
                    {
                        if (field == "Title")
                        {
                            <a href="javascript:void(0)" v-on:click="searchInfo.columnId=scope.row.ColumnId;loadData()">{{getColumnName(scope.row)}}</a>
                            <a :href="'/e/preview/info?table=@(table)&id='+scope.row.Id" target="_blank">{{left(@listWords,scope.row["@field"])}}</a>
                            <a :href="'/e/preview/info?table=@(table)&id='+scope.row.Id" target="_blank" title="预览"><span class="el-icon-view"></span></a>
                        }
                        else
                        {
                            <span>{{left(@listWords,scope.row["@field"])}}</span>
                        }
                    }
                </template>
            </el-table-column>
        }
      
        <el-table-column align="center" label="状态&属性" width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <span :style="{color:getColor(scope.row.State)}">{{scope.row.State | stateName}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>信息Id：{{scope.row.Id}}</el-dropdown-item>
                        <el-dropdown-item>上线状态：{{scope.row.IsOnline==1?"已上线":"未上线"}}</el-dropdown-item>
                        <el-dropdown-item>过期状态：{{scope.row.IsExpire==1?"已过期":"未过期"}}</el-dropdown-item>
                        <el-dropdown-item>带缩略图：{{scope.row.HasThumbnail==1?"是":"否"}}</el-dropdown-item>
                        <el-dropdown-item><span>点击数量：{{scope.row.Clicks}}</span></el-dropdown-item>
                        <el-dropdown-item>推荐级别：{{scope.row.IsGood}}</el-dropdown-item>
                        <el-dropdown-item><span>置顶级别：{{scope.row.IsTop}}</span></el-dropdown-item>
                        <el-dropdown-item><span>热门级别：{{scope.row.IsHot}}</span></el-dropdown-item>
                        <el-dropdown-item>发布来源：{{scope.row.PublishFrom==0?"后台发布":""}}{{scope.row.PublishFrom==1?"会员发布":""}}{{scope.row.PublishFrom==10?"匿名投稿":""}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

            </template>
        </el-table-column>

        <el-table-column align="center" width="180">
            <template slot-scope="scope">
                <el-button-group>
                    <el-button size="small" v-on:click="dialog({title:'内容编辑',url:'@Url.ActionUrl("Edit")?table=@ViewBag.Table&id='+scope.row.Id,target:'self',shadeClose:false})">修改</el-button>
                    <el-button size="small" v-on:click="submit({url:'@Url.ActionUrl("Recycle")?table=@ViewBag.Table',data:{id:scope.row.Id},confirmMsg:'确定删除吗？',successMsg:'删除成功!',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>

<script type="text/javascript">
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            refreshKey: 0,//解决子组件缓存问题
            selectList:[],
            searchInfo: { state: "1", columnId: "", searchAttr: "", orderBy: "", searchField: "title", searchDateRange:"",searchKeyword: "" },
            infoCount: @Html.Raw(JsonHelper.JsonParse(ViewBag.CountData)),
            dataList: [],
            pageInfo: { PageSize:0, CurrentPage: 1, PageCount: 0, RecordCount: 0 },
            searchFieldListData:@Html.Raw(JsonHelper.JsonParse(searchFieldListData)),
            columnOptions:@Html.Raw(Html.GetColumnTreeJson(tableId, user, PageAdmin.Common.FromEnum.Member)),
            isDatetime: false,
        },
        //过滤器
        filters: {
            stateName: function (state) {
                var stateName = { s1: "已审", s0: "待审", s_1: "已退回", s_2: "草稿" };
                state = state.toString().replace("-", "_");
                return stateName["s" + state];
            },
        },
        methods: {
            left: function (len, txt) {
                if (isNullOrEmpty(txt)) {
                    return "";
                } else {
                    txt = txt.toString();
                }
                if (isNullOrEmpty(len) || len == "0") {
                    return txt;
                } else {
                    return txt.left(len);
                }
            },
            getColumnName: function (rows) {
                var _this = this;
                var columnId = rows.ColumnId;
                function findColumn(columnOptions) {
                    if (!Array.isArray(columnOptions)) {
                        return null;
                    }
                    for (var i = 0; i < columnOptions.length; i++) {
                        var item = columnOptions[i];
                        var child = item.children;
                        if (item.value == columnId) {
                            return item.label;
                        }
                        else {
                            var name = findColumn(child);
                            if (!isNullOrEmpty(name)) {
                                return name;
                            }
                        }
                    }
                }
                var columnName = findColumn(_this.columnOptions);
                if (!isNullOrEmpty(columnName)) {
                    columnName = "[" + columnName + "]";
                }
                return columnName;
            },
            handleSelectionChange: function (val) {
                this.selectList = val;
            },
            preview: function (table, id) {
                window.open("/e/preview/info?table=" + table + "&id=" + id, "_preview");
            },
            tabClick: function(tab, event) {
               loadData(true);
            },
            getColor: function (state) {
                var color = { s1: "#333", s0: "#E6A23C", s_1: "#F56C6C", s_2: "#999" };
                state = state.toString().replace("-", "_");
                return color["s" + state];
            },
            loadData: function () {
                loadData();
            },
            htmlEncode: function (title) {
                return htmlEncode(title)
            },
        },
        watch: {
            "searchInfo.columnId": {
                handler: function (newTableId, oldTableId) {
                    if (newTableId != oldTableId) {
                        this.loadData();
                    }
                },
            },
            "searchInfo.searchField": {
                handler: function (newData, oldData) {
                    var _this = this;
                    var isdataTime = false;
                    if (newData != oldData) {
                        var includeName = false;
                        _this.searchFieldListData.some(function (item, index) {
                            if (item.Name == newData) {
                                if (item.ValueType == "datetime") {
                                    isdataTime = true;
                                } else {
                                    isdataTime = false;
                                }
                                includeName = true;
                                return includeName;
                            }
                        });
                        _this.isDatetime = isdataTime;
                        if (isdataTime) {
                            _this.searchInfo.searchKeyword = "";
                        }
                        else {
                            _this.searchInfo.searchDateRange = "";
                        }
                    }
                },
                immediate: true,
                deep: true
            },
        }
    });
            //加载数据
  function loadData(reCount)
      {
        var serverData = extend(vue.searchInfo, vue.pageInfo);
        vue.ajax({
            url: "@Url.ActionUrl("PageListData")?table=@ViewBag.Table",
            data: serverData,
            success: function (responseData) {
                if (!isNullOrEmpty(responseData))
                {
                    vue.refreshKey++;
                    vue.dataList = responseData.Data;
                    vue.pageInfo = responseData.PageInfo;
                    if (reCount)
                    {
                        getCount();
                    }
                }
            }
        });
    }
   //统计信息,tab选项卡触发
    function getCount()
    {
        vue.ajax({
            url: "@Url.ActionUrl("GetCount")?table=@ViewBag.Table",
            data:{},
            success: function (responseData) {
                if (!isNullOrEmpty(responseData))
                {
                    vue.infoCount = responseData;
                }
            }
        });
    }
   loadData();
</script>