<template>
    <div class="dangerousBigProject">
        <div v-if="dialogFormVisible">
            <div class="search-box">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                    <el-form-item label="作业票编号">
                        <el-input placeholder="请输入" v-model="formInline.workTicketCode" clearable style="width: 200px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="作业申请单位">
                        <el-select v-model="formInline.enterpriseId" filterable placeholder="请选择">
                            <el-option :label="item.enterpriseName" :value="item.id"
                                v-for="(item, index) in responsibilityList" :key="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="作业人">
                        <el-input placeholder="请输入" v-model="formInline.firemanName" clearable style="width: 200px">
                        </el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" plain>{{
                            $t('message.quality.inquire')
                        }}</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="onRefresh" plain>刷新</el-button>
                    </el-form-item>
                </el-form>
                <!-- 新增 -->
                <!-- <el-button v-permission="{key: 'wdgc_add', menuPath: '/project/dangerousBigProject/parameter'}"  type="primary" @click="showAddDialog()" size="small">
            
            {{ $t('message.dangerousBigProject.add') }}
          </el-button> -->
                <!-- <el-button type="danger" size="small">批量删除</el-button> -->
            </div>
            <div class="table-box">
                <el-table class="tables" :data="tableData" size="small" @cell-click="previewDetail"
                    @selection-change="handleSelectionChange" :header-cell-style="{ 'text-align': 'center' }">
                    <!-- <el-table-column type="selection" align="center" width="60px"></el-table-column> -->
                    <el-table-column label="序号" type="index" align="center"></el-table-column>
                    <el-table-column align="center" width="200"  label="作业票编号" prop="workTicketCode">
                        <template slot-scope="scope">
                            <div class="" style="display: flex;justify-content:center;font-weight:bold">
                                <div style="display: flex" :style="tableData.some(item => item.engineeringState == 3) ? 'justify-content:flex-end' : 'justify-content:center;'">
                                    <el-tag type="danger" effect="dark" size="mini"
                                        v-if="scope.row.engineeringState === 3">超期</el-tag>
                                    <!-- <el-tag type="danger" effect="dark" size="mini">超期</el-tag> -->
                                    <p class="item-title" style="margin-left:5px">{{ scope.row.workTicketCode }}</p>
                                </div>
                                <!-- <p>{{scope.row.people}}识别于：{{ scope.row.date }}</p> -->
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="盲板编号" prop="blindPlateNo"></el-table-column>
                    <el-table-column align="center" label="作业申请单位" show-overflow-tooltip>
                        <!--  作业申请单位 -->
                        <template slot-scope="scope">
                            {{ scope.row.jobApplicationUnitName }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="实际作业开始时间" prop="workExecutionBeginTime" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" label="作业类别" prop="jobType" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ JSON.parse(scope.row.jobType).map(item => item).join('、') }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="设备、管道名称" prop="devPipelineName" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" label="作业人" prop="jobPersonName"></el-table-column>
                    <el-table-column align="center" label="监护人" prop="guardianName"></el-table-column>
                    <el-table-column align="center" label="作业单位" prop="operatingUnitName" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" label="作业负责人" prop="assignmentPersonInChargeName"></el-table-column>
                    <!-- 状态 -->
                    <el-table-column :label="$t('message.dangerousBigProject.finalAcceptanceStatus')" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.finalAcceptanceStatus === 1"
                                style="color:#DAA520;font-weight:bold;">进行中</span>
                            <span v-if="scope.row.finalAcceptanceStatus === 2"
                                style="color:#008000;font-weight:bold;">已闭合</span>
                        </template>
                    </el-table-column>
                    <!-- 操作 -->
                    <el-table-column align="center" :label="$t('message.dangerousBigProject.operation')" width="120">
                        <template slot-scope="scope">
                            <!-- <el-button
                          @click.native.prevent="viewData(scope.$index, tableData)"
                          type="text"
                          size="small">
                              查看
                          </el-button> -->
                            <!-- <el-button
                          @click.native.prevent="editData(scope.$index, tableData)"
                          type="text"
                          size="small">
                              编辑
                          </el-button> -->
                            <!-- <el-button
                v-permission="{key: 'wdgc_edit', menuPath: '/project/dangerousBigProject/parameter'}" 
                  @click.stop="editRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                >
                  <i class="el-icon-edit"></i>
                </el-button> -->
                            <!-- v-permission="{key: 'wdgc_delete', menuPath: '/project/dangerousBigProject/parameter'}"  -->
                            <el-button v-if="$store.state.userInfo.accountType != 6 || ($store.state.userInfo.userId == scope.row.assignmentPersonInCharge)"
                                v-permission="{key: 'blindPlugWork_delete', menuPath: '/project/specialWork/blindPlugWork'}"
                                @click.stop="deleteRow(scope.$index, tableData)" type="text" size="small">
                                <i class="el-icon-delete"></i>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagerBox" background @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page.sync="pageNo" layout="sizes, prev, pager, next"
                    :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="Number(total)">
                </el-pagination>
            </div>
            <el-dialog :modal-append-to-body="false" :title="$t('message.dangerousBigProject.hint')"
                :visible.sync="deleteDialog" width="30%">
                <span>
                    <!-- 是否确定删除该条记录？ -->
                    {{ $t('message.dangerousBigProject.hintContent') }}
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteDialog = false">
                        <!-- 取 消 -->
                        {{ $t('message.dangerousBigProject.cancel') }}
                    </el-button>
                    <el-button type="primary" @click="checkDelete">
                        <!-- 确 定 -->
                        {{ $t('message.dangerousBigProject.confirm') }}
                    </el-button>
                </span>
            </el-dialog>
        </div>
        <div style="height: 100%" v-else>
            <el-page-header @back="goBack" :content="dialogTitle" class="backText"
                :class="{ dark: styleType == 2 }"></el-page-header>
            <!-- <addPlan @cancleSave="goBack" v-if="isAdd"></addPlan> -->
            <detail :id="detailId" :isSuperDanger="isSuperDanger" :tableName="'管道、盲板分析'" :workType="4" :COMPANY_Type="'longguang'" @cancleSave="goBack"
                :workDetail="workDetail" v-if="isEdit">
                <template v-slot:basicinfo>
                    <div class="info-content">
                        <el-form class="form-box" :model="workDetail">
                            <el-form-item label="作业票编号：" :label-width="formLabelWidthDetail">
                                {{ workDetail.workTicketCode }}
                            </el-form-item>
                            <el-form-item label="作业类别：" :label-width="formLabelWidthDetail">
                                <span v-for="(item,i) in (workDetail.pipelineParameter&& JSON.parse(workDetail.pipelineParameter) instanceof Array && JSON.parse(workDetail.jobType))" :key="i">
                                    <span style="margin-right:5px">{{item}}</span>
                                </span>
                                <!-- {{ workDetail.jobType }} -->
                            </el-form-item>
                            <el-form-item label="作业单位：" :label-width="formLabelWidthDetail">
                                <el-select v-model="workDetail.operatingUnit" placeholder="请选择作业单位" disabled>
                                    <el-option :label="item.enterpriseName" :value="item.id"
                                        v-for="(item, index) in responsibilityList" :key="index">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="申请单位：" :label-width="formLabelWidthDetail">
                                <el-select v-model="workDetail.jobApplicationUnit" placeholder="请选择作业申请单位" disabled>
                                    <el-option :label="item.enterpriseName" :value="item.id"
                                        v-for="(item, index) in responsibilityList" :key="index">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="作业负责人：" :label-width="formLabelWidthDetail">
                                {{ workDetail.assignmentPersonInChargeName }}
                            </el-form-item>
                            <el-form-item label="编制时间：" :label-width="formLabelWidthDetail">
                                {{ workDetail.organizerDate }}
                            </el-form-item>
                            <!-- <el-form-item label="设备、管道名称：" :label-width="formLabelWidthDetail">
                                {{ workDetail.devPipelineName  }}
                            </el-form-item>
                            <el-form-item label="管道参数：" :label-width="formLabelWidthDetail">
                                {{workDetail.pipelineParameter&& JSON.parse(workDetail.pipelineParameter) instanceof Array && JSON.parse(workDetail.pipelineParameter).map(item => `介质(${item.materialQuality ? item.materialQuality : ''})、温度(${item.specifications ? item.specifications : ''})、压力(${item.number ? item.number : ''})`).join('，')}}
                            </el-form-item>
                            <el-form-item label="盲板参数：" :label-width="formLabelWidthDetail">
                                {{workDetail.blindPlateParameter&& JSON.parse(workDetail.blindPlateParameter) instanceof Array && JSON.parse(workDetail.blindPlateParameter).map(item => `材质(${item.medium? item.medium : ''})、规格(${item.temperature? item.temperature : ''})、编号(${item.pressure? item.pressure : ''})`).join('，')}}
                            </el-form-item> -->
                            
                            <!-- <el-form-item label="介质：" :label-width="formLabelWidthDetail">
                                {{ workDetail.jobContent }}
                            </el-form-item>
                            <el-form-item label="温度：" :label-width="formLabelWidthDetail">
                                {{ workDetail.jobContent }}
                            </el-form-item>
                            <el-form-item label="压力：" :label-width="formLabelWidthDetail">
                                {{ workDetail.jobContent }}
                            </el-form-item>
                            <el-form-item label="材质：" :label-width="formLabelWidthDetail">
                                {{ workDetail.jobContent }}
                            </el-form-item>
                            <el-form-item label="规格：" :label-width="formLabelWidthDetail">
                                {{ workDetail.jobContent }}
                            </el-form-item>
                            <el-form-item label="编号：" :label-width="formLabelWidthDetail">
                                {{ workDetail.jobContent }}
                            </el-form-item> -->
                            <el-form-item label="作业人：" :label-width="formLabelWidthDetail">
                                {{ workDetail.jobPersonName }}
                            </el-form-item>
                            <el-form-item label="盲板位置图：" :label-width="formLabelWidthDetail">
                                    <span class="value" v-if="workDetail.blindPlatePic && JSON.parse(workDetail.blindPlatePic).length > 0"  
                                        style="display: flex;justify-content:flex-start;word-wrap: break-word;white-space: normal; flex-wrap: wrap">
                                        <div v-for="(item,index) in JSON.parse(workDetail.blindPlatePic)" :key="index" style="">
                                            <!-- <img :preview="item ? $store.state.FILEURL + item.url : ''"
                                                :src="item ? $store.state.FILEURL + item.url : ''" alt="" width="50px" height="50px" style="margin-right: 10px;"/> -->
                                                <el-image 
                                                    style="width: 50px; height: 50px;margin-right: 10px;"
                                                    :src="item ? $store.state.FILEURL + item.url : ''" 
                                                    :preview-src-list="[item ? $store.state.FILEURL + item.url : '']">
                                                </el-image>
                                            </div>
                                    </span>
                                <!-- {{ workDetail.blindPlatePic }} -->
                                <!-- {{workDetail.blindPlatePic&& JSON.parse(workDetail.blindPlatePic) instanceof Array && JSON.parse(workDetail.blindPlatePic).map(item => item.name).join('、')}} -->
                            </el-form-item>
                            <el-form-item label="盲板编号：" :label-width="formLabelWidthDetail">
                                {{ workDetail.blindPlateNo }}
                            </el-form-item>
                            <!-- <el-form-item label="气体分析时间：" :label-width="formLabelWidthDetail">
                                <el-date-picker :disabled="isDisabledDetail" v-model="planDate" type="daterange"
                                    :picker-options="pickerOptions" range-separator="至" value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item> -->
                            <!-- <el-form-item label="证书编号：" :label-width="formLabelWidthDetail">
                                {{ workDetail.certificateNo }}
                            </el-form-item> -->
                            <el-form-item label="监护人：" :label-width="formLabelWidthDetail">
                                {{ workDetail.guardianName }}
                            </el-form-item>
                            <el-form-item label="编制人：" :label-width="formLabelWidthDetail">
                                {{ workDetail.organizer }}
                            </el-form-item>
                            <el-form-item label="风险辨识结果：" :label-width="formLabelWidthDetail">
                                {{ workDetail.riskIdentificationResult }}
                            </el-form-item>
                            <el-form-item label="关联的其他特殊作业及安全作业票编码：" :label-width="formLabelWidthDetail">
                                {{ workDetail.otherRelatedSpecialTask }}
                            </el-form-item>
                            <!-- <el-form-item label="安全作业票编码：" :label-width="formLabelWidthDetail">
                                {{ workDetail.safetyWorkTicketCode }}
                            </el-form-item> -->
                            <el-form-item label="实际作业开始时间：" :label-width="formLabelWidthDetail">
                                <el-date-picker v-model="workDetail.workExecutionBeginTime" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss" :disabled="isDisabledDetail">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="现场作业环境：" :label-width="formLabelWidthDetail">
                                <div class="img-show">
                                    <el-image
                                        v-for="(item, index) in workDetail.fieldWorkingEnvironment"
                                        :key="index"
                                        style="width: 100px; height: 100px; margin-right: 10px"
                                        :src="item.url"
                                        :preview-src-list="[item.url]"
                                    >
                                    </el-image>
                                </div>
                            </el-form-item>
                            <el-form-item label="安全技术交底：" :label-width="formLabelWidthDetail">
                                <div class="img-show">
                                    <el-image
                                        v-for="(item, index) in workDetail.safetyAndTechnologyDisclosure"
                                        :key="index"
                                        style="width: 100px; height: 100px; margin-right: 10px"
                                        :src="item.url"
                                        :preview-src-list="[item.url]"
                                    >
                                    </el-image>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                <template v-slot:gasanalysis>
                    <div class="gastable">
             
                            <el-row>
                                <el-col :span="3">
                                     &nbsp;
                                </el-col>
                                <el-col :span="9">
                                    管道参数
                                </el-col>
                                <el-col :span="9">
                                    盲板参数
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3">
                                     设备管道名称
                                </el-col>
                                <el-col :span="3">
                                    介质
                                </el-col>
                                <el-col :span="3">
                                    温度
                                </el-col>
                                <el-col :span="3">
                                    压力
                                </el-col>
                                <el-col :span="3">
                                    材质
                                </el-col>
                                <el-col :span="3">
                                    规格
                                </el-col>
                                <el-col :span="3">
                                    编号
                                </el-col>
                            </el-row>
                            <el-row v-for="(item,index) in pipelineUp" :key="index">
                                <el-col :span="3">
                                     {{ workDetail.devPipelineName}}
                                </el-col>
                                <el-col :span="3">
                                    {{ item.materialQuality ? item.materialQuality : '--'  }}
                                </el-col>
                                <el-col :span="3">
                                    {{ item.specifications ? item.specifications : '--' }}
                                </el-col>
                                <el-col :span="3">
                                    {{ item.number ? item.number : '--' }}
                                </el-col>
                                <el-col :span="3">
                                    {{ item.medium ? item.medium : '--'  }}
                                </el-col>
                                <el-col :span="3">
                                    {{ item.temperature ? item.temperature : '--' }}
                                </el-col>
                                <el-col :span="3">
                                    {{ item.pressure ? item.pressure : '--' }}
                                </el-col>
                            </el-row>
                      
                    </div>
                </template>
            </detail>
            <editPlan :title="operateTitle" :editId="editId" @cancleSave="goBack" v-if="isUpdate"></editPlan>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
//   import addPlan from './addPlan.vue'
import detail from './detail.vue'
import editPlan from './editPlan.vue'
import {
    selectDangerousEngineeringRecordApi,
    addDangerousEngineeringRecordApi,
    deleteDangerousEngineeringRecordApi,
    selectDangerousEngineeringTypeApi,
    editDangerousEngineeringRecordApi
} from "@/assets/js/api/dangerousBigProject"

import {
    getPlatePlugSafePageApi,
    getEnterpriseInfoListApi,
    getPlatePlugSafeQueryByIdApi,
    getPlatePlugSafedeleteApi,
} from "@/assets/js/api/specialWork"

import { getCooperatorListApi } from "@/assets/js/api/cooperationUnit";
export default {
    components: {
        //   addPlan,
        detail,
        editPlan
    },
    data() {
        return {
            formInline: {
                firemanName: '',
                enterpriseId: '',
                workTicketCode:"",
            },
            formLabelWidthDetail: "270px",
            detailData: {},
            responsibilityList: [],
            planDate: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },
            isDisabledDetail: true,
            workDetail: {},

            operateTitle: "新增",
            isAdd: false,
            isEdit: false,
            isDisabled: false,
            engineeringName: "",
            detailId: "",
            isSuperDanger: false,
            tableData: [],
            dialogFormVisible: true,
            multipleSelection: [],
            addForm: {
                name: "",
                category: "",
                points: "",
                describe: "",
                address: "",
                date: [],
                people: "",
                unit: []
            },
            props: {
                multiple: true
            },
            typeOptions: [],
            describeOptions: [],
            options: [{
                label: 111,
                value: 12
            }],
            formLabelWidth: "110px",
            safeStatus: false,
            safeStatus2: false,
            safeStatus3: false,
            fileList: [],
            fileList2: [],
            fileList3: [],
            dialogTitle: "",
            pageNo: 1,
            pageSize: 10,
            total: 10,
            projectSn: "",
            enterpriseTypeId: 1,
            cooperatorList: [],
            file3: "",
            file2: "",
            file1: "",
            deleteId: "",
            editId: "",
            deleteDialog: false,
            isEditDisabled: false,
            editParms: [],
            fileName1: "",
            fileName2: "",
            fileName3: "",
            styleType: 1,
            isUpdate: false
        }
    },
    computed:{
        pipelineUp() {

            // .map(item => `介质(${})、温度(${})、压力(${})`)
            let newResult = [];
            if(this.workDetail.pipelineParameter&& JSON.parse(this.workDetail.pipelineParameter) instanceof Array ){
                newResult = JSON.parse(this.workDetail.pipelineParameter);
            }

            if(this.workDetail.blindPlateParameter&& JSON.parse(this.workDetail.blindPlateParameter) instanceof Array ){
                const blindPlateParameter = JSON.parse(this.workDetail.blindPlateParameter);
                newResult = newResult.reduce((prev,item,index) => {
                    prev.push({
                        ...item,
                        ...blindPlateParameter[index],
                    })
                    return prev;
                },[]);
            }
            
            return newResult;
        }
    },
    created() {
        this.projectSn = this.$store.state.projectSn
        this.styleType = this.$store.state.userInfo.styleType;
        // this.getCooperatorList()
        // this.getType()
        this.initData();
        this.getEnterpriseInfoList();
    },
    mounted() {

    },
    watch: {
        "workDetail.hotWorkExecutionTime": {
            handler(newVal) {
                console.log(newVal);
            },
        },
    },
    methods: {
        editRow(index, rows) {
            if (rows[index].finalAcceptanceStatus === 2) {
                this.$message.warning('该项危大工程已闭合，请勿操作')
                return
            }
            // console.log(index,rows[index].id)
            this.editId = rows[index].id
            this.operateTitle = "编辑"
            this.dialogTitle = "编辑"
            this.dialogFormVisible = false
            this.isEdit = false
            this.isAdd = false
            this.isUpdate = true;
        },
        goBack() {
            this.dialogFormVisible = true
            // this.initData()
            this.isAdd = false
            this.isEdit = false
            this.isUpdate = false;
        },
        showAddDialog() {
            this.dialogFormVisible = false
            this.isEdit = false
            this.isUpdate = false;
            this.isAdd = true
            // "新增"
            this.dialogTitle = this.$t('message.dangerousBigProject.add')
            // this.clearData()
            // if(this.isDisabled){
            //     this.isDisabled = false
            // }
            // if(this.isEditDisabled){
            //     this.isEditDisabled = false
            // }
        },
        onSubmit() {
            this.pageNo = 1;
            this.initData();
        },
        onRefresh() {
            this.formInline.enterpriseId = "";
            this.formInline.firemanName = "";
            this.formInline.workTicketCode = "";
            this.pageNo = 1;
            this.initData();
        },
        getEnterpriseInfoList() {
            getEnterpriseInfoListApi({
                projectSn: this.projectSn
            }).then((res) => {
                if (res.result) {
                    console.log(res.result, 1)
                    this.responsibilityList = res.result;
                }
            })
        },
        initData() {
            let data = {
                jobApplicationUnit: this.formInline.enterpriseId,
                firemanName: this.formInline.firemanName,
                workTicketCode: this.formInline.workTicketCode,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                projectSn: this.projectSn,
                // assignmentPersonInCharge: this.$store.state.userInfo.accountType == 6 ? this.$store.state.userInfo.userId : '',
            }
            getPlatePlugSafePageApi(data).then((res) => {
                if (res.result) {
                    console.log(res.result.records, 1)
                    // res.result.records.forEach((item) => {
                    //     if (item.planStartTime && item.planEndTime) {
                    //         item.plan = item.planStartTime + "至" + item.planEndTime
                    //     }
                    //     if (item.responsibilityCompany.split(",").length > 0 && item.responsibilityCompany !== "") {
                    //         let arr = []
                    //         for (let i = 0; i < this.options.length; i++) {
                    //             let itm = this.options[i].value
                    //             for (let j = 0; j < item.responsibilityCompany.split(",").length; j++) {
                    //                 if (itm == item.responsibilityCompany.split(",")[j]) {
                    //                     arr.push(this.options[i].label)
                    //                 }
                    //             }
                    //         }
                    //         item.subpackageUnit = arr.join(",")
                    //     }
                    // })
                    // console.log(this.options)
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                }
            });
        },
        editData(index, val) {
            this.viewData(index, val)
            // "编辑"
            this.dialogTitle = this.$t('message.dangerousBigProject.edit')
            this.editParms = val[index]
            if (this.file1) {
                let obj = {
                    name: this.file1.split("/")[this.file1.split("/").length - 1],
                    url: this.file1
                }
                this.fileList.push(obj)
            }
            if (this.file2) {
                let obj2 = {
                    name: this.file2.split("/")[this.file2.split("/").length - 1],
                    url: this.file2
                }
                this.fileList2.push(obj2)
            }
            if (this.file3) {
                let obj3 = {
                    name: this.file3.split("/")[this.file3.split("/").length - 1],
                    url: this.file3
                }
                this.fileList3.push(obj3)
            }
            this.isDisabled = false
            this.isEditDisabled = true
            // console.log(this.editId)
        },
        viewData(index, val) {
            this.clearData()
            this.dialogFormVisible = true
            // "查看"
            this.dialogTitle = this.$t('message.dangerousBigProject.view')
            this.isDisabled = true
            this.isEditDisabled = true
            this.addForm = {
                name: val[index].engineeringName,
                category: val[index].engineeringTypeId,
                points: val[index].engineeringSurvey,
                describe: val[index].describeName,
                address: val[index].constructionLocation,
                date: [val[index].planStartTime, val[index].planEndTime],
                people: val[index].personLiable,
                unit: val[index].responsibilityCompany
            }
            this.safeStatus = val[index].securityConstructionSchemeType == 2 ? true : false
            this.safeStatus2 = val[index].specialConstructionSchemeType == 2 ? true : false
            this.safeStatus3 = val[index].technicalDisclosureType == 2 ? true : false
            this.file1 = val[index].securityConstructionSchemeFile
            this.file2 = val[index].specialConstructionSchemeFile
            this.file3 = val[index].technicalDisclosureFile
            this.fileName1 = this.file1 ? this.file1.split("/")[this.file1.split("/").length - 1] : ""
            this.fileName2 = this.file2 ? this.file2.split("/")[this.file2.split("/").length - 1] : ""
            this.fileName3 = this.file3 ? this.file3.split("/")[this.file3.split("/").length - 1] : ""
        },
        clearData() {
            this.addForm = {
                name: "",
                category: "",
                points: "",
                describe: "",
                address: "",
                date: [],
                people: "",
                unit: ""
            },
                this.safeStatus = false
            this.safeStatus2 = false
            this.safeStatus3 = false
            this.file1 = ""
            this.file2 = ""
            this.file3 = ""
            this.fileList = []
            this.fileList2 = []
            this.fileList3 = []
        },
        // 选择类别
        changeType(value) {
            this.typeOptions.forEach(item => {
                if (item.id == value) {
                    item.describeList.forEach(item => {
                        item.value = item.id
                        if (item.describeName.length > 40) {
                            item.label = item.describeName.substring(0, 40) + '...'
                        } else {
                            item.label = item.describeName
                        }
                    })
                    this.describeOptions = item.describeList
                }
            })
            console.log(value)
        },
        //获取责任分包单位
        getCooperatorList() {
            let data = {
                projectSn: this.projectSn,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                enterpriseTypeId: this.enterpriseTypeId,
                enterpriseName: "",
            };
            getCooperatorListApi(data).then((res) => {
                if (res.code == 200) {

                    if (res.result.records.length > 0) {
                        this.cooperatorList = JSON.parse(JSON.stringify(res.result.records));
                        this.cooperatorList.forEach((item) => {
                            item.value = item.enterpriseLegalPerson
                            item.label = item.enterpriseName
                        })
                        this.options = this.cooperatorList
                        // console.log(this.options)
                    }
                }
            });
        },
        // 获取类别
        getType() {
            selectDangerousEngineeringTypeApi({ sn: JSON.parse(window.sessionStorage.getItem("vuex")).userInfo.headquartersSn }).then((res) => {
                if (res.result) {
                    // console.log(res.result)
                    res.result.forEach(item => {
                        item.label = item.typeName
                        item.value = item.id
                    })
                    this.typeOptions = res.result
                }
            })
        },
        addData() {
            if (this.addForm.name == "") {
                // 请输入危大工程名称
                this.$message.error(this.$t('message.dangerousBigProject.verifyMessage1'))
                return
            } else if (this.addForm.category == "") {
                // 请选择危大工程类别
                this.$message.error(this.$t('message.dangerousBigProject.verifyMessage2'))
                return
            } else if (this.addForm.describe == "") {
                // 请选择类别描述
                this.$message.error(this.$t('message.dangerousBigProject.verifyMessage3'))
                return
            }
            // console.log(this.addForm)
            let nowDate = new Date()
            let data = {
                constructionLocation: this.addForm.address,
                createTime: moment(nowDate).format('YYYY-MM-DD HH:mm:ss'),
                engineeringName: this.addForm.name,
                engineeringSurvey: this.addForm.points,
                engineeringTypeId: this.addForm.category,
                personLiable: this.addForm.people,
                planEndTime: this.addForm.date[1],
                planStartTime: this.addForm.date[0],
                projectSn: this.projectSn,
                securityConstructionSchemeFile: this.fileList.length > 0 ? this.file1 : "", //安全专项施工方案附件
                securityConstructionSchemeType: this.safeStatus ? 2 : 1,//是否完成安全专项施工方案交底，1未完成，2完成
                specialConstructionSchemeFile: this.fileList2.length > 0 ? this.file2 : '',//专项施工方案附件
                specialConstructionSchemeType: this.safeStatus2 ? 2 : 1,//是否完成专项施工方案交底，1未完成，2完成
                technicalDisclosureFile: this.fileList3.length > 0 ? this.file3 : '',//技术交底文件
                technicalDisclosureType: this.safeStatus3 ? 2 : 1,//是否完成安全技术交底，1未完成，2完成
                typeDescribeId: this.addForm.describe,//危大工程类别描述
                addForm: this.addForm
            }
            // "新增"
            if (this.dialogTitle == this.$t('message.dangerousBigProject.add')) {
                console.log(data)
                data.responsibilityCompany = this.addForm.unit ? this.addForm.unit.join(',') : ""
                addDangerousEngineeringRecordApi(data).then((res) => {
                    if (res.code = 200) {
                        this.$message.success(this.$t('message.dangerousBigProject.add') + this.$t('message.dangerousBigProject.success') + "！")
                        this.initData()
                    }
                    console.log(res)
                })
            } else if (this.dialogTitle == this.$t('message.dangerousBigProject.edit')) {
                // "编辑"
                data.id = this.editParms.id
                data.typeDescribeId = this.editParms.typeDescribeId
                if (this.addForm.unit && Array.isArray(this.addForm.unit)) {
                    data.responsibilityCompany = this.addForm.unit.join(',')
                } else {
                    data.responsibilityCompany = this.addForm.unit
                }
                editDangerousEngineeringRecordApi(data).then((res) => {
                    if (res.code = 200) {
                        // "修改成功！"
                        this.$message.success(this.$t('message.dangerousBigProject.editSuccess'))
                        this.initData()
                    }
                    console.log(res)
                })
            }
            this.dialogFormVisible = false
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        deleteRow(index, rows) {
            if (rows[index].finalAcceptanceStatus === 2) {
                this.$message.warning('该项特种作业已闭合，请勿操作')
                return
            }
            // console.log(index,rows[index].id)
            this.deleteId = rows[index].id
            this.deleteDialog = true
        },
        checkDelete() {
            getPlatePlugSafedeleteApi({ id: this.deleteId }).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.$message.success(res.message)
                    this.initData()
                }
            })
            this.deleteDialog = false
        },
        handleSizeChange() {
            this.initData()
        },
        handleCurrentChange() {
            this.initData()
        },
        handleRemove(file, fileList) {
            console.log(fileList);
            this.fileList = fileList;
        },
        handlePreview(file) {
            console.log(file);
        },
        beforeRemove(file, fileList) {
            // 确定移除
            return this.$confirm(this.$t('message.dangerousBigProject.confirmRemove') + ` ${file.name}？`);
        },
        uploadSuccess(response, file, fileList) {
            console.log('fileList')
            console.log(fileList)
            this.fileList = fileList;
            this.file1 = this.$store.state.FILEURL + fileList[0].response.data[0].imageUrl
        },
        uploadError(err, file, fileList) {
            // 上传失败！
            this.$message.error(this.$t('message.dangerousBigProject.uploadFail'));
        },
        handleRemove2(file, fileList) {
            console.log(fileList);
            this.fileList2 = fileList;
        },
        handlePreview2(file) {
            console.log(file);
        },
        beforeRemove2(file, fileList) {
            // 确定移除
            return this.$confirm(this.$t('message.dangerousBigProject.confirmRemove') + `${file.name}？`);
        },
        uploadSuccess2(response, file, fileList) {
            console.log('fileList')
            console.log(fileList)
            this.fileList2 = fileList;
            this.file2 = this.$store.state.FILEURL + fileList[0].response.data[0].imageUrl
        },
        uploadError2(err, file, fileList) {
            // 上传失败！
            this.$message.error(this.$t('message.dangerousBigProject.uploadFail'));
        },
        handleRemove3(file, fileList) {
            console.log(fileList);
            this.fileList3 = fileList;
        },
        handlePreview3(file) {
            console.log(file);
        },
        beforeRemove3(file, fileList) {
            // 确定移除
            return this.$confirm(this.$t('message.dangerousBigProject.confirmRemove') + `${file.name}？`);
        },
        uploadSuccess3(response, file, fileList) {
            console.log('fileList')
            console.log(fileList)
            this.fileList3 = fileList;
            this.file3 = this.$store.state.FILEURL + fileList[0].response.data[0].imageUrl
        },
        uploadError3(err, file, fileList) {
            // 上传失败！
            this.$message.error(this.$t('message.dangerousBigProject.uploadFail'));
        },
        previewDetail(val) {
            console.log('!!!!!!!!!!!!!!!!!!', val)
            this.dialogFormVisible = false
            this.isEdit = true
            this.isAdd = false
            this.isUpdate = false
            // 详细
            this.dialogTitle = this.$t('message.dangerousBigProject.detailed')
            this.detailId = val.id

            getPlatePlugSafeQueryByIdApi({
                id: val.id
            }).then((res) => {
                if (res.result) {
                    console.log(res.result, 1)
                    this.workDetail = {
                        ...val,
                        ...res.result,
                        // xzGasAnalyzeList: res.result.xzGasAnalyzeList,
                        hotWorkExecutionTime: [res.result.hotWorkExecutionBeginTime, res.result.hotWorkExecutionEndTime]
                    };
                    if(this.workDetail.fieldWorkingEnvironment) {
                        this.workDetail.fieldWorkingEnvironment = JSON.parse(this.workDetail.fieldWorkingEnvironment)
                        this.workDetail.fieldWorkingEnvironment.map(item => {
                            item.url = this.$store.state.FILEURL + item.url
                        })
                    }
                    if(this.workDetail.safetyAndTechnologyDisclosure) {
                        this.workDetail.safetyAndTechnologyDisclosure = JSON.parse(this.workDetail.safetyAndTechnologyDisclosure)
                        this.workDetail.safetyAndTechnologyDisclosure.map(item => {
                            item.url = this.$store.state.FILEURL + item.url
                        })
                    }
                }
            })

            this.isSuperDanger = val.issuperdanger
        }
    }
}
</script>

