<template>
    <div class="mainBox scroll-target">
        <div class="topZS"></div>
        <div class="title">
            流动人员（<span>{{ total }}</span>）
        </div>
        <el-form :model="formInline" class="search">
            <el-form-item label="人员姓名：" class="formItem">
                <el-input v-model.trim="formInline.flowName" class="formIpt"></el-input>
            </el-form-item>
            <el-button type="primary" @click="getList()">搜索</el-button>
        </el-form>
        <div class="monitorBox">
            <el-tabs type="border-card">
                <el-tab-pane v-for="(item, index) in wpCount" :key="index">
                    <div class="paneInner" slot="label" @click="getList(item.type)">{{ item.type
                    }}（{{ item.number }}）</div>
                </el-tab-pane>丨
            </el-tabs>
            <el-table :cell-style="{ background: 'revert' }" :data="tableData" class="table"
                style="width: calc(100% - 40px);  margin:0 20px;" :row-style="tableRowStyle"
                :header-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
                <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="照片" width="80">
                    <template slot-scope="scope">
                        <img :src="scope.row.picUrl" class="ygzp" alt="">
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="姓名" width="80">
                    <template slot-scope="scope">
                        <div class="staffName">{{ scope.row.flowName }}</div>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="sexCn" label="性别" width="60">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="身份证号" width="180">
                    <template slot-scope="scope">
                        <div class="identityId">{{ scope.row.identityId }}</div>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="家庭住址" prop="homeAddress">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="contactInfo" label="联系方式" width="150">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="registerStatusCn" label="登记状态" width="180">
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[5]" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <div class="bottomZS"></div>
    </div>
