{extend name="vue_layout/main" /}
{block name="styles"}
<style>
    .Va-container-content {
        height: 72vw;
    }

    .icons-type-list {
        width: 350px;
        overflow: hidden;
        padding: 0;
    }

    .icons-type-one {
        border-radius: unset !important;
        border: 1px solid #ccc;
        padding: 10px 10px;
        margin: 2px;
    }

    .icons-type-list .icons-type-one.is-checked {
        border: 1px solid var(--buttonHoverColors);
    }
</style>
{/block}

<!-- 主体 -->
{block name="content"}
<div class="form-container" style="overflow: hidden">
    <div class="form-container-header">
        <el-form :inline="true" :model="tables.search" size="small">
            <el-form-item>
                <el-input v-model="tables.search.keyword" placeholder="按昵称|手机号关键词搜索" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="tables.search.gender" placeholder="-- 按性别搜索 --" clearable>
                    <el-option label="状态(全部)" value=""></el-option>
                    <el-option key="0" label="女" value="0"></el-option>
                    <el-option key="1" label="男" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="small" @click="tablesSearchEvent"><i class="fa fa-search"></i> 搜 索
                </el-button>
                <el-button size="small" @click="tablesResetsEvent"><i class="fa fa-refresh"></i> 重 置</el-button>
            </el-form-item>

        </el-form>
    </div>
    <div class="form-container-main inline-tables no-pic" v-loading="tables.options.loading">
        <el-table
                :data="tables.data"
                border
                :stripe="true"
                @selection-change="tablesSelectChange"
                @sort-change="tablesPaginationSortChange"
                @cell-click="tablesCellMoveEvent"
                tooltip-effect="dark"
                ref="formContainerTables"
                row-key="id">
            <el-table-column prop="id" label="#ID" align="center" min-width="60"></el-table-column>
            <el-table-column prop="avatar" label="头像" align="center" min-width="80">
                <template slot-scope="scope">
                    <va-image :src="scope.row.avatar" :key="scope.row.avatar" class="tables-image"></va-image>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>

            <el-table-column prop="gender" label="性别" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.gender == 0" size="mini" type="danger" effect="plain">女</el-tag>
                    <el-tag v-if="scope.row.gender == 1" size="mini" type="success" effect="plain">男</el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="birthday" label="生日" align="center"></el-table-column>
            <el-table-column prop="money" label="金额" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" effect="plain">￥{{scope.row.money}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间" align="center" :formatter="formatTableDate" min-width="160" sortable></el-table-column>

            <el-table-column prop="options" label="操作" align="left" fixed="right" width="160">
                <template slot-scope="scope">
                    <el-button size="mini" warning type="text" @click="tablesRowsUpdate(scope.row)" v-if="permissions.update">
                        <i :class="permissions.update.icon"></i> {{permissions.update.name}}
                    </el-button>
                    <!-- 更多操作 -->
                    <el-dropdown size="small" style="margin-left: 10px">
                        <el-button size="mini" primary type="text"><i class="fa fa-reorder "></i> 更多操作<i
                                class="el-icon-arrow-down el-icon--right"></i></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-if="permissions.status">
                                <el-button size="mini" warning type="text"
                                           @click="tablesRowsStatus(scope.row,{id:scope.row.id})"
                                           v-if="permissions.status" :disabled="scope.row.is_system==1">
                                    <i :class="permissions.status.icon"></i>
                                    {{tables.status.maps[scope.row.status]}}
                                </el-button>
                            </el-dropdown-item>

                            <el-dropdown-item v-if="permissions.remove">
                                <el-button size="mini" danger type="text" @click="tablesRowsRemove(scope.row)"
                                           v-if="permissions.remove" :disabled="scope.row.is_system==1">
                                    <i :class="permissions.remove.icon"></i> {{permissions.remove.name}}
                                </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- 更多操作 End. -->
                </template>
            </el-table-column>
        </el-table>
        <div class="Va-container-tables-pagination-box">
            <el-pagination
                    class="Va-container-tables-pagination"
                    @size-change="tablesPaginationSizeChange"
                    @current-change="tablesPaginationCurrentChange"
                    :current-page.sync="tables.pagination.page"
                    :page-sizes="tables.pagination.sizes"
                    :page-size="tables.pagination.size"
                    :layout="tables.pagination.layouts"
                    :total="tables.pagination.total"
                    data-7512a93d>
            </el-pagination>
        </div>
    </div>
</div>
{/block}

<!-- vue -->
{block name="scripts"}
<script>
    var $App = new Vue({
        el: '#app',
        mixins: [$Config, $Layouts, $Tables, $DialogForms],
        data: {
            menuRule:'vue_demo',
            component: {status: false},
            config: {permissions: true},
            tables: {
                remove: {
                    url: 'remove', msg: '确认删除当前数据吗？', field: 'id'
                },
                status: {
                    url: 'status', field: 'status'
                },
                sort: {
                    url: 'rank', item: 'sort', field: 'id'
                },
                url: 'vue_demo',
                search: {},
                pagination: {
                    layout: ''
                },
                prop: 'id', orderBy: 'desc'
            },

        },
        methods: {
            tablesRowsInsert() {
                var that = this;
                that.create.action = 'insert';
                that.create.model = {name: '', sort: 255};
                that.dialogFormsOpens('create');
            },

            tablesRowsUpdate(rows) {
                var that = this;
                that.create.action = 'update';
                that.create.model = {
                    id: rows.id,
                    name: rows.name,
                    sort: rows.sort,
                };
                that.dialogFormsOpens('create');
            },

            tablesResetsEvent() {
                var that = this;
                that.tables.search = {};
                that.tablesGetTableList();
            },
        },
        created() {
        },
        mounted() {
        }
    })
</script>
{/block}