<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 label="票务名称：">
                        <el-select
                            v-model="queryParams.goodsIds"
                            placeholder="票务名称"
                            clearable
                            multiple
                            style="width: 100%"
                        >
                            <el-option
                            v-for="dict in goodsPageListS"
                            :key="dict.id"
                            :value="dict.id"
                            :label="dict.status == 1 ? dict.goodsName + '(被禁用)': dict.goodsName"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="库存模板：">
                        <el-select
                        v-model="queryParams.stockTmpId"
                        placeholder="选择库存模板"
                        clearable
                        style="width: 100%"
                        >
                        <el-option
                            v-for="dict in inventoryTemplateList"
                            :key="dict.id"
                            :label="dict.name"
                            :value="dict.id"
                        />
                        </el-select>
                    </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="performName" />
                <el-table-column label="演出厅" align="center" prop="auditoriumName" />
                <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="stockTmpName" />
                <el-table-column label="票务名称" align="center" prop="goodsNames" />
            </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>
    </el-dialog>
</template>

<script>
import { 
    selectListByDateApi,
} from "@/api/ticketMr/schedulingConfiguration";
import { pageList as goodsPageListNew } from '@/api/ticketMr/ticketMr'
import { pageList as getInventoryTemplateApi } from '@/api/ticketMr/InventoryTemplate'
import moment from "moment"
export default {
    name: "PerFormListBox",
    data() {
        return {
            title: "快速查询",
            model: "EDIT",
            open: false,
            loading: false,
            timeList: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            goodsPageListS: [], // 票务
            inventoryTemplateList: []
        };
    },
    created(){
        this.goodsPageListFun()
        this.getInventoryTemplate()
    },
    methods: {
        moment,
        /**
         * 打开弹框
         * @date 2023-11-22
         * @param {any} obj
         * @returns {any}
         */
        async openDialog(title, obj, type) {
            this.open = true;
            this.title = title
            this.queryParams.pageNum = 1
            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,
                    goodsIds: this.queryParams.goodsIds ? this.queryParams.goodsIds.join(',') : ''
                })
                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)
            }
        },
        /**
         * 关闭弹框
         * @date 2023-11-22
         * @returns {any}
         */
        cancel() {
            this.$emit("getList")
            this.open = false;
        },
        /**  票务信息  */
        async goodsPageListFun(){
            try {
                let res = await goodsPageListNew({
                    pageNum: 1,
                    pageSize: 1000,
                    goodsType: 2,
                    classifyId: 1
                })
                if(res.code == 200){
                    this.goodsPageListS = res.data.rows
                }
            } catch (error) {      
            }
        },
        /**  获取模板  */
        async getInventoryTemplate(){
            try {
                // 获取库存模板
                let res = await getInventoryTemplateApi({
                    pageNum: 1,
                    pageSize: 1000,
                })
                if(res.code == 200){
                    this.inventoryTemplateList = res.data.rows
                }
            } catch (error) {   
                console.error("error===",error)   
            }
        },
    },
};
</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>