<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="24">
                            <el-form-item>
                                <el-button type="primary" round icon="el-icon-plus" v-if="show" @click="create">新建</el-button>
                                <el-button type="info" plain round v-if="show" @click="deleteData(ids, 'batch')">批量删除</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="ProjectCode" label="项目编号"></el-table-column> -->
                    <el-table-column prop="prerogative" label="特权名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="descr" label="特权描述" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column v-for="item in titleList" :key="item.id" :label="item.name" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <i v-show="scope.row[item.id]" class="el-icon-success vipIco"></i>
                        </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>
                            <span v-show="scope.row.examineFlag == 3">待提交</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="120px">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain round v-if="show" @click="deleteData(scope.row.id)">删除</el-button>
                            <el-button size="mini" type="primary" plain round v-if="show" @click="edit(scope.row)">编辑</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-if="scope.row.examineFlag == 3"
                                @click="submit(scope.row.id)"
                                >提交</el-button
                            >
                            <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
                            >
                        </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>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import { queryPagePrivilege, removeData, editData, examine, submitData } from '@/apps/mobile/api/operation/privilege/index';
// import { queryConst } from '@/apps/mobile/api/tableDicts/index';
import { queryPage } from '@/apps/mobile/api/operation/rule/index';

import addEditDialog from './components/addEditDialog';
import RejectReason from '@/apps/mobile/components/ReasonForRejection/index';
import RejectDialog from '@/apps/mobile/components/reject/index';
export default {
    components: {
        TitleBar,
        addEditDialog,
        RejectReason,
        RejectDialog,
    },
    data() {
        return {
            searchForm: {}, // 搜索表单
            tableData: [
                {
                    prerogative: '查看资料',
                    desc: '这是一段描述，关于这个记录的描述',
                    scenario: [1, 2, 3, 4],
                },
                {
                    prerogative: '下载资料',
                    desc: '这是一段描述，关于这个记录的描述',
                    scenario: [2, 3, 4],
                },
                {
                    prerogative: '题库免费查看',
                    desc: '这是一段描述，关于这个记录的描述',
                    scenario: [3, 4],
                },
                {
                    prerogative: '问诊5折',
                    desc: '这是一段描述，关于这个记录的描述',
                    scenario: [4],
                },
            ], // 列表数据
            page: {
                // 页码
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            listLoading: false, // table是否展示loading
            addEditDialogType: 'add',
            addEditVisible: false,
            addEditForm: {},
            titleList: [],
            show: 1,
            ids: [],
        };
    },
    methods: {
        create() {
            this.$refs.addEditVisible.open(this.titleList, 'add');
        },
        edit(data) {
            this.$refs.addEditVisible.open(this.titleList, 'edit', data);
        },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        /**
         * table选择列被改变时
         * @param {Array} data 选中的列
         */
        selectionChange(data) {
            this.ids = data.map(item => {
                return item.id;
            });
        },
        queryListData() {
            this.listLoading = true;
            let obj = {
                examineFlag: this.show ? null : 0,
                ...this.page,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryPagePrivilege(obj)
                .then(res => {
                    if (res.data.records.length <= 0) {
                        if (this.page.pageNum > 1) {
                            this.page.pageNum = this.page.pageNum - 1;
                            this.queryListData();
                        } else {
                            this.tableData = [];
                        }
                    } else {
                        this.tableData = res.data.records;
                        this.tableData.forEach(item => {
                            if (item.scenario != '') {
                                item.scenario = item.scenario.split(',');
                            } else {
                                item.scenario = [];
                            }
                            console.log(item, 'item');
                        });
                        this.total = res.total;
                        console.log(this.tableData, 'this.tableData');
                        this.check(); //3,判断用户等级是否有特权
                    }
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 判断用户等级是否有特权
        check() {
            this.titleList.forEach(item => {
                // console.log(item, 11111);
                this.tableData.forEach((it, i) => {
                    it[item.id] = false;
                    if (it.scenario.indexOf(String(item.id)) > -1) {
                        it[item.id] = true;
                    }
                    console.log(it, "it");
                });
            });
        },
        // 进入审批页面调用
        showChange() {
            this.show = 0;
        },
        // 获取用户等级
        queryLevel() {
            this.listLoading = true;
            let obj = {
                pageNum: 1,
                pageSize: 100,
            };
            queryPage(obj)
                .then(res => {
                    this.titleList = res.data.records;
                    console.log(this.titleList, 'res11');
                    this.queryListData(); // 2,获取特权
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        /**
         * 删除功能
         * @param {String} type 授权操作类型:'batch'批量授权  'single'单个授权
         * @param {Number} id 当前需要删除的id或集合
         */
        deleteData(id, type = 'single') {
            if (type === 'batch') {
                if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
                // console.log(this.ids, "ids");

                this.delete(this.ids);
            } else {
                this.delete([id]);
            }
        },
        delete(id) {
            this.$confirm('确定要删除该数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal: false,
            })
                .then(() => {
                    removeData(id)
                        .then(() => {
                            this.$message.success('删除成功');
                            this.queryListData();
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        // 提交
        submit(id) {
            this.$confirm('确定要提交吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    submitData(id).then(() => {
                        this.$message.success('提交成功');
                        this.queryListData();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消',
                    });
                });
        },
        // 驳回弹框
        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(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消',
                    });
                });
        },
        // 审批
        approval(data) {
            examine(data).then(() => {
                this.$message.success('操作成功');
                this.queryListData();
            });
        },
        // 驳回 (审批页面调用)
        isReject(data) {
            // console.log(data, 'isRegect');
            let obj = {
                id: data.id,
                notExamineReason: data.checkComment,
                examineFlag: 2,
            };

            this.approval(obj);
        },
    },
    created() {
        this.queryLevel(); // 1,获取用户等级
    },
};
</script>
<style scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
.vipIco {
    color: #409eff;
}
</style>
