<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-row>
                </el-form>
            </div>
            <div class="SearchTitle">
                已选择
                <span class="subject-color">{{ ids.length }}</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="name" label="等级名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="period" label="有效期(月)" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column prop="examineFlag" label="审核状态">
                        <template slot-scope="scope">
                            <span class="warn" v-show="scope.row.examineFlag == 0">待审核</span>
                            <span class="success" v-show="scope.row.examineFlag == 1">审核通过</span>
                            <span class="warn" v-show="scope.row.examineFlag == 2">驳回</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="createTime">
                        <template slot-scope="scope">{{ scope.row.createTime | formatTimePipe }}</template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="120px;">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="pass(scope.row)"
                            >通过</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="reject(scope.row)"
                            >驳回</el-button>
                        </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 ref="addEditDialog" @queryListData="queryListData"></AddEditDialog>
        <!-- 驳回 -->
        <RejectionDialog ref="rejectionDialog" @queryListData="queryListData"></RejectionDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import { queryMemberFeeList, memberFeeApprove } from '@/apps/mobile/api/memberFee/index';
import AddEditDialog from './components/addEditDialog';
import RejectionDialog from './components/rejectionDialog';
export default {
    components: {
        TitleBar,
        AddEditDialog,
        RejectionDialog,
    },
    data() {
        return {
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            listLoading: false,
            ids: [],
        };
    },
    created() {
        this.queryListData();
    },
    methods: {
        queryListData() {
            let obj = {
                ...this.page,
                ...this.searchForm,
                examineFlag: 0,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryMemberFeeList(obj)
                .then(res => {
                    console.log(res);
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        selectionChange(data) {
            this.ids = data.map(item => {
                return item.id;
            });
        },
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        pass(data) {
            console.log(data);
            this.$confirm('确定要审核通过吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let obj = {
                        examineFlag: 1,
                        id: data.id,
                    };
                    memberFeeApprove(obj)
                        .then(res => {
                            if (res.statusCode === '1') {
                                this.$message.success(res.message);
                            } else {
                                this.$message.warning(res.message);
                            }
                            this.queryListData();
                        })
                        .catch();
                })
                .catch(() => {});
        },
        reject(data) {
            this.$refs.rejectionDialog.open(data);
        },
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
</style>
