<template>
    <el-container class="problem_list">
        <el-main style="padding: 10px 10px;">
            <div class="content_wrapper">
                <el-form ref="form" :inline="true" label-width="84px">
                    <el-form-item label="问题名称">
                        <el-input v-model="pblmNm" clearable autocomplete="off" style="width: 160px"></el-input>
                    </el-form-item>
                    <el-form-item label="单位名称">
                        <el-input v-model="subjectNames" clearable autocomplete="off" style="width: 160px"></el-input>
                    </el-form-item>
                    <el-form-item label="严重程度">
                        <el-select style="width:180px;" v-model="pblmPasi" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in problemType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- </el-form> -->
                    <!-- <el-form ref="form" :inline="true" label-width="84px"> -->
                    <el-form-item label="是否典型">
                        <el-select style="width:180px;" v-model="ifCasePblm" clearable placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="operate_btn">
                        <el-button style="margin-left:0;padding:7px 10px;" type="primary" @click="getProblemList()">查询
                        </el-button>
                        <el-button style="margin-left:0;padding:7px 10px;" type="primary" @click="toAddFile"
                                   v-if="submitStatus <= 3 || (submitStatus <= 4 && pertype == '19')">添加问题
                        </el-button>
                        <el-button style="margin-left:0;padding:7px 10px;" type="success" @click="exportExcel()">
                            导出excel
                        </el-button>
                        <el-button style="margin-left:0;padding:7px 10px;" type="success" @click="showJobFile()">
                            导出word
                        </el-button>
                    </div>
                </el-form>
                <el-table
                        :data="tableData"
                        border
                        stripe
                        v-loading='loading'
                        :height="tableHeight"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <!--<el-table-column-->
                    <!--prop="sn"-->
                    <!--label="序号"-->
                    <!--min-width="40">-->
                    <!--</el-table-column>-->
                    <!--add by Thy 2020-8-3 10:55:29 架构师提出需求-->
                    <el-table-column align="center" label="序号" min-width="50">
                        <template #default="scope">{{ (pageIndex - 1) * pageSize + (scope.$index + 1) }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="pblmNm"
                            label="问题名称"
                            show-overflow-tooltip
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            prop="pblmDesc"
                            label="问题阐述"
                            show-overflow-tooltip
                            min-width="180">
                    </el-table-column>
                    <el-table-column
                            prop="pblmPasi"
                            show-overflow-tooltip
                            min-width="100"
                            label="严重程度">
                        <template #default="scope">
                            <p v-if="scope.row.pblmPasi == 0"><span class="inspPblmCate"
                                                                    style="background: #27C19F;">一般</span></p>
                            <p v-if="scope.row.pblmPasi == 1"><span class="inspPblmCate"
                                                                    style="background: #E6A23C;">较重</span></p>
                            <p v-if="scope.row.pblmPasi == 2"><span class="inspPblmCate"
                                                                    style="background: #F56C6C;">严重</span></p>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="pblmReason"
                            show-overflow-tooltip
                            min-width="160"
                            label="主要原因分析">
                    </el-table-column>
                    <!-- <el-table-column
                    prop="note"
                    show-overflow-tooltip
                    label="备注">
                    </el-table-column> -->
                    <el-table-column
                            v-if="submitStatus <= 3 || (submitStatus <= 4 && pertype == '19')"
                            label="操作"
                            width="100">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="toEditProblem(scope.row)">编辑</el-button>
                            <el-button @click="deleteProblem(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                    label="操作"
                    width="150">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="toCheckDetail(scope.row)">查看</el-button>
                        <el-button type="text" size="small" v-if="submitStatus <= 3 || (submitStatus <= 4 && pertype == '19')" @click="toEditProblem(scope.row)">编辑</el-button>
                        <el-button @click="deleteProblem(scope.row)" v-if="submitStatus <= 3 || (submitStatus <= 4 && pertype == '19')" type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column> -->
                </el-table>
                <el-pagination style="margin-left: 30px;" :pager-count="5" :current-page="pageIndex" background
                               :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                               :page-sizes="[10, 20, 50, 100]"
                               @current-change="pageIndexChange" @size-change="handleSizeChange"
                ></el-pagination>
            </div>
            <add-problem-com v-if="addFileVisiual" :currentNodeId="currentNodeId" :objId="objId" :listType="type"
                             :pertype="pertype" @dialogClose="dialogClose"></add-problem-com>
            <problem-modify-com v-if="modifyFileVisiual" :problemId="problemId" :listType="type"
                                @dialogClose="dialogClose" :pertype="pertype"></problem-modify-com>
            <problem-detail-com v-if="showFileVisiual" :problemId="problemId"
                                @dialogClose="dialogClose"></problem-detail-com>
            <export-excel v-if="exportEvent" @dialogClose="dialogClose" :currentNodeId="currentNodeId"
                          :listType="type"></export-excel>
            <export-word v-if="exportWordDialog" @dialogClose="dialogClose" :problemId="problemId"
                         :professionType="type"></export-word>
            <export-allinfo-word
                    v-if="exportWordDialog"
                    @dialogClose="dialogClose"
                    :rgstrId="currentNodeId"
                    :professionType="type"
                    :rightTableName="rightTableName"
            ></export-allinfo-word>
        </el-main>
    </el-container>
