{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="50"></el-table-column>

            <el-table-column prop="room" label="直播间logo" align="center" min-width="70">
                <template slot-scope="scope">
                    <va-image :src="scope.row.room.logo" :key="scope.row.room.logo" class="tables-image"></va-image>
                </template>
            </el-table-column>

            <el-table-column prop="room" label="直播间名称" align="center" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.room.name}}</span>
                </template>
            </el-table-column>

            <el-table-column prop="goods_no" label="商品序号" align="center"></el-table-column>

            <el-table-column prop="goods" label="商品名称" align="center" min-width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.goods.title}}</span>
                </template>
            </el-table-column>

            <el-table-column prop="goods" label="商品单价" align="center" min-width="100">
                <template slot-scope="scope">
                    <el-tag size="mini" effect="plain">￥{{scope.row.goods.price[0]}}</el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 'down'" size="mini" type="danger" effect="plain">已下架</el-tag>
                    <el-tag v-else size="mini" type="success" effect="plain">已上架</el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="is_top" label="讲解" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.is_top == 1" size="mini" type="success" effect="plain">讲解中</el-tag>
                    <el-tag v-else size="mini" type="info" effect="plain">默认</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" 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.edit">
                        <i :class="permissions.edit.icon"></i> {{permissions.edit.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&#45;&#45;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>
{include file="live_room_goods/forms" /}
{/block}

<!-- vue -->
{block name="scripts"}
<script>
    var $App = new Vue({
        el: '#app',
        mixins: [$Config, $Layouts, $Tables, $DialogForms],
        data: {
            menuRule:'live_room_goods',
            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: 'live_room_goods',
                search: {},
                pagination: {
                    layout: ''
                },
                prop: 'id', orderBy: 'desc'
            },
            create: {
                dialog: false, loading: false, action: '#',
                model: {name: '', sort: 255},
                rules: {
                    title: [
                        {required: true, message: '请填写标题', trigger: 'blur'}
                    ]
                }
            },

        },
        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}