<template>
    <div class="build-risk-page">
        <div class="inner-tit">
            <div>
                <img src="../../assets/img/lef-badge.png" alt="" />
                施工风险实时预警
            </div>
            <span style="cursor: pointer" @click="toggleDialog(13)">更多</span>
        </div>
        <div class="build-table">
            <el-table
                :data="tableList"
                stripe
                style="width: 100%"
                :show-header="false"
                :row-style="rowStyle"
            >
                <el-table-column prop="projectName" label="" align="center">
                </el-table-column>
                <el-table-column prop="warnTime" label="" align="center">
                </el-table-column>
                <el-table-column prop="warnType" label="" align="center">
                    <template slot-scope="scope">
                       {{ scope.row.warnType }}异常
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {
  queryRiskInfoApi
} from '@/api/home/home'
export default {
    name: 'buildRiskPage',
    components: {

    },
    data() {
        return {
            tableList: [
                /* {
                    date: 'xxx工程',
                    name: '2024.1.1 12:23',
                    address: '环境检测异常',
                    isNormal: false,
                },
                {
                    date: 'xxx工程',
                    name: '2024.1.1 12:23',
                    address: '环境检测正常',
                    isNormal: true,
                },
                {
                    date: 'xxx工程',
                    name: '2024.1.1 12:23',
                    address: '环境检测正常',
                    isNormal: true,
                },
                {
                    date: 'xxx工程',
                    name: '2024.1.1 12:23',
                    address: '环境检测异常',
                    isNormal: false,
                }, */
            ],
        }
    },
    mounted() {
      this.getRiskData()
    },
    destroyed() {

    },
    methods: {
        async getRiskData() {
          let res = await queryRiskInfoApi()
          this.tableList = res.data
        },
        toggleDialog(v) {
            this.$emit('openDialog', { order: v })
        },
        rowStyle(scope) {
            if (scope.rowIndex % 2 === 0) {
                return {
                    background: '#EAF5FF',
                }
            } else {
                return {
                    background: '#E1EEFF',
                }
            }
        },
    },
}
</script>

<style lang="scss" scoped>
@font-face {
    font-family: 'YouShe';
    src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
}

.build-risk-page {

    height: 100%;
    background-color: #f3f7ff;
    box-sizing: border-box;
    padding: 15px 20px;
    border-radius: 5px;
    border: 1px solid #eff2fc;
    box-shadow: 2px 2px 2px #d9e0f3;
    overflow-y: auto;


    .inner-tit {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 20px;
        background-color: #eff4fe;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
        font-size: 20px;
        font-family: 'YouShe', sans-serif;
        box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
            -2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
        margin-bottom: 15px;

        span {
            color: #757b87;
        }
    }

    .build-table {
        width: 100%;
    }
}
</style>
