<script setup lang="ts">
import './TradingAlert.less'
import SmallTitle from '../smallTitle/smallTitle.vue'
import { onMounted, reactive } from 'vue';
import { handleGetCurrentEarlyWarning, handleGetEarlyWarning } from '../../service';

// 交易预警数据
let TradingAlertList = reactive<any>([])

onMounted(async () => {
 
    // 请求数据
    await handleGetData()

})

// 请求数据
const handleGetData = async () => {
    // const req: any = {
    //     action_type: "GetEarlyWarning",
    //     province_code: 5564
    // }
    // const data = await handleGetEarlyWarning(req)

    const req: any = {
        ProvinceCode: "530000",
        ServerpartId: ""
    }
    const data = await handleGetCurrentEarlyWarning(req)


    if (data && data.length > 0) {
        let list = data.slice(0, 5)

        TradingAlertList.length = 0;
        list && list.forEach((item: any) => TradingAlertList.push(item));
    } else {
        TradingAlertList.length = 0;
    }

}

</script>

<template>
    <div class="TradingAlertBox">
        <SmallTitle :title="'交易预警'"></SmallTitle>

        <div class="TradingAlertListBox">
            <div class="TradingAlertItem" v-for="(item, index) in TradingAlertList" :key="index"
                :style="{ backgroundColor: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)' }">
                <div class="leftItemLabel">
                    <span>{{ item.serverpartName }}</span>
                    <span style="margin-left: 8px;">{{ item.serverpartShopName }}</span>
                </div>

                <div class="rightItemLabel">
                    {{ item.exceptionTypeName }}
                </div>
            </div>
        </div>

    </div>
</template>