<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入手机号" v-model="searchForm.mobile"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入昵称" v-model="searchForm.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入真实姓名" v-model="searchForm.realName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select placeholder="请选择专家等级" v-model="searchForm.expertLevel">
                                    <el-option label="一级" :value="1"></el-option>
                                    <el-option label="二级" :value="2"></el-option>
                                    <el-option label="三级" :value="3"></el-option>
                                    <el-option label="四级" :value="4"></el-option>
                                    <el-option label="五级" :value="5"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select placeholder="请选择状态" v-model="searchForm.statuz">
                                    <el-option label="开" :value="1"></el-option>
                                    <el-option label="关" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" round @click="querySearch">查询</el-button>
                                <el-button type="primary" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item>
                                <el-button
                                    type="primary"
                                    round
                                    icon="el-icon-plus"
                                    @click="showAddEditDialog(null)"
                                >新建</el-button>
                                <!-- <el-button type="primary" plain round>处罚</el-button> -->
                                <!-- <el-button type="primary" plain round>发红包</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">{{tableSelection.length}}</span> 项
            </div>

            <div class="MaintenanceTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="selectColumn"
                    class="OutTable"
                    border
                    v-loading="listLoading"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="mobile" label="手机号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="name" label="昵称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="realName" label="真实名" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column
                        prop="proficiencyBrandName"
                        label="擅长品牌"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column prop="expertLevel" label="专家等级">
                        <template slot-scope="scope">
                            <span v-if="scope.row.expertLevel == 1">一级</span>
                            <span v-if="scope.row.expertLevel == 2">二级</span>
                            <span v-if="scope.row.expertLevel == 3">三级</span>
                            <span v-if="scope.row.expertLevel == 4">四级</span>
                            <span v-if="scope.row.expertLevel == 5">五级</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="serviceFee" label="服务费"></el-table-column>
                    <el-table-column prop="statuz" label="状态" min-width="110px;">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.statuz"
                                active-text="开"
                                inactive-text="关"
                                :active-value="1"
                                :inactive-value="0"
                                @change="changeSwitch(scope.row)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="专家标签">
                        <template slot-scope="scope">
                        <span class="success" v-if="scope.row.platformInvitedFlag == 0">特邀专家</span>
                        <span v-else>普通专家</span>                            
                        </template>
                    </el-table-column>
                    <el-table-column prop="levelTotalScore" label="总评分">
                        <template slot-scope="scope">
                            <span>{{scope.row.levelTotalScore || 0}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="460px;">
                        <template slot-scope="scope">
                            <!-- <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="deleteData(scope.row)"
                            >删除</el-button>-->
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="showAddEditDialog(scope.row)"
                            >编辑</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="scope.row.platformInvitedFlag !== 0"
                                @click="certifiedExpert(scope.row.userId)"
                            >认证</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="scope.row.platformInvitedFlag === 0"
                                @click="cancelCertified(scope.row.userId)"
                            >取消认证</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="kickOutExpert(scope.row.userId)"
                            >踢出</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="redEnvelopeAndPunishment(scope.row.userId,1)"
                            >处罚</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="redEnvelopeAndPunishment(scope.row.userId,2)"
                            >发红包</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="showDetails(scope.row)"
                            >详情</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="viewRebates(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>
        <!-- 发红包弹层 -->
        <RewardPunishmentDialog ref="rewardPunishmentDialog" @queryListData="queryListData"></RewardPunishmentDialog>
        <!-- 详情弹层 -->
        <DetailsDialog ref="detailsDialog"></DetailsDialog>
        <!-- 分销返利 -->
        <RebateDialog ref="rebateDialog"></RebateDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import AddEditDialog from './components/addEditDialog';
import RewardPunishmentDialog from './components/rewardPunishmentDialog';
import DetailsDialog from './components/detailsDialog';
import RebateDialog from './components/rebateDialog';
import { queryExpertList, updateExpert, deleteExpert, queryCouponsList, updateUserExpert } from '@/apps/mobile/api/expert/index';
export default {
    components: {
        TitleBar,
        AddEditDialog,
        DetailsDialog,
        RewardPunishmentDialog,
        RebateDialog,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 10,
            listLoading: false,
            tableSelection: [],
            dialogVisible: false,
        };
    },
    created() {
        this.queryListData();
    },
    methods: {
        queryListData() {
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                expertFlag: 1,
                deleteFlag: 0,
            };
            queryExpertList(obj)
                .then(res => {
                    console.log(res, '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;
                });
        },
        changeSwitch(data) {
            let obj = {
                statuz: data.statuz ? 1 : 0,
                userId: data.userId,
            };
            updateExpert(obj)
                .then(res => {
                    this.queryListData();
                    this.$message({
                        type: 'success',
                        message: '修改成功',
                    });
                })
                .catch();
        },
        deleteData(data) {
            console.log(data);
            if (data) {
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.deleteHandle({ids: [data.id]});
                    })
                    .catch(() => {});
            } else {
                if (this.tableSelection.length === 0) {
                    this.$message({
                        type: 'warning',
                        message: '请先选择一个',
                    });
                    return false;
                }
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        let arr = this.tableSelection.map(item => {
                            return item.id;
                        });
                        this.deleteHandle({ids: arr});
                    })
                    .catch(() => {});
            }
        },
        deleteHandle(arr) {
            deleteExpert(arr)
                .then(res => {
                    console.log(res);
                    this.queryListData();
                    this.$message({
                        type: 'success',
                        message: '删除成功',
                    });
                })
                .catch();
        },
        querySearch() {
            this.page.pageNum = 1;
            this.queryListData();
        },
        reset() {
            this.searchForm = {};
            this.page.pageNum = 1;
            this.queryListData();
        },
        selectColumn(selection) {
            this.tableSelection = selection;
        },
        handSizeChange() {},
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        showAddEditDialog(data) {
            if (data) {
                this.$refs.addEditDialog.open('edit', data);
            } else {
                this.$refs.addEditDialog.open('add');
            }
        },
        // 踢出专家
        kickOutExpert(userId) {
            // todo 目前接口不符合要求，需要重新写
            this.$confirm('此操作会将该用户踢出专家库, 请确定?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    updateUserExpert(userId)
                        .then(res => {
                            this.$message.success('操作成功');
                            this.queryListData();
                        })
                        .catch(err => err);
                })
                .catch(() => {});
        },
        // 认证
        certifiedExpert(userId) {
            this.$confirm('确定将该用户认证为特邀专家吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let obj = {
                        userId,
                        platformInvitedFlag: 0,
                    };
                    this.expertCertification(obj);
                })
                .catch(() => {});
        },
        // 取消认证
        cancelCertified(userId) {
            this.$confirm('确定将该用户改为普通专家吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let obj = {
                        userId,
                        platformInvitedFlag: 1,
                    };
                    this.expertCertification(obj);
                })
                .catch(() => {});
        },
        expertCertification(obj) {
            updateExpert(obj)
                .then(res => {
                    if (res.statusCode === '1') {
                        this.$message.success('操作成功');
                    } else {
                        this.$message.warning(res.message);
                    }
                    this.queryListData();
                })
                .catch(err => err);
        },
        // 发红包与惩罚
        redEnvelopeAndPunishment(id, type) {
            let data = {
                id,
                type,
            };
            this.$refs.rewardPunishmentDialog.open(data);
        },
        viewRebates(data) {
            console.log(data);
            this.$refs.rebateDialog.open(data.userId);
        },
        showDetails(data) {
            this.$refs.detailsDialog.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>

