<template>
    <MyDialog v-if="show" v-model="show" width="60vw" height="65vh" class="attendance-info-dlg">
        <template slot="title">
            {{ title }}
        </template>
        <div class="head-title-tab" style="padding: 10px 0px;">
            <div v-for="it in types" :key="it.value" :class="nav == it.value ? 'head-nav active' : 'head-nav'"
                @click="doNav(it)">{{ it.label }}({{ getTypeCount(it) }})</div>
        </div>
        <el-table v-loading="loading" :data="dataList" v-if="type == 0" class="data-list">
            <el-table-column label="头像" align="center">
                <template #default="scope">
                    <el-image :src="scope.row.user.userPicture"  :preview-teleported="true"
                        class="att-img" :preview-src-list="[scope.row.user.userPicture]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="user.userName" />
            <el-table-column label="籍贯" align="center" prop="info.nativePlace" />
            <el-table-column label="性别" align="center" prop="user.sex" />
            <el-table-column label="状态" align="center" prop="enterState">
                <template #default="scope">
                    <span v-if="scope.row.enterState == 0" style="color: green;">在场</span>
                    <span v-else style="color: red">离场</span>
                </template>
            </el-table-column>
            <el-table-column label="进场日期" align="center" prop="createTime" :width="$dpi() == '1K' ? '120px' : $dpi() == '2K'?'200px':'300px'">
                <template #default="scope">{{ scope.row.createTime | toDate }}</template>
            </el-table-column>

            <el-table-column label="所属单位" align="center" prop="subDeptName" />
            <el-table-column label="班组" align="center" prop="subDeptGroupName" :width="$dpi() == '1K' ? '120px' : $dpi() == '2K'?'200px':'300px'"/>
            <el-table-column label="工种类型" align="center" prop="craftType">
                <template #default="scope">
                    <dict-tag :options="types" :value="scope.row.craftType" />
                </template>
            </el-table-column>
            <el-table-column label="工种岗位" align="center" prop="craftPost">
                <template #default="scope">
                    <dict-tag :options="pro_craft_post" :value="scope.row.craftPost" />
                </template>
            </el-table-column>

            <el-table-column label="出生日期" align="center" prop="info.birthDayStr" v-if="false" />

        </el-table>
        <el-table v-loading="loading" :data="dataList" v-if="type == 1" class="data-list">
            <el-table-column label="进场照片" align="center" prop="inPhoto">
                <template #default="scope">
                    <el-image v-if="scope.row.inPhoto" :src="scope.row.inPhoto" class="att-img"
                        :preview-teleported="true" :preview-src-list="[scope.row.inPhoto]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="userName" />
            <el-table-column label="项目" align="center" prop="projectName" />
            <el-table-column label="单位" align="center" prop="subDeptName" />
            <el-table-column label="进场时间" align="center" prop="inTime" width="180">
                <template #default="scope">
                    <span v-if="scope.row.inTime">{{ scope.row.inTime | toTime }}</span>
                    <span v-else class="el-icon-close" style="color: red;font-weight: bold;"></span>
                </template>
            </el-table-column>

            <el-table-column label="离场照片" align="center" prop="outPhoto">
                <template #default="scope">
                    <el-image v-if="scope.row.outPhoto" :src="scope.row.outPhoto" class="att-img"
                        :preview-teleported="true" :preview-src-list="[scope.row.outPhoto]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="离场时间" align="center" prop="outTime">
                <template #default="scope">
                    <span v-if="scope.row.outTime">{{ scope.row.outTime | toTime }}</span>
                    <span v-else class="el-icon-close" style="color: red;font-weight: bold;"></span>
                </template>
            </el-table-column>
            <el-table-column label="班组" align="center" prop="subDeptGroupName" :width="$dpi() == '1K' ? '120px' : $dpi() == '2K'?'200px':'400px'"/>
            <el-table-column label="工种类型" align="center" prop="craftType">
                <template #default="scope">
                    <dict-tag :options="types" :value="scope.row.craftType" class="dict-tag" />
                </template>
            </el-table-column>
            <el-table-column label="工种岗位" align="center" prop="craftPost">
                <template #default="scope">
                    <dict-tag :options="pro_craft_post" :value="scope.row.craftPost" class="dict-tag" />
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="total,prev, pager, next" :hide-on-single-page="true"
            @current-change="handleCurrentChange" :total="total" :page-size="size" :current-page.sync="index"
            class="bg-pagination"></el-pagination>
    </MyDialog>
</template>

