<template>
    <div class="" style="padding:15px 10px 0 10px">
        <el-form :model="queryParams" ref="queryForm" :inline="true" style="padding:0 0 0 0" size="small">
            <el-form-item prop="studioArea">
                <el-input v-model="queryParams.studioArea" placeholder="录播室地点" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" plain icon="el-icon-plus" @click="handleAdd"> 新增 </el-button>
                <el-button icon="el-icon-search" type="primary" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData">
            <el-table-column prop="lesson" label="序号" width="60" align="center" style="height: 20px;" type="index">
            </el-table-column>
            <el-table-column prop="studioName" label="录播室简称" align="center">
            </el-table-column>
            <el-table-column label="录播室地点" align="center" prop="studioArea">
            </el-table-column>
            <el-table-column label="状态" align="center" prop="studioStatu">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.studioStatu" active-value="1" inactive-value="2"
                        @change="handleChangeState(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:device:remove']">修改
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:device:remove']">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" /> -->
        <!-- 新增/修改弹窗 -->
        <el-dialog :title="title" :visible.sync="open" width="1200px">
            <el-form ref="form" :model="form" label-width="114px" :rules="rules">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="录播室简称">
                            <el-input v-model="form.studioName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="状态">
                            <el-select v-model="form.studioStatu">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>


                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="具体位置">
                            <el-input v-model="form.studioArea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancle">取 消</el-button>
            </div>
        </el-dialog>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList"></pagination>

    </div>
</template>

<script>
import {
    addStudio, // 新增录播室
    getStudio,// 查看录播室列表
    updateStudio, // 修改录播室信息
    delAuditor,// 删除礼堂预约
    listAuditor,// 查看录播室详情
    editAuditorzt,//修改录播室状态
} from "@/api/smartSchool/personWork/venueReservation/recordingroomManagement";

export default {
    dicts: ["asset_attributes", "collecting_type"],
    name: '',
    data() {
        return {
            studioStatu: "",
            queryParams: {
                studioArea: "",
                pageNum: 1,
                pageSize: 10,
            },
            title: "",
            rules: {

            },
            tableData: [],
            options: [
                { value: '1', label: '启用' },
                { value: '2', label: '禁用' },
            ],
            form: {
                id: "",
                studioName: "",
                studioStatu: "",
                studioArea: "",
            },
            open: false,
            total: 0,
        }
    },

    created() {
        this.getList();
    },


    methods: {
        /** 查询 */
        getList() {
            getStudio(this.queryParams).then((response) => {
                this.tableData = response.rows;
                this.loading = false;
                this.total = response.total;
                console.log(111, response.rows);

            });
        },
        // 重置
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            const id = row.id || this.ids;
            listAuditor(id).then(response => {
                this.form = response.data;
                this.studioStatu = response.data.studioStatu;
                console.log(this.studioStatu);
                this.open = true;
                this.title = "修改任务";
            });
        },


        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id !== undefined) {
                        const
                            { id, studioName, studioStatu, studioArea }
                                = this.form;
                        updateStudio(id, studioName, studioStatu, studioArea).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addStudio(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除定时任务编号为"' + ids + '"的数据项？').then(function () {
                return delAuditor(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 查看 */
        handleLook(row) {
            this.rowData = row;
            this.open = true
            // getMyTable().then((response) => {
            //     this.tableData = response.rows
            //     console.log(response.rows);

            // });
        },
        /** 启用/禁用 */
        handleChangeState(row) {
            console.log('row1234', row);
            let text = row.studioStatu === "1" ? "启用" : "禁用";
            this.$modal.confirm('确认要' + text + '当前录播室？').then(() => {
                return editAuditorzt(row.id, row.studioStatu,);
            }).then(() => {
                this.$modal.msgSuccess(text + "成功");
                row.studioStatu = row.studioStatu === "1" ? "2" : "1"; // 更新状态值
                this.getList(); // 获取最新的列表数据
            }).catch(() => {
                row.studioStatu = row.studioStatu === "1" ? "2" : "1";
            });
        },

        //新增按钮操作
        handleAdd() {
            this.reset();
            this.open = true;

        },
        // 表单重置
        reset() {
            this.form = {
                studioName: null,
                studioStatu: null,
                studioArea: null,

            };
            this.resetForm("form");
        },
        cancle() {
            this.open = false
        }
    },

}
</script>

<style scoped></style>

