<template>
    <div class="cont">
        <div class="title">
        <div>上课学生</div>
        <div class="more">查看详情</div>
        </div>
        <div class="info">
        <div class="item" v-for="(i, j) in list" :key="j">
            <div style="display: flex">
                <img :src="i.img" alt="" />
                <div class="stuinfo">
                    <div>{{ i.name }}</div>
                    <div class="lessonname">{{ i.interest }}</div>
                </div>
            </div>
            <div class="takehour" v-if="i.status == 1 && livestatus == 2">
                参加时长
                <div>30min</div>
            </div>
            <div
                class="cancel"
                v-if="i.status == 2 || (livestatus == 0 && i.status == 1)"
                @click="quxiao(j)"
            >
                取消直播
            </div>

            <div class="refuse" v-if="i.status == 3">已拒绝</div>
        </div>

        <!-- <div class="item">
            <div style="display:flex">
            <img src="" alt="" />
            <div class="stuinfo">
                <div>andy</div>
                <div class="lessonname">英语 A1</div>
            </div>
            </div>

        </div>

        <div class="item">
            <div style="display:flex">
            <img src="" alt="" />
            <div class="stuinfo">
                <div>andy</div>
                <div class="lessonname">英语 A1</div>
            </div>
            </div>

            
        </div>
        <div class="item">
            <div style="display:flex">
            <img src="" alt="" />
            <div class="stuinfo">
                <div>andy</div>
                <div class="lessonname">英语 A1</div>
            </div>
            </div>

            <div class="takehour">
                参加时长 
                <div>30min</div>
            </div>
        </div> -->
        </div>
    </div>
</template>
<style lang="scss" scoped>
.cont {
    width: 316px;
    height: 563px;
    background-color: #fff;
    border-radius: 17px;
    padding: 0 28px;
    position: relative;
    overflow: auto;
    .title {
        padding: 23px 0 11px 0;
        font-size: 13px;
        color: #111;
        line-height: 1;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        .more {
        color: #999999;
        font-size: 11px;
        }
    }
    .info {
        .item {
            display: flex;
            align-content: center;
            justify-content: space-between;
            margin-top: 23px;
            font-size: 10px;
            .stuinfo {
                margin: auto 0;
                margin-left: 11px;
                color: #111111;
                .lessonname {
                color: #666666;
                }
            }
            .takehour {
                color: #08ae98;
                font-size: 11px;
                margin: auto 0;
                text-align: center;
            }
            > div > img {
                width: 57px;
                height: 57px;
                border-radius: 50%;
            }
        }
    }
    .refuse {
        color: #d22c2e;
        margin: auto 0;
        width: 57px;
        text-align: center;
    }
    .cancel {
        margin: auto 0;
        width: 57px;
        height: 23px;
        border: 1px solid #09ae99;
        line-height: 23px;
        text-align: center;
        color: #09ae99;
        border-radius: 3px;
    }
    .button {
        position: absolute;
        width: 260px;
        bottom: 28px;
        display: flex;
        justify-content: space-between;
        > div {
            width: 114px;
            height: 23px;
            border-radius: 3px;
            font-size: 10px;
            color: #fff;
            line-height: 23px;
            text-align: center;
        }
        .modify {
            background-color: #08ae98;
        }
        .del {
            background-color: #d12c2e;
        }
    }
}
</style>
<script lang="ts">
import { cancellive } from '@/api';
import { defineComponent, ref, watch } from "vue";

export default defineComponent({
    props: {
        info: Array,
        livestatus: Number,
    },
    setup(props) {
        
        let list = ref<any>(props.info);
        watch(()=> props.info,()=>{
            // console.log(props.info)
            list.value = props.info
        })
        async function quxiao(index: number){
            console.log(index, list.value[index])
            const res = await cancellive(list.value[index].memberid, 3);
            if(res){
                list.value[index].status = 3
            }
        }
        
        return {
            list,
            quxiao
        };
    },
});
</script>