<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" v-loading="loading">
            <div>
                <el-radio-group v-model="radio1" @input="getData">
                    <el-radio-button :label="1">基本信息</el-radio-button>
                    <el-radio-button :label="2">销售信息</el-radio-button>
                </el-radio-group>
            </div>
            <div v-if="radio1 == 1">
                <el-form :model="form" ref="form" label-width="120px">
                    <el-form-item label="票务名称：">
                        <span>{{ form.goodsNames }}</span>
                    </el-form-item>
                    <el-form-item label="库存模板：">
                        <span>{{ form.stockTmpName }}</span>
                    </el-form-item>
                    <el-form-item label="最后修改人：">
                        <span>{{ form.updateBy }}</span>
                    </el-form-item>
                    <el-form-item label="最后修改时间：">
                        <span>{{ form.updateTime }}</span>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="radio1 == 2">
                <div style="display: flex;align-items: center;padding-bottom: 10px;">
                    <span>票务名称：</span>
                    <div style="width: 300px;">
                        <el-select
                            v-model="goodsIds"
                            placeholder="请选择票务名称"
                            clearable
                            style="width: 100%"
                            @change="getPerformTimeDataFun"
                            >
                            <el-option
                                v-for="dict in goodsPageListS"
                                :key="dict.id"
                                :value="dict.id"
                                :label="dict.status == 1 ? dict.goodsName + '(被禁用)': dict.goodsName"
                                :disabled="dict.status != 0"
                                >
                            </el-option>
                        </el-select>
                    </div>
                </div>
                
                <el-table ref="tables" v-loading="loading" :data="timeList" border>
                    <el-table-column label="票档名称" align="center" prop="seatTypeName" />
                    <el-table-column label="小程序已售(个)" align="center" prop="microAppTotal">
                        <template slot-scope="scope">
                            <span>{{ scope.row.microAppTotal }} / {{ scope.row.microAppStockNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="团购已售(个)" align="center" prop="groupBuyTotal">
                        <template slot-scope="scope">
                            <span>{{ scope.row.groupBuyTotal }} / {{ scope.row.groupBuyStockNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="窗口已售(个)" align="center" prop="winTotal">
                        <template slot-scope="scope">
                            <span>{{ scope.row.winTotal }} / {{ scope.row.winStockNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="美团已售(个)" align="center" prop="meituanTotal">
                        <template slot-scope="scope">
                            <span>{{ scope.row.meituanTotal }} / {{ scope.row.meituanStockNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="携程已售(个)" align="center" prop="xiechenTotal">
                        <template slot-scope="scope">
                            <span>{{ scope.row.xiechenTotal }} / {{ scope.row.xiechenStockNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="猫眼已售(个)" align="center" prop="maoyanTotal">
                        <template slot-scope="scope">
                            <span>{{ scope.row.maoyanTotal }} / {{ scope.row.maoyanStockNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="抖音已售(个)" align="center" prop="duoyinTotal">
                        <template slot-scope="scope">
                            <span>{{ scope.row.duoyinTotal }} / {{ scope.row.duoyinStockNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="其他已售(个)" align="center" prop="otherTotal">
                        <template slot-scope="scope">
                            <span>{{ scope.row.otherTotal }} / {{ scope.row.otherStockNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="合计已售(个)" align="center" prop="saleTotal">
                        <template slot-scope="scope">
                            <span>{{ scope.row.saleTotal }} / {{ scope.row.total }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="剩余(个)" align="center" prop="name">
                        <template slot-scope="scope">
                            <span>{{ scope.row.noSaleTotal }} / {{ scope.row.total }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button 
            :type="this.form.status == 2 ? 'primary': 'danger'" 
            @click="releaseFun" 
            v-hasPermi="['ticketMr:schedulingConfiguration:release']"
            :loading="loading">
                <span>{{ this.form.status == 2 ? '启用本场次': '禁用本场次' }}</span>
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
import { releaseById, getPerformTimeById,seatTypeTmpSaleCount } from "@/api/ticketMr/schedulingConfiguration";
import { goodsPageList as goodsPageListApi } from "@/api/ticketMr/schedulingConfiguration";
import moment from "moment"
export default {
    name: "PerFormDeatils",
    data() {
        return {
            title: "编辑",
            model: "EDIT",
            open: false,
            loading: false,
            timeList: [],
            form: {
                id: undefined,
                timeList: [],
                insertType: '1',
                useStock: 0
            },
            radio1: 1,
            goodsIds: null,
            goodsPageListS: []
        };
    },
    methods: {
        /**
         * 打开弹框
         * @date 2023-11-22
         * @param {any} obj
         * @returns {any}
         */
        async openDialog(title, obj, type) {
            this.open = true;
            this.radio1 = 1
            this.goodsIds = null
            let list = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]
            this.title = obj.performDate + "  " + list[moment(obj.performDate).day()] +"  "+ obj.performTimeStart + "-" + obj.performTimeEnd 
            this.form = {}
            console.log("boj===",obj)
            await this.goodsPageListFun(obj.performId)
            if(this.radio1 == 1) {
                await this.getPerformTimeByIdFun(obj.id)
            }else if(this.radio1 == 2){
                await this.getPerformTimeDataFun(obj)
            }
        },
        /**  票务信息  */
        async goodsPageListFun(value){
            try {
                let res = await goodsPageListApi({
                    performId: value
                })
                if(res.code == 200){
                this.goodsPageListS = res.data
                }
            } catch (error) {      
            }
        },
        getData(value) {
            if(value == 1) {
                this.getPerformTimeByIdFun(this.form.id)
            }else if(value == 2){
                this.getPerformTimeDataFun(this.form)
            }
        },
         /**  基本信息  */
        async getPerformTimeByIdFun(id){
            try {
                this.loading = true
                let res = await getPerformTimeById({
                    id: id
                })
                if(res.code == 200){
                    this.form = res.data
                }
                this.loading = false
            } catch (error) {   
                this.loading = false
                console.error("error====",error)   
            }
        },
         /**  统计  */
        async getPerformTimeDataFun(){
            try {
                this.loading = true
                let res = await seatTypeTmpSaleCount({
                    id: this.form.id,
                    goodsId: this.goodsIds
                })
                if(res.code == 200){
                this.timeList = res.data.rows.filter((item)=>{
                        if(item.performDate == this.form.performDate) {
                            return item
                        }
                    })
                }
                this.loading = false
            } catch (error) {     
                this.loading = false 
            }
        },
        releaseFun(){
            let srt = this.form.status == 2?`确定要启用该场次进行售卖吗？`:`确定要禁用该场次停止售卖吗？`
            this.$modal.confirm(srt).then(()=> {
                this.submitForm()
            }).catch(() => {});
        },
        /**
         * 保存
         * @date 2023-11-22
         * @returns {any}
         */
        async submitForm() {
            try {
                this.loading = true
                let res = await releaseById({
                    id: this.form.id,
                    status: this.form.status == 1 ? 2 : 1
                })
                if(res.code == 200){
                    this.$message.success("操作成功");
                    this.$emit("getList")
                    this.cancel()
                }
                this.loading = false
            } catch (error) {    
                console.error("error===",error) 
                this.loading = false 
            }
        },
        /**
         * 关闭弹框
         * @date 2023-11-22
         * @returns {any}
         */
        cancel() {
            this.open = false;
        },
    },
};
</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>