<template>
    <div class="had">
        <div class="had-content flex" v-for="(item,index) in data.matchSpfDetails" :key="item.id" :data-goalType="item.goalType">
            <!-- <span>{{ item.goalLine || 0 }}</span> -->
            <span class="had-content-item-left flex-center">
                <el-badge :value="item.goalLine||0" :color="index === 0 ?'#666' : '#f56c6c'" />
            </span>
            <div class="had-content-table flex">
                <div :class="['had-content-table-item', {'is-active': item.isActive === 'h'}]" data-id="h" @click="handleClick(item, 'h')">
                    <span>胜</span>
                    <span>{{ item.win || 0 }}</span>
                </div>
                <div :class="['had-content-table-item', {'is-active': item.isActive === 'a'}]" data-id="a" @click="handleClick(item, 'a')">
                    <span>平</span> 
                    <span>{{ item.draw || 0 }}</span>
                </div>
                <div :class="['had-content-table-item', {'is-active': item.isActive === 'd'}]" data-id="d" @click="handleClick(item, 'd')">
                    <span>负</span>
                    <span>{{ item.debt || 0 }}</span>
                </div>
            </div>
        </div>
        <!--编辑模式-->
        <div class="had-content flex had-content-edit">
            <span class="had-content-item-left flex-center"></span>
            <div class="had-content-table flex">
                <div :class="['had-content-table-item', {'is-active': ttgFlag === 'aover'}]"  style="width: 50%; text-align: center;" @click="handleTtgClick('aover')">
                    <span>大球</span> 
                </div>
                <div :class="['had-content-table-item', {'is-active': ttgFlag === 'under'}]"   style="width: 50%; text-align: center;"@click="handleTtgClick('under')">
                    <span>小球</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';


// 定义接收父组件传递的属性
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    },
    type: {
        type: String,
        default: 'view' // edit 编辑模式 view 查看模式
    }
});

// 获取父组件传递的属性值
const { data } = toRefs(props);
const ttgFlag = ref('');

function handleClick(item, type) { 
    if(props.type === 'edit'){
        item.isActive = item.isActive === type ? '' : type;
    }
}
function handleTtgClick(type) { 
    if(props.type === 'edit'){
        ttgFlag.value = ttgFlag.value === type ? '' :  type;
    }
}

function getFormData() {
    const res = {
        matchId: data.value.matchId,
        ttgFlag: ttgFlag.value
    }
    data.value.matchSpfDetails.forEach(el => {
       if(el.goalType === 'HAD') {
        res.hadFlag = el.isActive || '';
       }
       if(el.goalType === 'HHAD') {
        res.hhadFlag = el.isActive || '';
       }
    });
    return res;
}

onMounted(() => { 
    if(data.value.reportDetail && data.value.matchSpfDetails){
        const reportDetail = data.value.reportDetail;
        console.log(reportDetail.hadFlag, reportDetail.hhadFlag, reportDetail.ttgFlag);
        ttgFlag.value = reportDetail.ttgFlag;
        data.value.matchSpfDetails.forEach(el => {
        if(el.goalType === 'HAD') {
            el.isActive = reportDetail.hadFlag || '';
        }
        if(el.goalType === 'HHAD') {
            el.isActive = reportDetail.hhadFlag || '';
        }
        });
    }
})  


defineExpose({
    getFormData
});

</script>

<style lang="scss" scoped>
.had {
    .had-content:nth-child(2) {
        .had-content-table{
            .had-content-table-item{
                border-top: none
            }
        }
    }
}

.had-content-item-left{
    width: 60px;
    text-align: center;
}

.had-content-table{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.had-content-table-item {
    padding: 12px;
    border: 1px solid #ccc;
    width: 33.33%;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    background-color: #f2f2f2;
}
.had-content-table .had-content-table-item:nth-child(2) {
    border-left: none;
    border-right: none;
}

.is-active {
    background-color: #f56c6c;
    color: #fff;
}

/** 编辑模式 */
.had-content-edit {
    .had-content-table-item {
        border-top: none;
    }
    .had-content-table-item:nth-child(2) {
        border-right: 1px solid #ccc;
    }
}   



</style>