<style lang="less" scoped>
.gastable {
    padding: 10px 20px;

    .el-row:first-child {
        .el-col {
            border-top: 2px solid #E1E1E1;
            background-color: #E9E9E9;
            font-weight: bold;
        }
    }

    .el-row:nth-child(2){
        .el-col {
            background-color: #E9E9E9;
            font-weight: bold;
        }
    }

    .el-row:last-child {
        .el-col {
            border-bottom: 2px solid #E1E1E1;
        }
    }

    .el-row {
        font-size: 14px;

        // color: #000;
        .el-col {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #E1E1E1;
        }

        .el-col:first-child {
            border-left: 2px solid #E1E1E1;
        }

        .el-col:last-child {
            border-right: 2px solid #E1E1E1;
        }
    }
}

.el-button--text {
    color: #262d47;
}

.form-box {
    width: 70%;
    display: flex;
    flex-wrap: wrap;

    /deep/.el-form-item {
        width: 50%;
        padding-right: 10px;
        box-sizing: border-box;
    }

    // /deep/.el-col-12{
    //     padding-left: 20px;
    // }
    /deep/.el-input__inner {
        width: 100%;
    }

    /deep/.el-select {
        width: 100%;
    }

    /deep/.el-cascader {
        width: 100%;
    }
}

