<template>
    <MyDialog v-if="show" v-model="show" width="880px" class="problem-modify-detail">
        <template slot="title">
            {{ row.projectName}}【{{infoType==0?'安全隐患':'质量隐患' }}】            
        </template>
        <div>
            <div class="head-title-tab">
                <div :class="nav==0?'head-nav active':'head-nav'" @click="doNav(0)">待整改({{count['0']}})</div>
                <div :class="nav==1?'head-nav active':'head-nav'" @click="doNav(1)">待复检({{count['1']}})</div>
                <div :class="nav==3?'head-nav active':'head-nav'" @click="doNav(3)">复检驳回({{count['3']}})</div>
                <div :class="nav==4?'head-nav active':'head-nav'" @click="doNav(4)">复检通过({{count['4']}})</div>
            </div>
            
            <el-table :data="dataTable" :key="elKey"  height="500" widt="100%">                
                <el-table-column label="项目名称" align="center" prop="problemArea" width="200" show-overflow-tooltip/>   
                <el-table-column label="隐患图片" align="center" property="path" width="220">
        <template slot-scope="scope">
          <el-image ref="preview"
            style="width: 200px; height: 100px"
            :src="scope.row.marksPicture"
            >
          </el-image>          
        </template>
      </el-table-column>
      <el-table-column label="隐患描述" align="center" prop="workParts" width="100"  show-overflow-tooltip/>
      <el-table-column label="整改要求" align="center" prop="changeInfo" width="200"  show-overflow-tooltip/>
            </el-table>
        </div>       

    </MyDialog>
</template>

<script>
import '@/components/module/module-one-1-1'
import MyDialog from '../components/MyDialog'
export default {
    components: {
        MyDialog
    },
    data() {
        return {
            elKey:0,
            nav:0,
            infoType:0,
            row:null,
            show: false,
            count:{
                "0":0,
                "1":0,
                "3":0,
                "4":0
            },
            dataTable:[]
        };
    },

    mounted() {
    },

    methods: {
        doNav(n,init) {
            if(n==this.nav && !init){
                return;
            }
            this.nav = n;
            this.$api.problemmodify.listSspProblemmodify({
                projectId:this.row.projectId,
                infoType:this.infoType,
                checkState:n
            }).then(d=>{                
                this.dataTable=d.data||[];
                this.elKey++;
            })
        },
        showDialog(row,infoType) {
            this.row=row;
            this.infoType=infoType;
            this.show = true
            this.doNav(0,true);
            this.$api.problemmodify.groupByInfotypeCheckState({ 
                projectId:this.row.projectId
                }).then(d=>{
                let tmps=(d.data||[]).filter(it=>it.infoType==this.infoType);
                tmps.forEach(it=>{
                    this.count[""+it.checkState]=it.id;
                })
            })
        }
    },
};
</script>

<style lang="less" >
.problem-modify-detail{
    .popup-project-introduction-details{
        padding: 0px !important;
        .quality-table{
            padding:  0px !important;
        }
    }
    .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>