<script>
export default {
    //在岗人员
    data() {
        return {
            show: false,
            title: '在岗人员',
            prjInfo: {},
            types: [],
            pro_craft_post: [],
            nav: 1,
            attendanceData: [],
            type: 0,
            size: 10,
            index: 1,
            total: 0,
            dataList: [],
            loading: false,
        }
    },
    methods: {
        handleCurrentChange(n) {
            this.index = n;
            this.loadData();
        },
        showDialog(opt) {
            this.prjInfo = opt.prjInfo || {};
            this.type = opt.type || 0;
            this.title = this.type == 0 ? "在岗人员" : "今日出勤";
            this.attendanceData = opt.attendanceData || [];
            this.show = true;
            this.$api.dict("pro_craft_type").then(dicts => {
                this.types = dicts || [];
            });
            this.$api.dict("pro_craft_post").then(dicts => {
                this.pro_craft_post = dicts || [];
            });
            this.index = 1;
            this.loadData();
        },
        loadData() {
            let ajax = this.$api.detail.subdeptsUsersList;
            let postData = {
                pageSize: this.size,
                pageNum: this.index,
                craftType: this.nav,
                comId: this.prjInfo.comId,
                projectId: this.prjInfo.id
            };
            if (this.type == 1) {
                ajax = this.$api.detail.attendanceUbiDataList;
                postData = {
                    pageSize: this.size,
                    pageNum: this.index,
                    comId: this.prjInfo.comId,
                    projectId: this.prjInfo.id,
                    craftType: this.nav,
                    inTime: '2024-10-14'
                };
            }
            this.loading = true;
            ajax(postData).then(d => {
                this.loading = false;
                if (this.type == 0) {
                    this.dataList = (d.rows || []).map(d => {
                        d.info = this.$tryToJson(d.user?.userInfos || "{}")
                        d.user = d.user || {};
                        if (d.info.birthDay) {
                            let birthDay = this.$dt(d.info.birthDay).format("YYYY-MM-DD");
                            d.info.birthDayStr = birthDay;
                            d.info.age = this.$dt(new Date()).diff(d.info.birthDay, 'year');
                        }
                        return d;
                    });
                } else {
                    this.dataList = d.rows || [];
                }
                this.total = d.total || 0;
            });
        },
        doNav(n) {
            this.nav = n.value;
            this.index = 1;
            this.loadData();
        },
        getTypeCount(it) {
            let tmps = this.attendanceData.filter(d => d.id == it.value)
            return tmps.length > 0 ? tmps[0].value : 0;
        }
    }
}
</script>

<style lang="less">
.attendance-info-dlg {
        .data-list {
            margin-top:10px;
            th {
                .cell {
                    font-size: 14px;
                }
            }

            td {
                .cell {
                    font-size: 14px;
                    .el-tag{
                        font-size:12px;
                        height: 30px;
                        line-height: 30px;
                    }
                }
            }

            .el-table__empty-text {
                font-size: 14px;
            }

            .el-table__row {
                &:nth-child(odd) {
                    background-size: 100% 55px;
                }

                td {
                    height: 60px;
                }
            }

            .el-image.att-img {
                img {
                    height: 40px;
                }

                .el-image__error {
                    height: 50px;
                    position: relative;
                    top: 10px;
                }
            }

            .el-icon-close {
                font-size: 20px;
            }
        }

        .el-pagination {
            * {
                font-size: 14px !important;
                height: 28px !important;
                line-height: 28px !important;
                vertical-align: middle !important;
            }

        }
    }

@media (min-width: 1921px) and (max-width: 2560px) {
    .attendance-info-dlg {
        .data-list {
            th {
                .cell {
                    font-size: 20px;
                }
            }

            td {
                .cell {
                    font-size: 20px;
                    .el-tag{
                        font-size:20px;
                        height: 30px;
                        line-height: 30px;
                    }
                }
            }

            .el-table__empty-text {
                font-size: 20px;
            }

            .el-table__row {
                &:nth-child(odd) {
                    background-size: 100% 70px;
                }

                td {
                    height: 80px;
                }
            }

            .el-image.att-img {
                img {
                    height: 60px;
                }

                .el-image__error {
                    height: 60px;
                    position: relative;
                    top: 10px;
                }
            }

            .el-icon-close {
                font-size: 30px;
            }
        }

        .el-pagination {
            * {
                font-size: 20px !important;
                height: 36px !important;
                line-height: 36px !important;
                vertical-align: middle !important;
            }

        }
    }
}

@media (min-width: 2561px) {
    .attendance-info-dlg {
        .data-list {            
            th {   
                height: 50px;             
                .cell {
                    font-size: 30px;
                    line-height: 48px;
                }
            }

            td {
                height: 50px;          
                .cell {
                    font-size: 30px;
                    line-height: 48px;
                    .el-tag{
                        font-size:30px;
                        height: 48px;
                        line-height: 48px;
                    }
                }
            }

            .el-table__empty-text {
                font-size: 30px;
            }

            .el-table__row {
                &:nth-child(odd) {
                    background-size: 100% 90px;
                }

                td {
                    height: 100px;
                }
            }

            .el-image.att-img {
                img {
                    height: 80px;
                }

                .el-image__error {
                    height: 80px;
                    position: relative;
                    top: 16px;
                }
            }

            .el-icon-close {
                font-size: 40px;
            }
        }

        .el-pagination {
            * {
                font-size: 30px !important;
                height: 48px !important;
                line-height: 48px !important;
                vertical-align: middle !important;
            }

        }
    }
}
</style>