<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="24" v-show="show">
                            <el-form-item>
                                <el-button type="primary" round icon="el-icon-plus" @click="create(null)"
                                    >新建</el-button
                                >
                                <el-button type="info" plain round>批量删除</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="SearchTitle">
                已选择
                <span class="subject-color">4</span> 项
            </div>

            <div class="MaintenanceTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="selectionChange"
                    class="OutTable"
                    border
                    v-loading="listLoading"
                >
                    <el-table-column type="selection"></el-table-column>
                    <!-- <el-table-column prop="ProjectCode" label="项目编号"></el-table-column> -->
                    <el-table-column prop="level" label="等级" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="vip_cost" label="金额" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="vip_commission_1" label="启用状态">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.statuz"
                                active-text="开"
                                inactive-text="关"
                                :active-value="1"
                                :inactive-value="0"
                            ></el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain round v-show="show">删除</el-button>
                            <el-button size="mini" type="primary" plain round @click="edit(scope.row)" v-show="show">编辑</el-button>
                            <el-button size="mini" type="primary" plain round v-show="!show">审批</el-button>
                            <slot></slot>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagenation">
                    <PageComponent
                        :total="total"
                        @pagination="handlePagination"
                        :pageSize.sync="page.pageSize"
                        :pageNum.sync="page.pageNum"
                    ></PageComponent>
                </div>
            </div>
        </div>
        <addEditDialog @queryListData="queryListData" ref="addEditVisible"></addEditDialog>
    </div>
</template>
<script>
    import TitleBar from '@/apps/mobile/components/common/TitleBar';
    import addEditDialog from './components/addEditDialog';
    export default {
        components: {
            TitleBar,
            addEditDialog,
        },
        data() {
            return {
                tableData: [
                    {
                        level: '普通用户',
                        vip_cost: '200',
                        vip_commission_1: '2%',
                        vip_commission_2: '1%',
                    },
                    {
                        level: 'vip用户',
                        vip_cost: '300',
                        vip_commission_1: '2%',
                        vip_commission_2: '1%',
                    },
                    {
                        level: 'svip用户',
                        vip_cost: '400',
                        vip_commission_1: '3%',
                        vip_commission_2: '3%',
                    },
                ], // 列表数据
                page: {
                    // 页码
                    pageNum: 1,
                    pageSize: 10,
                },
                total: 10,
                listLoading: false, // table是否展示loading
                show: 1,
            };
        },
        methods: {
            selectionChange() {},
        // 页码变化时
        handlePagination(val) {
            // console.log(val, 'handlePagination');
            this.page = val;
            this.queryListData();
        },
            queryListData() {},
            create() {
                this.$refs.addEditVisible.open('add');
            },
            edit(data) {
                this.$refs.addEditVisible.open('edit', data);
            },
            // 仅在审批页面调用
            changeShow() {
                this.show = 0;
            },
        },
    };
</script>
<style lang="stylus" scoped>
    .TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
      width: 95%;
    }
</style>
