<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <!-- 搜索栏与表格区域 -->
        <div class="main-container">
            <div class="search-container TableSelectMain widthAuto">
                <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.title"></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" v-show="show">
                            <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" v-show="show">
                            <el-form-item>
                                <el-select placeholder="审核状态" v-model="searchForm.checkFlag">
                                    <el-option label="审核通过" :value="1"></el-option>
                                    <el-option label="待审核" :value="2"></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" plain round @click="query">查询</el-button>
                                <el-button type="primary" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-show="show">
                            <el-form-item>
                                <el-button
                                    type="primary"
                                    plain
                                    round
                                    icon="el-icon-plus"
                                    @click="create"
                                >新建</el-button>
                                <!-- <el-button type="primary" plain round @click="showBatch">批量展示</el-button> -->
                                <!-- <el-button type="primary" plain round @click="noshowBatch">批量关闭</el-button> -->
                                <el-button type="primary" plain round @click="putaway">批量启用</el-button>
                                <el-button type="primary" plain round @click="soldOut">批量关闭</el-button>
                                <el-button
                                    type="primary"
                                    plain
                                    round
                                    @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="title" label="标题" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="nickname" label="作者" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="cover" label="封面图" min-width="100px;">
                        <template slot-scope="scope">
                        <span @click="imgOpen(scope.row.cover)">
                            <el-image
                                style="width:70px;height:70px;cursor:pointer"
                                :src="scope.row.cover | pathPipe"
                            ></el-image>
                        </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="视频">
                        <template slot-scope="scope">
                            <el-link
                                type="primary"
                                :href="scope.row.url | pathPipe"
                                target="_blank"
                            >查看视频</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="descr" label="描述" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="browseNum" label="浏览量">
                        <template slot-scope="scope">
                            <span>{{ scope.row.browseNum || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="favoriteNum" label="收藏量">
                        <template slot-scope="scope">
                            <span>{{ scope.row.favoriteNum || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="likeNum" label="点赞量">
                        <template slot-scope="scope">
                            <span>{{ scope.row.likeNum || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="payNum" label="打赏量">
                        <template slot-scope="scope">
                            <span>{{ scope.row.payNum || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="hotFlag" label="置顶" min-width="100px" v-if="show">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.hotFlag"
                                active-text="开"
                                inactive-text="关"
                                :active-value="1"
                                :inactive-value="0"
                                :disabled="scope.row.checkFlag !==1"
                                @change="hotFlagChange(scope.row.id, scope.row.hotFlag)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="statuz" label="启用状态" min-width="110px" v-if="show">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.statuz"
                                active-text="开"
                                inactive-text="关"
                                :active-value="1"
                                :inactive-value="0"
                                :disabled="scope.row.checkFlag !==1"
                                @change="statuzChange(scope.row)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="审核状态">
                        <template slot-scope="scope">
                            <span class="warn" v-show="scope.row.checkFlag == 2">待审核</span>
                            <span class="success" v-show="scope.row.checkFlag == 1">审核通过</span>
                            <RejectReason
                                :content="scope.row.checkComment"
                                v-show="scope.row.checkFlag == 0"
                            ></RejectReason>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="220px;">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-show="show"
                                @click="deleteData(scope.row.id)"
                            >删除</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-show="show"
                                :disabled="scope.row.checkFlag === 1"
                                @click="edit(scope.row)"
                            >编辑</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="showDetailsDialog(scope.row)"
                            >详情</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-show="!show"
                                @click="pass(scope.row.id)"
                            >通过</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                v-show="!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 ref="addEditDialog" @queryListData="queryListData"></AddEditDialog>
        <!-- 详情弹层 -->
        <DetailsDialog ref="detailsDialog" @queryListData="queryListData"></DetailsDialog>
        <!-- 审批弹层 -->
        <Reject ref="rejectDialog" @isReject="isReject"></Reject>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import AddEditDialog from './components/addEditDialog';
import DetailsDialog from './components/detailsDialog';
import Reject from '@/apps/mobile/components/reject/index';
import RejectReason from '@/apps/mobile/components/ReasonForRejection/index';
import {
    queryPage,
    removeData,
    editData,
    useBath,
    noUseBath,
    queryBrand,
    showIndex,
    noshowIndex,
    examine,
} from '@/apps/mobile/api/school/index';
let that;
export default {
    components: {
        TitleBar,
        AddEditDialog,
        DetailsDialog,
        Reject,
        RejectReason,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            listLoading: false,
            ids: [], // 选中的列
            // brandList: [], //电梯品牌
            show: 1, //管理和审批页面切换显示
            selection: [],
        };
    },
    created() {
        this.$nextTick(() => {
            this.queryListData();
        });
    },
    methods: {
        create() {
            this.$refs.addEditDialog.open('add');
        },
        edit(data) {
            this.$refs.addEditDialog.open('edit', data);
        },
        selectionChange(data) {
            this.selection = data;
            this.ids = data.map(item => {
                return item.id;
            });
        },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        showDetailsDialog(data) {
            this.$refs.detailsDialog.open(data);
        },
        queryListData() {
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                checkFlag: this.show ? this.searchForm.checkFlag : 2,
                platform: 'web',
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryPage(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;
                });
        },
        /**
         * 删除功能
         * @param {String} type 授权操作类型:'batch'批量授权  'single'单个授权
         * @param {Number} id 当前需要删除的id或集合
         */
        deleteData(id, type = 'single') {
            let obj = {};
            if (type === 'batch') {
                if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
                // console.log(this.ids, "ids");
                obj = {
                    ids: this.ids
                }
                this.delete(obj);
            } else {
                obj = {
                    ids: [id]
                }
                this.delete(obj);
            }
        },
        delete(obj) {
            this.$confirm('确定要删除该数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal: false,
            })
                .then(() => {
                    removeData(obj)
                        .then(() => {
                            this.$message.success('删除成功');
                            this.queryListData();
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        // 批量上架
        putaway() {
            const ids = this.selection.filter(item => {
                return item.checkFlag === 1;
            });
            const arr = ids.map(item => {
                return item.id;
            });
            if (arr.length === 0) {
                this.$message.warning('请至少选中一项审核通过的!');
                return false;
            }
            useBath({ids: arr})
                .then(() => {
                    this.$message.success('操作成功');
                    this.queryListData();
                })
                .catch(err => err);
        },
        // 批量下架
        soldOut() {
            const ids = this.selection.filter(item => {
                return item.checkFlag === 1;
            });
            const arr = ids.map(item => {
                return item.id;
            });
            if (arr.length === 0) {
                this.$message.warning('请至少选中一项审核通过的!');
                return false;
            }
            noUseBath({ids: arr})
                .then(() => {
                    this.$message.success('操作成功');
                    this.queryListData();
                })
                .catch(err => err);
        },
        // 批量展示
        showBatch() {
            if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
            showIndex({ids: this.ids})
                .then(() => {
                    this.$message.success('操作成功');
                    this.queryListData();
                })
                .catch(err => err);
        },
        // 批量关闭
        noshowBatch() {
            if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
            noshowIndex({ids: this.ids})
                .then(() => {
                    this.$message.success('操作成功');
                    this.queryListData();
                })
                .catch(err => err);
        },
        hotFlagChange(id, hotFlag) {
            let obj = {
                id,
                hotFlag,
            };
            // console.log(obj,'hotFlag');
            this.editformData(obj);
        },
        statuzChange(data) {
            let obj = {
                id: data.id,
                statuz: data.statuz,
            };
            this.editformData(obj);
        },
        // 编辑
        editformData(data) {
            editData(data)
                .then(() => {
                    this.$message.success('编辑成功');
                    this.queryListData();
                })
                .catch(err => err);
        },
        // 查询
        query() {
            // for (let k in this.searchForm) {
            //     if (this.searchForm[k] === '' || this.searchForm[k] === null || this.searchForm[k] === undefined) {
            //         delete this.searchForm[k];
            //     }
            // }
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 获取电梯品牌
        // queryBrandList() {
        //     queryBrand({})
        //         .then((res) => {
        //             this.brandList = res.data.records;
        //             console.log(this.brandList, 'this.brandList');
        //         })
        //         .catch((err) => err);
        // },

        // 进入视频审批页面
        changeShow() {
            this.show = 0;
        },
        //  驳回弹框 仅审批页面调用
        rejectShow(id) {
            this.$refs.rejectDialog.open(id);
        },
        // 驳回
        isReject(data) {
            let obj = {
                checkFlag: 0,
                ...data,
            };
            this.approve(obj);
        },
        // 通过
        pass(id) {
            this.$confirm('是否通过审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let obj = {
                        id,
                        checkFlag: 1,
                        statuz: 1,
                    };
                    this.approve(obj);
                    // this.editformData(obj);
                    // this.queryListData();
                })
                .catch(() => {});
        },
        approve(data) {
            examine(data).then(() => {
                this.$message.success('操作成功');
                this.queryListData();
            });
        },
        imgOpen(imgs){
            window.open(imgs);
        }
    },
    beforeCreate() {
        that = this;
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
</style>
