<template>
    <MyDialog v-if="show" v-model="show" width="1200px" height="550px" class="projectSpecialDlg">
        <template slot="title">{{title}}</template>
        <div class="head-title-tab">
            <div :class="nav == 'all' ? 'head-nav active' : 'head-nav'" @click="doNav('all')">全部数据({{ tags.all }})</div>
            <div :class="nav == 'wgq' ? 'head-nav active' : 'head-nav'" @click="doNav('wgq')">未过期({{ tags.wgq }})</div>
            <div :class="nav == 'ygq' ? 'head-nav active' : 'head-nav'" @click="doNav('ygq')">已过期({{ tags.ygq }})</div>
            
        </div>
        <el-table :data="dataList" class="mytable" style="width: 100%;background: transparent;" height="470">
            <el-table-column prop="deptName" align="center" label="所属单位" width="100"></el-table-column>
            <el-table-column prop="name" align="center" label="人员名称" width="80"></el-table-column>
            <el-table-column prop="sex" align="center" label="性别" width="60">
                <template slot-scope="scope">
                    <span v-if="scope.row.sex==0">男</span>
                    <span v-if="scope.row.sex==1">女</span>
                    <span v-if="scope.row.sex==2">未知</span>
                </template>
            </el-table-column>
            <el-table-column prop="phoneNumber" align="center" label="联系方式" width="110"> </el-table-column>
            <el-table-column label="人员类型" align="center" prop="specialTypeName"></el-table-column>
            <el-table-column label="证书编号" align="center" prop="credentialNumber"></el-table-column>
            <el-table-column label="证书过期时间" align="center" prop="credentialExpirationTime"></el-table-column>
            <el-table-column label="证书类型" align="center" prop="credentialType" v-if="false"></el-table-column>
            <el-table-column label="提交时间" align="center" prop="createTime" width="100"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-download"
                        @click="handledownload(scope.row)"
                    >查看证书</el-button>
                </template>
            </el-table-column>
        </el-table>
    </MyDialog>
</template>

<script>
import '@/components/module/module-one-1-1'
import MyDialog from '../components/MyDialog'

export default {
    components: {
        MyDialog,
    },
    name: 'projectSpecialDlg',
    data() {
        return {
            title:'',
            data: null,
            dataList: [],
            show: false,
            nav:"wgq",
            specialType:"0",
            tags:{
                all:0,
                wgq:0,
                qgq:0
            },
        };
    },

    /**特种作业人员数据 */
    mounted() {
        this.data = null;
    },

    methods: {
        /** 下载证书 */
        handledownload(row){
            window.open('/jhapi'+row.credentialFile);
        },
        showDialog(it) {
            this.data = it;
            this.title = it.title;
            this.getList();
            this.queryCount();
        },
        doNav(nav) {
            this.nav = nav;
            this.getList();
        },
        getList(){
            this.$api.special.getProjectSpecialList(this.data.projectId,this.nav,this.specialType).then(response => {
                this.dataList = response.rows;
                this.show = true;
            });
        },
        queryCount(){
            this.$api.special.findWorkSpecialCount(this.data.projectId,this.specialType).then(response => {
                if (response && response.data) {
                    let sum = 0;
                    if (response.data.notExpired) {
                        sum += response.data.notExpired;
                        this.tags.wgq = response.data.notExpired;
                    }
                    if (response.data.expired) {
                        sum += response.data.expired;
                        this.tags.ygq = response.data.expired;
                    }
                    this.tags.all = sum;
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.mytable {
    /deep/ th .cell {
        color: aquamarine;
    }
}
.head-title-tab {
        padding-top: 12px;
        display: block;
        width: 100%;

        .head-nav {
            background-size: 100% 100%;
            display: inline-block;
            width: auto;
            padding: 0px 24px;
        }
    }
</style>