<template>
    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" class="project-standard-dialog">
        <template slot="title">项目标准化管理{{ prjName?' - '+prjName:'' }}</template>
        <div class="head-title-tab" style="padding: 10px 0px;width:unset;">
            <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">现场管理标准化</div>
            <div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(2)">作业标准化</div>
            <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">安全技术标准化</div>
            <div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">文明施工标准化</div>
            <div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">设备管理标准化</div>            
            <div :class="nav == 6 ? 'head-nav active' : 'head-nav'" @click="doNav(6)">环境保护标准化</div>
        </div>
        <div class="image-list">
            <imageItem v-for="(it,idx) in tableData" :key="idx" :info="it"></imageItem>
        </div>        
        <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>
import MyDialog from '../components/MyDialog'
import imageItem from './enginImageItem.vue'
export default {
    components: {
        MyDialog,imageItem
    },
    name: 'JhbigscreenIndexDlg1',

    data() {
        return {
            show: false,
            tableData: [],
            nav: 1,
            index: 1,
            size: 8,
            deptId: 0,
            projectId: 0,
            total: 0,
            prjName:'',
        };
    },

    mounted() {

    },

    methods: {
        handleCurrentChange(n) {
            this.index = n;
            this.loadData();
        },
        doNav(n) {
            this.nav = n;
            this.index = 1;
            this.loadData();
        },
        showDialog(data) {
            this.deptId = data.deptId;
            this.projectId = data.projectId;
            if(data.prj){
                this.prjName=data.prj.name
            }else{
                this.prjName="";
            }
            this.nav = 1;
            this.index = 1;
            this.loadData();
            this.show = true
        },
        loadData() {
            let data = {
                projectId: this.projectId,
                deptId: this.deptId,
                standardType: this.nav,
            }
            this.$api.standard.selectList(this.index, this.size, data).then(d => {
                this.tableData = d.rows || [];
                this.total = d.total;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.mytable {
    /deep/ th .cell {
        color: aquamarine;
    }
}
</style>
<style lang="less">
.project-standard-dialog {
    .popup-project-introduction-min {
        transform: translateY(100px);
    }
    .bg-pagination {
        margin-top: 20px;
    }
    .head-title-tab{
        max-width: unset;
        .head-nav{
            width:177px;
        }
    }
    .image-list{
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        .engin-image-item{
            height: 300px;
            .div-img{
                width: 100%;
                .el-image{
                    width:100%;
                }
            }
            
        }
    }
}
</style>