.gasanalysis-table {
    padding: 10px 20px;

    .el-row:first-child .el-col {
        background-color: #E9E9E9;
    }

    .el-row {
        font-size: 14px;
        color: #000;

        .el-col:first-child {
            background-color: #E9E9E9;
        }

        .el-col {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #E1E1E1;
        }
    }
}

.dangerousBigProject {
    padding-bottom: 20px;
    height: 100%;
    background: #fff;
    padding: 0 10px;
    padding-top: 20px;
    box-sizing: border-box;

    >div {
        height: 100%;

        .search-box {
            display: flex;
            margin-bottom: 20px;

            .search-input {
                width: 260px;
                margin-right: 20px;
            }
        }
    }
}

.el-icon-delete {
    color: #f56c6c;
}

.table-box {
    display: flex;
    flex-direction: column;
    height: calc(100% - 72px);

    .tables {
        margin-bottom: auto;
    }
}

.table-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    p {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    // .item-status {
    //   background: #f56c6c;
    //   display: block;
    //   color: #fff;
    //   border-radius: 4px;
    //   padding: 0 4px;
    //   height: 20px;
    // }
    .item-status {
        display: flex;
        align-items: center;

        img {
            width: 15px;
            height: 15px;
        }

        span {
            font-size: 14px;
            color: #EA3941;
        }
    }

    .status-none {
        height: 20px;
    }

    .item-title {
        font-weight: 600;
    }
}

