<template>
    <div class="had">
        <div class="had-content flex" v-for="(item,index) in enumsPredictionList" :key="item.value">
            <div class="had-content-item-left">
                {{ item.label || '' }}
            </div>
            <div class="had-content-table flex">
                <div :class="['had-content-table-item', {'is-active': isActiveClass(item, data, '1')}]" @click="handleClick(item, data, '1')">
                    红
                </div>
                <div v-if="item.value === 'asianHandicapFlag'" :class="['had-content-table-item', {'is-active': isActiveClass(item, data, '0.5')}]" @click="handleClick(item, data, '0.5')">
                    红半
                </div>
                <div :class="['had-content-table-item', {'is-active': isActiveClass(item, data, '-1')}]" @click="handleClick(item, data, '-1')">
                    黑
                </div>
                <div v-if="item.value === 'asianHandicapFlag'"  :class="['had-content-table-item', {'is-active': isActiveClass(item, data, '-0.5')}]" @click="handleClick(item, data, '-0.5')">
                    黑半
                </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 enumsPredictionList = [
    { label: '胜平负:', value: 'resultFlag'},
    { label: '让分胜平负:', value: 'hhadResultFlag'},
    { label: '比分:', value: 'scoreResultFlag' },
    { label: '进球数:', value: 'goalsResultFlag' },
    { label: '半全场:', value: 'halfFullResultFlag' },
    { label: '亚盘:', value: 'asianHandicapFlag' },
];

function isActiveClass (item, data, activeValue) {
    // console.log(item, data, activeValue)
    if (!data || !data[item.value]) return false;
    return data[item.value] === activeValue;
}

function handleClick (item,data, value) { 
    data[item.value] = value
}

function getFormData () {
    const formData = props.data
    return formData;
}

onMounted(() => { 
    // if(data.value.reportDetail && data.value.matchSpfDetails){
    //     const reportDetail = data.value.reportDetail;
    //     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-content-item-left{
    width: 120px;
    text-align: right;
    line-height: 45px;
    padding-right: 6px;
}
.had-content-table{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.had-content-table-item {
    padding: 12px;
    // border: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    width: 50%;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    background-color: #F4F8FF;
}
.had-content-table .had-content-table-item:last-child {
    border-right: 1px solid #ccc;
}
.had-content:last-child .had-content-table-item {
    border-bottom: 1px solid #ccc;
}

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

</style>