</template>
<script>
import { tbSafeCompanyFlow, tbSafeCompanyFlowCount } from '@/api/archives'
export default {
    props: ['companyID'],
    data() {
        return {
            formInline: {},
            pageSize: 5,
            pageNum: 1,
            total: 0,
            tableData: [],
            wpCount: {},
            goodsType: null,
        }
    },
    created() {
        this.getList()

    },
    methods: {
        getWpTotal() {
            tbSafeCompanyFlowCount({ companyId: this.companyID, ...this.formInline, }).then(res => {
                this.wpCount = res.data
                this.wpCount.forEach((item) => {
                    if (item.type == '全部') {
                        this.wpCount = this.wpCount.filter(a => a.type != '全部')
                        this.wpCount.unshift(item)
                    }
                });

            })
        },
        getList(val) {
            if (val) {
                if (val == '全部') {
                    this.goodsType = null
                } else if (val == '流动已登记') {
                    this.goodsType = 1
                } else if (val == '流动未登记') {
                    this.goodsType = 2
                }
            }
            tbSafeCompanyFlow({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID, registerStatus: this.goodsType }).then(res => {
                this.tableData = res.data
                this.total = res.total
            })
            this.getWpTotal()
        },
        showDia() {
            this.diaVisible = true
        },
        tableRowStyle({ rowIndex }) {
            if ((rowIndex + 1) % 2 == 1) {
                return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
            } else {
                return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
            }
        },
        tableHeaderColor() {
            return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
            // return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
        },
        tableHeaderCellColor() {
            return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' }
        },
        handleSizeChange(val) {
            this.pageNum = 1;
            this.pageSize = val;
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList()
        },

    },
}
</script>
<style lang="less" scoped>
.mainBox {
    width: 100%;
    height: 720px;
    background: url('~@/assets/companyFile/背景22136.png') no-repeat;
    background-size: 100% 100%;
    padding: 70px 20px 60px;
    box-sizing: border-box;
    display: flex;
    position: relative;
    margin-top: 20px;

    .monitorBox {
        width: 100%;
        height: 100%;


        flex-wrap: wrap;
    }

    /deep/.el-input__inner {
        // background: url('~@/assets/companyFile/2121.png') no-repeat;
        background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
        background-size: 100% 100%;
        border: 1px solid rgba(40, 132, 126, 1);
        color: rgba(234, 246, 255, 0.7);
        ;

        .el-range-separator {
            color: #ccc;
        }

        .el-range-input {
            background: rgba(0, 0, 0, 0);
            color: #ccc;
        }
    }

    /deep/.el-tabs--border-card {
        background: rgba(0, 0, 0, 0);
        border: 0;
        height: 50px;
        width: calc(100% - 40px);
        margin: 0 20px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);

        .el-tabs__header {
            display: inline-block;
            width: auto;
            background: linear-gradient(180deg, rgba(234, 241, 248, 0.1) 0%, rgba(208, 222, 238, 0.1) 100%);
            opacity: 0.7;
            border: 1px solid #5B748C;

            .el-tabs__nav {
                display: inline-block;
                width: auto;
                display: flex;

            }

            .el-tabs__item {
                width: 150px;
                border: 0;
                color: #EAF6FF;
                padding: 5px;
                box-sizing: border-box;
                display: flex;
                align-items: center;

                .paneInner {
                    width: 140px;
                    height: 100%;

                    display: flex;
                    justify-content: center;
                    align-items: center;

                }




            }

            .el-tabs__item:not(:last-child)::after {
                content: '';
                width: 1px;
                height: 20px;
                background: #EAF6FF;
                display: inline-block;
                vertical-align: middle;
                margin-left: 5px;
            }

            .el-tabs__item.is-active {
                background: rgba(0, 0, 0, 0);

                border: 0;
                color: #4BFFAD;
                padding: 5px;
                box-sizing: border-box;

                .paneInner {
                    background: rgba(129, 255, 204, 0.26);
                }
            }
        }
    }

    /deep/.el-table {
        background: rgba(0, 0, 0, 0);

        td.el-table__cell {
            border: 0;
            box-sizing: border-box;
            padding: 5px 0;
        }

        .ygzp {
            width: 40px;
            height: 60px;
            margin-top: 5px;
        }

        .identityId {
            color: #30C4FF;
            letter-spacing: 1px;
            cursor: pointer;
        }

        .xiangqing {
            background: rgba(0, 0, 0, 0);
            border: 0;
            color: rgba(48, 196, 255, 0.7);
            cursor: pointer;
        }

        .alarmType {
            width: 72px;
            height: 32px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            letter-spacing: 1px;
            font-weight: 400;

            .red {
                width: 100%;
                height: 100%;
                background: rgba(152, 7, 7, 0.21);
                border: 1px solid rgba(214, 38, 38, 1);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .yellow {
                width: 100%;
                height: 100%;
                background: rgba(152, 95, 7, 0.21);
                border: 1px solid rgba(255, 169, 38, 1);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .title {
        position: absolute;
        top: 14px;
        left: 20px;
        width: 162px;
        height: 36px;
        line-height: 36;

        font-size: 16px;
        color: #EBFFF4;
        letter-spacing: 2px;
        line-height: 36px;
        text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
        font-weight: 400;

        span {
            color: #FF9191;
        }
    }

    .picForm {
        /deep/ .el-dialog {
            background-color: rgba(0, 0, 0, 0);
            background: url('~@/assets/companyFile/背景091.png') no-repeat;
            background-size: 100% 100%;
            width: 1041px;
            height: 420px;
            position: relative;

            .el-dialog__title {
                font-size: 16px;
                color: #EBFFF4;
                letter-spacing: 2px;

                text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
                font-weight: 400;
            }

            .el-dialog__body {
                box-sizing: border-box;
                height: 360px;

                .scopeQuantity {
                    letter-spacing: 2px;
                }

            }
        }
    }

    /deep/.el-form-item {
        display: flex;
        margin-left: 20px;

        .el-form-item__label {
            color: #EAF6FF;
            letter-spacing: 1px;
            text-align: center;
            font-weight: 400;


        }

    }

    /deep/.el-button--primary {
        margin-top: 5px;
        margin-left: 20px;
        width: 60px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        text-align: center;
        background: rgba(0, 0, 0, 0);
        border: 0;
        background: url('~@/assets/companyFile/2121.png') no-repeat;
        background-size: 100% 100%;
        font-size: 14px;
        color: #F8FBFF;
        letter-spacing: 0.89px;
        font-weight: 500;
    }
}
</style>