<template>
   <HcCard actionSize="lg" scrollbar>
        <template #header>
            <div class="warn_text">
                <HcIcon name="alert" class="warn_icon"/>
                <span>15条</span>
            </div>
        </template>
        <HcTable :column="tableColumn" :datas="tableData">
            <template #name="{row}" >
                <span style="color: blue;"> {{ row['name'] }}</span>
            </template>
            <template #realprice="{row}" >
                <span style="color: blue;"> {{ row['realprice'] }}</span>
            </template>
            <template #overprice="{row}" >
                <span style="color: red;"> {{ row['overprice'] }}</span>
            </template>
        </HcTable>
        <template #action>
                <HcPages :pages="searchForm" @change="pageChange"></HcPages>
        </template>
   </HcCard>
</template>

<script setup>
import {ref, watch} from "vue";
import {useAppStore} from "~src/store";

const tableColumn = [
    {key: 'name', name: '项目名称'},
    {key: 'text', name: '项目进程'},
    {key: 'color', name: '预算类型'},
    {key: 'text', name: '任务明细'},
    {key: 'text', name: '预算工时（天'},
    {key: 'text', name: '成本预算'},
    {key: 'realprice', name: '实际支出'},
    {key: 'overprice', name: '超出预算额'},
]
const tableData = ref([
    {name: '项目名称', realprice: '文本1', overprice: 'red'},
    {name: '项目进程', realprice: '文本2', overprice: 'blue'},
    {name: '预算类型', realprice: '文本3', overprice: '无'},
    {name: '任务明细', realprice: '文本3', overprice: '无'},
    {name: '预算工时（天）', realprice: '文本3', overprice: '无'},
    {name: '预算工时（天）', realprice: '文本3', overprice: '无'},
])
//搜索表单
const searchForm = ref({current: 1, size: 20, total: 60})

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
}
</script>

<style lang="scss" scoped>
.warn_text{
    font-size: 32px;
    .warn_icon{
        font-size: 36px;
        color: red;
        margin-right: 10px;
    }
}
</style>