.table-category-item {
    display: flex;

    p {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    // .item-status {
    //   background: #f56c6c;
    //   display: block;
    //   color: #fff;
    //   border-radius: 4px;
    //   padding: 0 4px;
    //   height: 20px;
    // }
    .item-status {
        display: flex;
        align-items: center;
        margin-right: 3px;

        img {
            width: 15px;
            height: 15px;
            margin-right: 3px;
        }

        span {
            font-size: 14px;
            color: #EA3941;
        }
    }

    .status-none {
        height: 20px;
    }

    .item-title {
        font-weight: 600;
    }
}

.add-dialog {
    /deep/ .el-dialog {
        width: 80%;
    }

    .form-title {
        margin-bottom: 20px;
    }

    /deep/ .el-form-item__label {
        text-align: left;
        white-space: nowrap;
    }

    /deep/ .el-form {
        padding-left: 36px;
        padding-right: 26px;
        margin-bottom: 20px;
    }

    /deep/ .el-select {
        width: 100%;
    }

    /deep/ .el-date-editor.el-input {
        width: 100%;
    }

    /deep/ .el-date-editor {
        width: 100%;
    }

    /deep/ .el-cascader {
        width: 100%;
    }

    .upload-item {
        display: flex;
        margin-bottom: 10px;
        align-items: center;

        span {
            margin-right: 16px;
        }

        .switch-check {
            margin-left: 8px;
            color: #409eff;
            line-height: 20px;
        }

        .switch-uncheck {
            margin-left: 8px;
            line-height: 20px;
        }
    }

    .upload-file {
        width: 50%;
        padding-left: 26px;
        box-sizing: border-box;
        margin-bottom: 20px;

        a {
            color: #409eff;
            text-decoration: none;
            margin-left: 6px;
        }
    }

    .upload-box {
        display: flex;
        flex-wrap: wrap;
    }
}

.el-pagination {
    display: flex;
    justify-content: center;
}

.backText {
    padding: 8px 0;
    padding-left: 10px;

    /deep/.el-page-header__content {
        font-size: 14px;
    }
}

.dark {
    /deep/.el-page-header__content {
        color: #fff;
    }

    /deep/ .print-btn {
        background: none;
        color: #262d47;
        font-size: 14px;
    }
}
.img-show{
    display: flex;
    flex-wrap: wrap;
}
// 图片预览的关闭按钮
::v-deep .el-image-viewer__btn.el-image-viewer__close{
  color: white;
}
</style>