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

// 交易预警数据
let TradingAlertList = reactive<any>([])
// 交易预警的其他信息内容
let TradingOtherData = ref<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)

    console.log('skodpijasidjaslfddfas', data);

    TradingOtherData.value = data.OtherData

    if (data.List && data.List.length > 0) {
        let list = data.List.slice(0, 10)
        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="TradingAlertBox">
            <div class="TradingAlertItem">
                <div class="TradingAlertItemLeft">
                    <img class="TradingAlertItemLeftIcon" src="../../../../assets/image/busyIcon.png" />
                </div>
                <div class="TradingAlertItemRight">
                    <div class="TradingAlertItemRightLabel">必查项</div>
                    <div class="TradingAlertItemRightValueBox">
                        <div class="TradingAlertItemRightValue">{{ TradingOtherData?.value || '' }}</div>
                        <div class="OverviewOfServiceAreaBusyContentItemRightUnit">项</div>
                    </div>
                </div>
            </div>

            <div class="TradingAlertItem">
                <div class="TradingAlertItemLeft">
                    <img class="TradingAlertItemLeftIcon" src="../../../../assets/image/normalIcon.png" />
                </div>
                <div class="TradingAlertItemRight">
                    <div class="TradingAlertItemRightLabel">抽查项</div>
                    <div class="TradingAlertItemRightValueBox">
                        <div class="TradingAlertItemRightValue">{{ TradingOtherData?.data || '' }}</div>
                        <div class="OverviewOfServiceAreaBusyContentItemRightUnit">项</div>
                    </div>

                </div>
            </div>

        </div>

        <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>