<template>
    <el-dialog :title="title" :visible.sync="open" width="90%" class="text-dia-log-class" append-to-body center
        :close-on-click-modal="false" @close="cancel">
        <div class="dialog">
            <div style="padding-bottom: 10px;">
                <el-form 
                :model="queryParams" 
                ref="queryForm" 
                size="small" 
                :inline="true" 
                label-width="100px">
                    <el-form-item label="时间:" label-width="60px">
                        <el-date-picker
                            v-model="queryParams.performDate"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format = "yyyy-MM-dd"
                            placeholder="选择日期">
                            </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table ref="tables" v-loading="loading" :data="timeList" border>
                <el-table-column label="演出日期" align="center" prop="performDate" />
                <el-table-column label="场次信息" align="center" prop="planSessionList">
                    <template slot-scope="scope">
                        <div>
                            <span>{{ scope.row.timeSnapshot }}</span>
                            <span>({{ scope.row.performTimeStart }} - {{ scope.row.performTimeEnd }})</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="演出厅" align="center" prop="auditoriumName" />
                <el-table-column label="剧目信息" align="center" prop="performName" />
                <el-table-column label="票务信息" align="center" prop="goodsNames" />
                <el-table-column label="库存模板" align="center" prop="stockTmpName" />
                <el-table-column label="最后修改时间" align="center" prop="updateTime" />
                <el-table-column label="最后修改人" align="center" prop="updateBy" />
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <switchBoxVue v-model="scope.row.status" @changeFun="ionlineFun(scope.row)" :active-value="1" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" prop="name">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="editFun(scope.row)"
                            v-hasPermi="['ticketMr:schedulingConfiguration:add']"
                        >修改</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            style="margin-left: 10px;"
                            @click="deleteFun(scope.row)"
                            v-hasPermi="['ticketMr:schedulingConfiguration:delect']"
                            >删除</el-button>
                        <!-- <el-button
                            size="mini"
                            type="text"
                            @click="handlePerFormDeatils(scope.row)"
                        >销售详情</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getPerformTimeByIdFun"
            />
        </span>
        <!-- 新增/编辑弹框 -->
        <add-and-edit
        ref="addAndEdit"
        @getList="getPerformTimeByIdFun"
        />
        <!-- 排期详情  -->
        <perFormDeatils ref="perFormDeatils" @getList="getPerformTimeByIdFun" />
    </el-dialog>
</template>

<script>
import { 
    deleteById,
    pageList, 
    getPerformTimeById,
    performTimeDeleteByIdApi,
    selectListByDateApi,
    releaseById
 } from "@/api/ticketMr/schedulingConfiguration";
import addAndEdit from "./PerFormEdit";
import perFormDeatils from './perFormDeatils.vue';
import switchBoxVue from '@/components/switchBox.vue';
import moment from "moment"
export default {
    name: "PerFormListBox",
    components: { perFormDeatils,addAndEdit,switchBoxVue },
    data() {
        return {
            title: "编辑",
            model: "EDIT",
            open: false,
            loading: false,
            timeList: [],
            weekList: ["","星期一","星期二","星期三","星期四","星期五","星期六","星期天"],
            form: {
                id: undefined,
                timeList: [],
                insertType: '1',
                useStock: 0
            },
            radio1: 1,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        };
    },
    methods: {
        moment,
        /**
         * 打开弹框
         * @date 2023-11-22
         * @param {any} obj
         * @returns {any}
         */
        async openDialog(title, obj, type) {
            this.open = true;
            this.title = title
            this.form = {}
            this.queryParams.pageNum = 1
            this.$set(this.queryParams,'performDate',obj.performDate)
            this.getPerformTimeByIdFun()
        },
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getPerformTimeByIdFun()
        },
        /**  演出场次时间  */
        async getPerformTimeByIdFun() {
            try {
                console.log("dsfsdf===",this.queryParams)
                this.loading = true
                let res = await selectListByDateApi({
                    ...this.queryParams
                })
                if (res.code == 200) {
                    this.timeList = res.data.rows
                    this.total = res.data.total
                }
                this.loading = false
            } catch (error) {
                this.loading = false
                console.error("error====", error)
            }
        },
        /** 排期销售详情  */
        handlePerFormDeatils(row) {
            this.$refs["perFormDeatils"].openDialog("排期销售详情", row);
        },
        /** 复刻 */
        editFun(row) {
            this.$refs["addAndEdit"].openDialog("修改场次", row, "EDIT");
        },
        /**
         * 关闭弹框
         * @date 2023-11-22
         * @returns {any}
         */
        cancel() {
            this.$emit("getList")
            this.open = false;
        },
        deleteFun(row){
            this.$modal.confirm(`您确定要删除此次场次吗？`).then(()=> {
                this.handleDelete(row)
            }).catch(() => {});
        },
        /**  删除  */
        async handleDelete(row) {
            try {
                this.loading = true
                let res = await performTimeDeleteByIdApi({
                    id: row.id
                })
                if (res.code == 200) {
                    this.$message.success("删除成功");
                    this.getPerformTimeByIdFun()
                }
                this.loading = false
            } catch (error) {
                this.loading = false
                console.error("error====", error)
            }
        },
        /** 警用和启用 */
        ionlineFun(row) {
            this.$confirm("您确认要" + (row.status == 1 ? '禁用该场次吗？' : '启用该场次吗？'), '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                releaseById({
                    id: row.id,
                    status: row.status == 1 ? 2 : 1
                }).then((res) => {
                if (res.code == 200) {
                    this.$message({
                    type: 'success',
                    message: '操作成功!'
                    });
                    this.getPerformTimeByIdFun();
                }
                });
            }).catch(() => {this.getPerformTimeByIdFun();});
        },
    },
};
</script>

<style lang="scss" scoped>
.dialog {
    height: 65vh;
    overflow-y: auto;

    .upload-btn {
        width: 100px;
        height: 100px;
        background-color: #fbfdff;
        border: dashed 1px #c0ccda;
        border-radius: 5px;

        i {
            font-size: 30px;
            margin-top: 20px;
        }

        &-text {
            margin-top: -10px;
        }
    }

    .avatar {
        cursor: pointer;
    }
}
</style>