</template>
<script>
    import request from '@/utils/gw_ajax_request.js'
    import addProblemCom from './dialogCom/addProblemCom.vue'
    import ProblemModifyCom from './dialogCom/ProblemModifyCom.vue'
    import ProblemDetailCom from './dialogCom/ProblemDetails.vue'
    import ExportExcel from './dialogCom/ExportExcel.vue'
    import ExportWord from './dialogCom/ExportWord.vue'
    import axios from 'axios'
    import {hostUrl} from '@/utils/global_variable.js'
    import {getProblemListApi, deleteProblemApi} from '@/api/InspectionReport.js'

    export default {
        props: ['currentNodeId', 'type', 'objId', 'projectName', 'pertype', 'backStatus', 'submitStatus', 'rightTableName'],
        data() {
            return {
                problemType: [
                    {label: '一般', value: '0'},
                    {label: '较重', value: '1'},
                    {label: '严重', value: '2'}
                ],
                pblmPasi: '',  //严重程度
                pblmNm: '',
                showFileVisiual: false,
                subjectNames: '',  //单位名称，多个单位逗号拼接字符串
                ifCasePblm: '',
                tableData: [],
                baseInfo: {
                    nm: '',
                    condition: '',
                    comment: ''
                },
                problemId: '',
                pageIndex: 1,
                pageSize: 20,
                total: 0,
                loading: false,
                addFileVisiual: false,
                modifyFileVisiual: false,
                exportEvent: false,//导出对话框v-if
                exportWordDialog: false,
                problemId: '',
                name: '',
                tableHeight: window.innerHeight - 300,
              showtypical:""
            }
        },
        components: {
            addProblemCom,
            ProblemModifyCom,
            ExportExcel,
            ExportWord,
            ProblemDetailCom
        },
        computed: {
            persId() {
                return localStorage.getItem("userid") ? localStorage.getItem("userid") : "1098101939614724096";
            },
        },
      created() {
        let currentOrgId = localStorage.getItem("currentOrgId")
        if(currentOrgId == '036'){
          this.showtypical=false;

        }else{
          this.showtypical = true;

        }
      },
        mounted() {
            this.getProblemList()
            if (this.type == '6') {
                this.name = '安全管理'
            } else if (this.type == '5') {
                this.name = '工程质量管理-工程实体质量'
            } else if (this.type == '4') {
                this.name = '资金使用与管理'
            } else if (this.type == '3') {
                this.name = '计划下达与执行'
            } else if (this.type == '2') {
                this.name = '建设管理'
            } else if (this.type == '1') {
                this.name = '前期与设计'
            }
        },
        activated() {
        },
        methods: {
            getProblemList() {
                this.loading = true
                // this.ifCasePblm = this.ifCasePblm == '0' ? '' : this.ifCasePblm
                let paramsObj = {
                    rgstrId: this.currentNodeId,
                    persId: this.persId,
                    listType: this.type,
                    pblmNm: this.pblmNm,
                    subjectNames: this.subjectNames,
                    pblmPasi: this.pblmPasi,
                    ifCasePblm: this.ifCasePblm,
                    orderBy: 'SN',
                    pageNum: this.pageIndex,
                    pageSize: this.pageSize
                }
                getProblemListApi(paramsObj).then(res => {
                    if (res.success) {
                        this.loading = false
                        this.tableData = res.data.list
                        this.total = res.data.total
                    } else {
                        this.loading = false
                        this.$message.error(res.message)
                    }
                }).catch(err => {
                    this.$message.error(err)
                })
            },
            toAddFile() {
                this.addFileVisiual = true
            },
            //导出Excel
            exportExcel() {
                this.exportEvent = true
            },
            //导出Word
            exportWord() {
                this.exportWordDialog = true
            },
            toEditProblem(row) {
                this.problemId = row.id
                this.modifyFileVisiual = true
            },
            deleteProblem(row) {
                this.$confirm('确认删除该问题吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteProblemApi(row.id).then(res => {
                        if (res.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getProblemList()
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.message
                            });
                        }
                    })
                })
            },
            pageIndexChange(val) {
                this.pageIndex = val;
                this.getProblemList();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getProblemList();
            },
            dialogClose() {
                this.addFileVisiual = false
                this.modifyFileVisiual = false
                this.exportEvent = false
                this.showFileVisiual = false
                this.exportWordDialog = false
                this.getProblemList()
            },
            pblmPasiChange(val) {
                this.getProblemList()
            },
            handleSelectionChange(val) {
                let problemArr = []
                val.forEach(ele => {
                    problemArr.push(ele.id)
                })
                this.problemId = problemArr.join(',')
            },
            showJobFile() {
                // this.exportWordDialog = true
                this.openPageoffice()
            },
            isUsePo() {
                // 是否启用PageOffice
                let _this = this;
                axios.defaults.timeout = 2000;
                axios.get('/pageofficePath/pageoffice/getUsePo').then((res) => {
                    let data = res.data
                    if (data.isUse == 'true') {
                        _this.exportWordDialog = false
                        // 打开PageOffice
                        _this.openPageoffice()
                    } else {
                        _this.exportWordDialog = true
                    }
                }).catch(function (err) {
                    _this.exportWordDialog = true
                })
            },
            openPageoffice: function () {

                let host = hostUrl;
                let nginx = '/pageofficePath/';
                let rgstrId = this.currentNodeId;
                let type = "20" + this.type;
                let persId = this.persId;
                let href = nginx + '/pageoffice/pblmlist/word/' + type + '/' + rgstrId + '?persId=' + persId + '&pblmId=' + this.problemId;
                // let a = document.createElement('a'); // 创建a标签
                // a.setAttribute('href', href);// href链接
                // a.click();// 自执行点击事件
                console.log(href)
                POBrowser.openWindowModeless(href,'width=1100px;height=800px;')
            },
            // 查看问题详情
            toCheckDetail(row) {
                this.problemId = row.id
                this.showFileVisiual = true
            }
        },
        watch: {
            currentNodeId(val) {
                this.getProblemList()
            },
            type(val) {
                this.getProblemList()
            },
            backStatus(val) {
                if (val) {
                    //回退状态为成功时
                    this.getProblemList()
                }
            }
        }
    }
</script>
<style>
    .problem_list {
        .project_title {
            line-height: 50px;
            text-align: center;
            color: #333;
            border-bottom: solid 1px #eee;
        }

        h4 {
            line-height: 50px;
            color: #444;
        }

        .operate_btn {
            float: right;
            margin-bottom: 10px;
        }

        .inspPblmCate {
            padding: 2px 10px;
            border-radius: 10px;
            color: #ffffff;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }

        .el-form-item__label {
            font-size: large;
            color: #333;
        }

        .el-form--inline .el-form-item {
            margin-right: 6px;
        }

        .el-table__header th {
            font-size: large !important;
        }

        tr.el-table__row {
            font-size: large;
        }
    }
</style>
