<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="4">
              <el-form-item>
                <el-button type="primary" round>查询</el-button>
                <el-button type="info" plain round>重置</el-button>
              </el-form-item>
                        </el-col>-->
                        <el-col :span="24" v-if="show">
                            <el-form-item>
                                <el-button
                                    type="primary"
                                    round
                                    icon="el-icon-plus"
                                    @click="create(null)"
                                >新建</el-button>
                                <el-button type="primary" plain round @click="deleteData(null)">批量删除</el-button>
                            </el-form-item>
                        </el-col>
                    </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="roleName" label="app用户类型" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="一级返利" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.rebate1 | toPercent }}</template>
                    </el-table-column>
                    <el-table-column label="二级返利" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.rebate2 | toPercent }}</template>
                    </el-table-column>
                    <el-table-column label="审批状态" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span class="warn" v-show="scope.row.examineFlag == 0">待审核</span>
                            <span class="success" v-show="scope.row.examineFlag == 1">审核通过</span>
                            <RejectReason
                                :content="scope.row.notExamineReason"
                                v-show="scope.row.examineFlag == 2"
                            ></RejectReason>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="160px;">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="show"
                                @click="deleteData(scope.row)"
                            >删除</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="show"
                                :disabled="scope.row.examineFlag == 1"
                                @click="edit(scope.row)"
                            >编辑</el-button>
                            <slot></slot>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="!show"
                                @click="pass(scope.row.id)"
                            >通过</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="!show"
                                @click="rejectShow(scope.row.id)"
                            >驳回</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="show"
                                @click="showMemberFee(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 @queryListData="queryListData" ref="addEditVisible"></addEditDialog>
        <!-- 驳回弹窗 -->
        <RejectDialog @isReject="isReject" ref="regectDialog"></RejectDialog>
        <!-- 会费弹层 -->
        <MemberFeeDialog ref="memberFeeDialog"></MemberFeeDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import addEditDialog from './components/addEditDialog';
import MemberFeeDialog from './components/memberFeeDialog';
import RejectReason from '@/apps/mobile/components/ReasonForRejection/index';
import RejectDialog from '@/apps/mobile/components/reject/index';
import {
    queryRebateRuleList,
    rebateRuleBatchDelete,
    rebateRuleDeleteById,
    rebateRuleExamine,
} from '@/apps/mobile/api/operation/rebate/index';
export default {
    components: {
        TitleBar,
        addEditDialog,
        RejectDialog,
        RejectReason,
        MemberFeeDialog,
    },
    data() {
        return {
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            listLoading: false,
            show: 1,
            ids: [],
            selection: [],
        };
    },
    created() {
        this.$nextTick(() => {
            this.queryListData();
        });
    },
    methods: {
        create() {
            this.$refs.addEditVisible.open('add');
        },
        edit(data) {
            this.$refs.addEditVisible.open('edit', data);
        },
        selectionChange(data) {
            this.selection = data;
            this.ids = data.map(item => {
                return item.id;
            });
        },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        queryListData() {
            this.listLoading = true;
            let obj = {
                examineFlag: this.show === 0 ? 0 : null,
                ...this.page,
                ...this.searchForm,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryRebateRuleList(obj)
                .then(res => {
                    if(res.statusCode == "10"){
                        this.$router.replace("/login");
                    }
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        showChange() {
            this.show = 0;
        },
        // 驳回弹框
        rejectShow(id) {
            this.$refs.regectDialog.open(id);
        },
        // 审核通过
        pass(id) {
            this.$confirm('是否通过审批?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let obj = {
                        id,
                        examineFlag: 1,
                    };
                    this.approval(obj);
                })
                .catch(() => {});
        },
        // 审批
        approval(data) {
            rebateRuleExamine(data).then(res => {
                if (res.statusCode === '1') {
                    this.$message.success(res.message);
                } else {
                    this.$message.warning(res.message);
                }
                this.queryListData();
            });
        },
        // 驳回
        isReject(data) {
            let obj = {
                id: data.id,
                notExamineReason: data.checkComment,
                examineFlag: 2,
            };
            this.approval(obj);
        },
        deleteData(data) {
            console.log(data);
            if (data) {
                this.$confirm('确定要删除该规则吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.deleteHandle({ids: [data.id]});
                    })
                    .catch(() => {});
            } else {
                if (this.ids.length === 0) {
                    this.$message.warning('请先选择一项！');
                    return false;
                }
                // const ids = this.selection.filter(item => {
                //     return item.examineFlag === 1;
                // });
                // const arr = ids.map(item => {
                //     return item.id;
                // });
                // if (arr.length === 0) {
                //     this.$message.warning('请至少选中一项审核通过的!');
                //     return false;
                // }
                this.deleteHandle({ids: this.ids});
            }
        },
        deleteHandle(ids) {
            rebateRuleBatchDelete(ids)
                .then(res => {
                    if (res.statusCode === '1') {
                        this.$message.success('删除成功');
                    } else {
                        this.$message.warning(res.message);
                    }
                    this.queryListData();
                })
                .catch(() => {});
        },
        showMemberFee(data) {
            this.$refs.memberFeeDialog.open(data.roleId);
        },
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}

.authority {
    margin-top: 10px;

    .el-dropdown-link {
        color: #409EFF;
        cursor: pointer;
    }
}
</style>
