<style lang="scss" scoped>
.layout-pr5 {
    padding-right: 5px;
}

.layout_card {
    display: flex;
    width: 100%;
    height: 11vh;
    margin-bottom: 30px;
    justify-content: space-between;
}


.el-card__body {
    display: flex;
}

.card_text {
    font-size: 12px;

    .text_num {
        font-size: 16px;
        font-weight: bold;
        padding: 5px 0;
    }
}

.card_round {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout_card2 {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin: 10px 0;
    width: 100%;
    border: 1px solid #91d5ff;
    border-radius: 15px;
    background: #e6f7ff;

    .card_item {
        margin-right: 20px;
        font-size: 14px;
        cursor: pointer;

        .card_item_color {
            color: #1890ff;
            padding-left: 10px;
        }
    }
}
</style>
<template>
    <div class="overall-container">
        <div v-if="store.openDditFlag">
            <div class="search-container">
                <div class="layout_card">
                    <el-card v-for="(item, index) in cardArr" :key="index"
                        :style="{ background: item.background, width: '22%' }"
                        body-style="display: flex; justify-content: space-between;">
                        <div class="card_text">
                            <div>{{ item.title }}</div>
                            <div class="text_num">{{ item.value }}</div>
                            <div>{{ item.text }}</div>
                        </div>
                        <div class="card_round" :style="{ background: item.round }">
                            <img :src="item.url" alt="">
                        </div>
                    </el-card>
                </div>
                <el-form class="search-container-from">
                    <el-input type="hidden" />
                    <el-form-item label="项目" class="layout-pr10">
                        <el-select v-model="projectState" placeholder="请选择项目" filterable class="layout-w200">
                            <el-option v-for="i in projectList" :key="i.Id" :label="i.AC002" :value="i.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标段" class="layout-pr10">
                        <el-select v-model="sectionState" placeholder="请选择标段" filterable class="layout-w200">
                            <el-option v-for="i in sectionList" :key="i.Id" :label="i.BC02" :value="i.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="劳务队" class="layout-pr10">
                        <el-select v-model="laborTeamState" placeholder="请选择劳务队" filterable class="layout-w200">
                            <el-option v-for="i in laborTeamList" :key="i.Id" :label="i.DC01" :value="i.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="查询内容" class="no-required-star layout-pr10">
                        <el-input v-model="input" clearable class="layout-w200" placeholder="请输入姓名" />
                    </el-form-item>
                    <el-form-item label="日期范围" class="layout-pr10">
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="-"
                            :disabled-date="disabledDayRange" start-placeholder="开始日期" end-placeholder="结束日期"
                            :size="size" />
                    </el-form-item>
                    <el-form-item class="layout-pr10">
                        <el-button type="primary" icon="Search" @click="onSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="ArrowUp" @click="onExport">导出</el-button>
                    </el-form-item>
                </el-form>
                <div class="layout_card2">
                    <div class="card_item" v-for="(item, index) in cardListArr" :key="index">
                        <span>{{ item.name }}</span>
                        <span class="card_item_color">{{ item.value }}人</span>
                    </div>
                </div>
                <el-table class="table-container" v-loading="tableLoading" ref="tableRef" :data="tableData" border
                    :height="tableHeight" width="100%">
                    <el-table-column label="序号" type="index" align="center" max-width="120" fixed="left" />
                    <el-table-column prop="A1" label="记录时间" sortable fixed="left" align="center" min-width="150"
                        show-overflow-tooltip />
                    <el-table-column prop="A2" label="姓名" sortable fixed="left" align="center" min-width="120"
                        show-overflow-tooltip />
                    <el-table-column prop="A3" label="性别" sortable fixed="left" align="center" min-width="80"
                        show-overflow-tooltip />
                    <el-table-column prop="A4" label="年龄" sortable align="center" min-width="80"
                        show-overflow-tooltip />
                    <el-table-column prop="A5" label="工种" sortable align="center" min-width="120"
                        show-overflow-tooltip />
                    <el-table-column prop="A6" label="血压(MMHG)" sortable align="center" min-width="110"
                        show-overflow-tooltip>
                        <template #default="scope">
                            <div v-if="isBloodPressureNormal(scope.row.A6)">{{ scope.row.A6 }}</div>
                            <div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A6
                                }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="A7" label="血氧(%)" sortable align="center" min-width="80"
                        show-overflow-tooltip>
                        <template #default="scope">
                            <div v-if="scope.row.A7 >= 95">{{ scope.row.A7 }}</div>
                            <div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A7
                                }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="A8" label="心率(BPM)" sortable align="center" min-width="100"
                        show-overflow-tooltip>
                        <template #default="scope">
                            <div v-if="scope.row.A8 <= 100 && scope.row.A8 >= 60">{{ scope.row.A8 }}</div>
                            <div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A8
                                }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="A9" label="体温(℃)" sortable align="center" min-width="80"
                        show-overflow-tooltip>
                        <template #default="scope">
                            <div v-if="scope.row.A9 >= 36.1 && scope.row.A9 <= 37.2">{{ scope.row.A9 }}</div>
                            <div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A9
                                }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="A10" label="酒精浓度(MG-100ML)" sortable align="center" min-width="90"
                        show-overflow-tooltip>
                        <template #default="scope">
                            <div v-if="scope.row.A10 <= 20">{{ scope.row.A10 }}</div>
                            <div style="color: red; background: pink; width: 100%; height: 100%;" v-else>{{ scope.row.A10
                                }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="100" align="center">
                        <template #default="scope">
                            <div style="display: flex; justify-content: space-evenly;">
                                <el-icon style="cursor: pointer;" size="20" color="#409eff"
                                    @click="handleView(scope.row)">
                                    <View />
                                </el-icon>
                                <el-icon style="cursor: pointer;" size="20" color="#67c23a"
                                    @click="handleDownload(scope.row)">
                                    <Download />
                                </el-icon>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="layout-pagination" :current-page="currentPage" :page-size="pageSize"
                    :page-sizes="pageSizes" :size="size" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
        <Detail v-else :store="store" @close="handleClose" />
    </div>
</template>

<script setup>
import { View } from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from 'vue'
import { disabledDayRange } from '@/utils/disabledDate'
import Detail from './components/detail.vue'

import BLOODPRESSURE from '@/assets/images/pages/blood_pressure.png'
import BLOODOXYGEN from '@/assets/images/pages/blood_oxygen.png'
import HEARTRATE from '@/assets/images/pages/heart_rate.png'
import BODYTEMPERATURE from '@/assets/images/pages/body_temperature.png'

const cardArr = [
    { title: '平均血压', value: '145/95 mmHG', text: '正常范围：90-140/60-90mmHG', url: BLOODPRESSURE, background: '#E9EEFD', round: '#bbc8ef' },
    { title: '平均血氧', value: '98 %', text: '正常范围：95-100%', url: BLOODOXYGEN, background: '#EFF6F5', round: '#b4e9e2' },
    { title: '平均心率', value: '72 BPM', text: '正常范围：60-100BPM', url: HEARTRATE, background: '#FAEDDD', round: '#ffcc8d' },
    { title: '平均体温', value: '36.5 ℃', text: '正常范围：36.1-37.2℃', url: BODYTEMPERATURE, background: '#ECEBF5', round: '#ccc6fb' },
]

const cardListArr = ref([
    { name: '项目总人数', value: '5' },
    { name: '标段总人数', value: '5' },
    { name: '劳务队总人数', value: '5' },
    { name: '健康状态正常人数', value: '1' },
    { name: '健康状态异常人数', value: '4' },
])
const projectList = ref([])
const sectionList = ref([])
const projectState = ref('')
const sectionState = ref('')
const laborTeamList = ref([])
const laborTeamState = ref('')
const dateRange = ref([])
const input = ref('')
const tableLoading = ref(false)
const tableHeight = ref('40vh')
const tableRef = ref(null)
const currentPage = ref(1)
const pageSize = ref(30)
const pageSizes = ref([30, 50, 100])
// const total = ref(0)
const background = ref(true)
const disabled = ref(false)
const size = ref('default')
const tableData = ref([
    { A1: '2023-05-01 10:00:00', A2: '张三', A3: '男', A4: '22', A5: '电工', A6: '142/80', A7: '94', A8: '101', A9: '36.0',A10: 0 },
    { A1: '2023-05-02 10:00:00', A2: '李四', A3: '男', A4: '23', A5: '司机', A6: '122/81', A7: '95', A8: '78', A9: '35.1',A10: 0 },
    { A1: '2023-05-03 10:00:00', A2: '王五', A3: '男', A4: '24', A5: '焊工', A6: '126/88', A7: '96', A8: '85', A9: '37.5',A10: 0},
    { A1: '2023-05-04 10:00:00', A2: '赵六', A3: '男', A4: '25', A5: '钢筋工', A6: '110/88', A7: '93', A8: '95', A9: '36.2' ,A10: 21},
    { A1: '2023-05-05 10:00:00', A2: '宋七', A3: '男', A4: '26', A5: '架子工', A6: '130/89', A7: '97', A8: '80', A9: '36.5',A10: 20 },
])
const isBloodPressureNormal = (pressure) => {
    if (!pressure) return false;

    const [systolic, diastolic] = pressure.split('/').map(Number);
    return systolic >= 90 && systolic <= 140 &&
        diastolic >= 60 && diastolic <= 90;
};

const handleCurrentChange = () => { }
const handleSizeChange = () => { }
const onSearch = () => { }
const onExport = () => { }

const store = reactive({
    openDditFlag: true,
});
const handleView = (row) => {
    console.log(row);
    store.openDditFlag = false;
}

const handleDownload = (row) => {
    console.log(row);
}

const handleClose = () => {
    store.openDditFlag = true;
}

onMounted(() => {

})
</script>
