<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.applicantTeamLeaderName" 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-item>
                        <el-button type="primary" @click="isAddPoint(1)"> 新增 </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" label="申请单位" show-overflow-tooltip>
                        <!--  作业申请单位 -->
                        <template slot-scope="scope">
                            {{ scope.row.applicantName }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="施工地点" prop="constructionLocation"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" label="作业内容" prop="workContent" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" label="作业高度" prop="workHeight" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" label="作业类别" prop="workCategory" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.workCategory ? workCategoryList[scope.row.workCategory - 1].workCategoryName : '--'}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="申请人" prop="applicantTeamLeaderName"></el-table-column>
                    <el-table-column align="center" label="作业时间" prop="workerTimeBegin" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.workerTimeBegin }}-{{ scope.row.workerTimeEnd }}
                        </template>
                    </el-table-column>


                    <!-- 操作 -->
                    <el-table-column align="center" :label="$t('message.dangerousBigProject.operation')">
                        <template slot-scope="scope">
                            <!-- $store.state.userInfo.accountType != 6 $store.state.userInfo.userId ==
                                scope.row.assignmentPersonInCharge -->
                            <!-- v-permission="{
    key: 'fireWork_delete',
    menuPath: '/project/operationManage/heightsWorks',
}" -->
                            <div class="tableBtns">
                                <div @click.stop="isAddPoint(2, scope.row)" class="operationText">
                                    <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                                    <span>编辑</span>
                                </div>
                                <div @click.stop="deleteRow(scope.row)" class="operationText">
                                    <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
                                    <span>删除</span>
                                </div>
                            </div>
                        </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>
            <!-- 添加卡片弹框 -->
            <el-dialog :destroy-on-close="true" :modal-append-to-body="false" :title="cardDialogTitle"
                :visible.sync="cardDialog" width="1100px" :before-close="handleClose">
                <div class="dialog_content">
                    <el-form size="medium" :model="cardForm" ref="cardForm" :rules="cardFormRules" label-width="170px"
                        class="dialogFormBox">
                        <el-form-item label="申请单位" prop="applicant">
                            <el-select v-model="cardForm.applicant"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.enterpriseName" :value="item.id"
                                    v-for="(item, index) in cooperatorList" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="施工地点" prop="constructionLocation">
                            <el-input v-model="cardForm.constructionLocation"
                                :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                        </el-form-item>
                        <el-form-item label="作业内容" prop="workContent">
                            <el-input v-model="cardForm.workContent"
                                :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                        </el-form-item>
                        <el-form-item label="作业高度" prop="workHeight">
                            <el-input v-model="cardForm.workHeight"
                                :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                        </el-form-item>
                        <el-form-item label="作业类别" prop="workCategory">
                            <el-select v-model="cardForm.workCategory"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workCategoryName" :value="item.id"
                                    v-for="(item, index) in workCategoryList" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="作业人员" prop="worker">
                            <el-select v-model="cardForm.worker"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workerName" :value="item.id"
                                    v-for="(item, index) in workerListOptions" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期时间区间" prop="hotWorkExecutionTime">
                            <el-date-picker v-model="cardForm.hotWorkExecutionTime" type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="补充措施" prop="supplementaryMeasure">
                            <el-input type="textarea" v-model="cardForm.supplementaryMeasure"
                                :placeholder="$t('message.personnelPosition.please_enter')"></el-input>
                        </el-form-item>
                        <div class="gasanalysis-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>作业危害识别</th>
                                        <th>安全控制措施（有√无×）</th>
                                        <th>确认（）</th>
                                        <th>落实人签名</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-for="(option, index) in cardForm.tableList">
                                        <tr v-for="(ele, eIndex) in option.detailList" :key="ele.id">
                                            <td>{{ index == 0 ? eIndex + 1 : countName(cardForm.tableList, index) +
                                                eIndex + 1 }}</td>
                                            <td v-if="eIndex == 0" :rowspan="option.detailList.length">
                                                {{ option.title }}
                                            </td>
                                            <td>
                                                {{ ele.titleName }}
                                            </td>
                                            <td>
                                                <el-select v-model="ele.isAffirm"
                                                    :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                                    <el-option :label="item.isAffirmName" :value="item.isAffirmName"
                                                        v-for="(item, index) in isAffirmList" :key="index">
                                                    </el-option>
                                                </el-select>
                                            </td>
                                            <td>
                                                <el-select filterable v-model="ele.isAffirmName"
                                                    :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                                    <el-option :label="item.workerName" :value="item.id"
                                                        v-for="(item, index) in workerListOptions" :key="index">
                                                    </el-option>
                                                </el-select>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                        <el-form-item label="申请人(班组长)" prop="applicantTeamLeader">
                            <el-select filterable v-model="cardForm.applicantTeamLeader"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workerName" :value="item.id"
                                    v-for="(item, index) in workerListOptions" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期时间点1" prop="applicantTeamLeaderTime">
                            <el-date-picker v-model="cardForm.applicantTeamLeaderTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="监护人(承包商)" prop="guardianContractor">
                            <el-select filterable v-model="cardForm.guardianContractor"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workerName" :value="item.id"
                                    v-for="(item, index) in workerListOptions" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期时间点2" prop="guardianContractorTime">
                            <el-date-picker v-model="cardForm.guardianContractorTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="施工承包商(施工负责人)" prop="constructionContractorManager">
                            <el-select filterable v-model="cardForm.constructionContractorManager"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workerName" :value="item.id"
                                    v-for="(item, index) in workerListOptions" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期时间点3" prop="constructionContractorManagerTime">
                            <el-date-picker v-model="cardForm.constructionContractorManagerTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="EPC承包商(施工负责人)" prop="epcContractorManager">
                            <el-select filterable v-model="cardForm.epcContractorManager"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workerName" :value="item.id"
                                    v-for="(item, index) in workerListOptions" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期时间点4" prop="epcContractorManagerTime">
                            <el-date-picker v-model="cardForm.epcContractorManagerTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="监理单位(监理负责人)" prop="supervisionUnitManager">
                            <el-select filterable v-model="cardForm.supervisionUnitManager"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workerName" :value="item.id"
                                    v-for="(item, index) in workerListOptions" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期时间点5" prop="supervisionUnitManagerTime">
                            <el-date-picker v-model="cardForm.supervisionUnitManagerTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="项目组(施工负责人签名)" prop="projectTeam">
                            <el-select filterable v-model="cardForm.projectTeam"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workerName" :value="item.id"
                                    v-for="(item, index) in workerListOptions" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期时间点6" prop="projectTeamTime">
                            <el-date-picker v-model="cardForm.projectTeamTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="安质环部(负责人)" prop="safetyDepartmentManager">
                            <el-select filterable v-model="cardForm.safetyDepartmentManager"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workerName" :value="item.id"
                                    v-for="(item, index) in workerListOptions" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期时间点7" prop="safetyDepartmentManagerTime">
                            <el-date-picker v-model="cardForm.safetyDepartmentManagerTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="监护人" prop="guardian">
                            <el-select filterable v-model="cardForm.guardian"
                                :placeholder="$t('message.personnelPosition.please_select')" filterable>
                                <el-option :label="item.workerName" :value="item.id"
                                    v-for="(item, index) in workerListOptions" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期时间点8" prop="guardianTime">
                            <el-date-picker v-model="cardForm.guardianTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <!-- <el-form-item label="上传视频或动画" prop="firstExampleVideo">
                        <el-upload class="upload-demo" name="files" :action="$store.state.UPLOADURL"
                            :on-remove="(file, fileList) => handleRemove(file, fileList, 2)" :multiple="false"
                            :on-success="(res, file) => handleSuccess(res, file, 2)"
                            :file-list="cardForm.firstExampleVideoList" accept=".mp4">
                            <el-button type="primary"> 上传附件 </el-button>
                        </el-upload>
                    </el-form-item> -->
                        <div class="dialog-footer">
                            <el-button class="cancleBtn" @click="handleClose" icon="el-icon-circle-close" size="medium">{{
                                $t("message.personnelPosition.cancel") }}
                            </el-button>
                            <el-button type="primary" icon="el-icon-circle-check" @click="saveCardFn" size="medium">{{
                                $t("message.personnelPosition.determine") }}
                            </el-button>
                        </div>
                    </el-form>
                </div>
            </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" :workType="2" @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.applicantName }}
                            </el-form-item>
                            <el-form-item label="施工地点：" :label-width="formLabelWidthDetail">
                                {{ workDetail.constructionLocation }}
                            </el-form-item>
                            <el-form-item label="作业内容：" :label-width="formLabelWidthDetail">
                                {{ workDetail.workContent }}
                            </el-form-item>
                            <el-form-item label="作业高度：" :label-width="formLabelWidthDetail">
                                {{ workDetail.workHeight }}
                                <!-- <el-tooltip class="item" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;" effect="dark" :content="workDetail.jobContent"
                                      placement="top-start">
                                      <div>{{ workDetail.jobContent }}</div>
                                  </el-tooltip> -->
                            </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">
                                {{ workCategoryList[workDetail.workCategory - 1].workCategoryName }}
                            </el-form-item>
                            <el-form-item label="作业人员：" :label-width="formLabelWidthDetail">
                                {{ workDetail.workerName }}
                            </el-form-item>
                            <el-form-item label="作业时间：" :label-width="formLabelWidthDetail">
                                <el-date-picker v-model="workDetail.hotWorkExecutionTime" type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss" :disabled="isDisabledDetail" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </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;margin-bottom: 10px"
                                        :src="item.url" :preview-src-list="[item.url]">
                                    </el-image>
                                </div>
                            </el-form-item> -->
                        </el-form>
                        <!-- <div v-if="COMPANY != 'longguang'" class="qr-box">
                                      <div id="qrCode" ref="qrCodeDiv"></div>
                                      <el-button size="medium" class="print-btn" @click="printBtn">打印危大工程标识</el-button>
                                  </div> -->
                    </div>
                </template>
                <template v-slot:gasanalysis>
                    <div class="gasanalysis-table">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>作业危害识别</th>
                                    <th>安全控制措施（有√无×）</th>
                                    <th>确认（）</th>
                                    <th>落实人签名</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="(option, index) in workDetail.tableList">
                                    <tr v-for="(ele, eIndex) in option.detailList" :key="ele.id">
                                        <td>{{ index == 0 ? eIndex + 1 : countName(workDetail.tableList, index) +
                                            eIndex + 1 }}</td>
                                        <td v-if="eIndex == 0" :rowspan="option.detailList.length">
                                            {{ option.title }}
                                        </td>
                                        <td>
                                            {{ ele.titleName }}
                                        </td>
                                        <td>
                                            {{ ele.isAffirm ? ele.isAffirm : '--' }}
                                        </td>
                                        <td>
                                            {{ workerListOptionsUp(ele.isAffirmName) }}
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </template>
                <template v-slot:signature>
                    <div class="info-content">
                        <el-form class="form-box" :model="workDetail">
                            <el-form-item label="申请人(班组长)：" :label-width="formLabelWidthDetail">
                                {{ workDetail.applicantTeamLeaderName }}
                            </el-form-item>
                            <el-form-item label="日期时间点(申请人(班组长))：" :label-width="formLabelWidthDetail">
                                {{ workDetail.applicantTeamLeaderTime }}
                            </el-form-item>
                            <el-form-item label="监护人(承包商)：" :label-width="formLabelWidthDetail">
                                {{ workDetail.guardianContractorName }}
                            </el-form-item>
                            <el-form-item label="日期时间点(监护人(承包商))：" :label-width="formLabelWidthDetail">
                                {{ workDetail.guardianContractorTime }}
                                <!-- <el-tooltip class="item" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;" effect="dark" :content="workDetail.jobContent"
                                      placement="top-start">
                                      <div>{{ workDetail.jobContent }}</div>
                                  </el-tooltip> -->
                            </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.constructionContractorManagerName }}
                            </el-form-item>
                            <el-form-item label="日期时间点(施工承包商(施工负责人))：" :label-width="formLabelWidthDetail">
                                {{ workDetail.constructionContractorManagerTime }}
                            </el-form-item>
                            <el-form-item label="EPC承包商(施工负责人)：" :label-width="formLabelWidthDetail">
                                {{ workDetail.epcContractorManagerName }}
                            </el-form-item>
                            <el-form-item label="日期时间点(EPC承包商(施工负责人))：" :label-width="formLabelWidthDetail">
                                {{ workDetail.epcContractorManagerTime }}
                            </el-form-item>
                            <el-form-item label="监理单位(监理负责人)：" :label-width="formLabelWidthDetail">
                                {{ workDetail.supervisionUnitManagerName }}
                            </el-form-item>
                            <el-form-item label="日期时间点(监理单位(监理负责人))：" :label-width="formLabelWidthDetail">
                                {{ workDetail.supervisionUnitManagerTime }}
                            </el-form-item>
                            <el-form-item label="项目组(施工负责人签名)：" :label-width="formLabelWidthDetail">
                                {{ workDetail.projectTeamName }}
                            </el-form-item>
                            <el-form-item label="日期时间点(项目组(施工负责人签名))：" :label-width="formLabelWidthDetail">
                                {{ workDetail.projectTeamTime }}
                            </el-form-item>
                            <el-form-item label="安质环部(负责人)：" :label-width="formLabelWidthDetail">
                                {{ workDetail.safetyDepartmentManagerName }}
                            </el-form-item>
                            <el-form-item label="日期时间点(安质环部(负责人))：" :label-width="formLabelWidthDetail">
                                {{ workDetail.safetyDepartmentManagerTime }}
                            </el-form-item>
                        </el-form>
                    </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 {
    getEnterpriseInfoListApi,
} from "@/assets/js/api/specialWork";

import {
    getHighPermitPageApi,
    getHighPermitByIdApi,
    deleteHighPermitApi,
    addHighPermitApi,
    editHighPermitApi,
} from "@/assets/js/api/operationManage";
import { getWorkerInfoList } from '@/assets/js/api/laborPerson.js'
import { getCooperatorListApi } from "@/assets/js/api/cooperationUnit";
export default {
    components: {
        //   addPlan,
        detail,
        editPlan,
    },
    data() {
        return {
            formInline: {
                applicantTeamLeaderName : "",
                enterpriseId: "",
            },
            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,

            workCategoryList: [{
                id: 1,
                workCategoryName: "一级(2-5m)"
            }, {
                id: 2,
                workCategoryName: "二级(5-15m)"
            }, {
                id: 3,
                workCategoryName: "三级(15-30m)"
            }, {
                id: 4,
                workCategoryName: "特级(>30m)"
            }, {
                id: 5,
                workCategoryName: "特殊"
            }],
            cardDialogTitle: "",
            cardDialog: false,
            cardForm: {},
            cardFormRules: {
                deviceUnitId: [
                    {
                        required: true,
                        message: this.$t("message.personnelPosition.required"),
                        trigger: "changer",
                    },
                ],
                deviceUnitNo: [
                    {
                        required: true,
                        message: this.$t("message.personnelPosition.required"),
                        trigger: "blur",
                    },
                ],
                exampleProjectName: [
                    {
                        required: true,
                        message: this.$t("message.personnelPosition.required"),
                        trigger: "blur",
                    },
                ],
                technicalOperation: [
                    {
                        required: true,
                        message: this.$t("message.personnelPosition.mandatory"),
                        trigger: "change",
                    },
                ],
                contractingType: [
                    {
                        required: true,
                        message: this.$t("message.personnelPosition.mandatory"),
                        trigger: "change",
                    },
                ],
                projectGroupId: [
                    {
                        required: true,
                        message: this.$t("message.personnelPosition.mandatory"),
                        trigger: "change",
                    },
                ],
                supervisingUnitId: [
                    {
                        required: true,
                        message: this.$t("message.personnelPosition.mandatory"),
                        trigger: "change",
                    },
                ],
                epcContractorId: [
                    {
                        required: true,
                        message: this.$t("message.personnelPosition.mandatory"),
                        trigger: "change",
                    },
                ],
                constructionUnitId: [
                    {
                        required: true,
                        message: this.$t("message.personnelPosition.mandatory"),
                        trigger: "change",
                    },
                ],
            },
            isAdd: -1,
            isAffirmList: [{
                isAffirmName: "是", isAffirm: true
            }, {
                isAffirmName: "否", isAffirm: false
            }],
            cooperatorList: [], // 所有企业信息
            workerListOptions: [], // 工人列表
        };
    },
    created() {
        this.projectSn = this.$store.state.projectSn;
        this.styleType = this.$store.state.userInfo.styleType;
        this.initData();
        this.initCardFormData();
        this.getCooperatorList();
        this.getDutyPerson();
        this.getEnterpriseInfoList();
    },
    mounted() { },
    watch: {
        "workDetail.hotWorkExecutionTime": {
            handler(newVal) {
                console.log(newVal);
            },
        },
    },
    methods: {
        isAddPoint(type, item) {
            this.isAdd = type;
            this.cardDialog = true;
            if (type == 1) {
                this.initCardFormData();
                this.$nextTick(() => {
                    this.$refs["cardForm"] && this.$refs["cardForm"].resetFields();
                });
                this.cardDialogTitle = this.$t("message.laborDev.add2");
            } else if (type == 2) {
                this.cardDialogTitle = this.$t("message.laborDev.btn_edit"); //编辑卡片
                console.log(item);
                this.cardForm = {
                    ...item,
                    hotWorkExecutionTime: [item.workerTimeBegin, item.workerTimeEnd],
                    tableList: JSON.parse(item.safeControlMeasure).reduce((prev, ele, index) => {
                        const findIndex = prev.findIndex(item => item.title == ele["field2632657741490"]);
                        if (findIndex == -1) {
                            prev.push({
                                id: index + 1,
                                title: ele["field2632657741490"],
                                detailList: [
                                    {
                                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                                        titleName: ele["field9539657401800"],
                                        isAffirm: ele["field9282320023273"],
                                        isAffirmName: ele["field8640601863915"] instanceof Array ? ele["field8640601863915"][0] : ele["field8640601863915"],
                                    }
                                ]
                            });
                            return prev;
                        }
                        prev[findIndex].detailList.push({
                            id: 'id-' + Math.random().toString(36).substr(2, 9),
                            titleName: ele["field9539657401800"],
                            isAffirm: ele["field9282320023273"],
                            isAffirmName: ele["field8640601863915"] instanceof Array ? ele["field8640601863915"][0] : ele["field8640601863915"],
                        });
                        return prev;
                    }, []),
                };
            }
        },
        //添加或编辑卡片
        saveCardFn() {
            this.$refs["cardForm"].validate((valid) => {
                if (valid) {
                    const result = {
                        ...this.cardForm,
                        workerTimeBegin: this.cardForm.hotWorkExecutionTime[0],
                        workerTimeEnd: this.cardForm.hotWorkExecutionTime[1],
                    }
                    const newTableList = this.cardForm.tableList.reduce((prev, item) => {
                        item.detailList.forEach(ele => {
                            prev.push({
                                "field2632657741490": item.title,
                                "field9539657401800": ele.titleName,
                                "field9282320023273": ele.isAffirm,
                                "field8640601863915": [ele.isAffirmName],
                            });
                        });
                        return prev;
                    }, []);
                    result.safeControlMeasure = JSON.stringify(newTableList);
                    console.log(result, this.cardForm.tableList);
                    if (this.isAdd == 1) {
                        // this.cardForm.floorId = this.currentFloorDetail.floorId
                        addHighPermitApi(result).then((res) => {
                            this.cardDialog = false;
                            this.initData();
                            this.$message.success(
                                this.$t("message.personnelPosition.add_success")
                            ); //添加成功！
                        });
                    } else if (this.isAdd == 2) {
                        editHighPermitApi(result).then((res) => {
                            this.cardDialog = false;
                            this.initData();
                            this.$message.success(
                                this.$t("message.personnelPosition.edit_success")
                            ); //编辑成功！
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 初始化
        initCardFormData() {
            this.cardForm = {
                applicant: "",
                constructionLocation: "",
                workContent: "",
                workHeight: "",
                workCategory: "",
                supplementaryMeasure: "",
                applicantTeamLeader: "",
                applicantTeamLeaderTime: "",
                hotWorkExecutionTime: [],
                guardianContractor: "",
                guardianContractorTime: "",
                constructionContractorManager: "",
                constructionContractorManagerTime: "",
                epcContractorManager: "",
                epcContractorManagerTime: "",
                supervisionUnitManager: "",
                supervisionUnitManagerTime: "",
                projectTeam: "",
                projectTeamTime: "",
                safetyDepartmentManager: "",
                safetyDepartmentManagerTime: "",
                guardian: "",
                guardianTime: "",
                tableList: [{
                    id: 1,
                    title: "作业前安全措施不落实或不到位，可造成人员坠落事故",
                    detailList: [{
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "现场搭设的脚手架、防护网、围栏合格并符合安全规程，验收合格",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "垂直分层作业中间及四周应有隔离防护设施",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "作业使用上下通道、安全梯、安全绳符合安全要求",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "作业人员身体条件符合要求，体检合格，特种作业人员持证上岗",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "轻型棚的承重梁、柱能承重符合",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "六级以上强风、浓雾、暴雨等恶劣天气，不得进行高处作业",
                        isAffirm: "",
                        isAffirmName: "",
                    }]
                }, {
                    id: 2,
                    title: "作业过程中，安全措施不落实，监护不到位，可造成人员坠落、中毒窒息、爆燃事故",
                    detailList: [{
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "下方进行刷油作业时，上方不得从事电焊、切割等动火作业",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "采光不足、夜间作业有充足照明，安装临时灯、防爆灯",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "30米以上进行高处作业配备通讯、联络工具，要有应急预案",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "高处交叉作业应按坠落半径采取隔离措施，如安全网、错时作业等",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "作业用具、材料等在架上稳固摆放，不得投掷，使用工具用安全绳栓牢",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "在可燃、有毒环境作业，应进行环境监测；有毒有害气体和粉尘超标场所或下风侧严禁高处作业；发生泄漏应采取安全措施后，再进行作业",
                        isAffirm: "",
                        isAffirmName: "",
                    }]
                }, {
                    id: 3,
                    title: "个人防护不到位，应急器材不足，施救部及时，造成事故扩大",
                    detailList: [{
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "作业人员佩带安全带，安全带要高挂抵用，防止磨损和断裂",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "作业人员着装符合要求，佩戴合格安全帽、劳保服、劳保鞋、套防服等",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "作业人员携带有工具袋，行走及爬梯时，应将工具放入袋中",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "进行可能产生静电、带电作业时，应配备相应保护用品",
                        isAffirm: "",
                        isAffirmName: "",
                    }, {
                        id: 'id-' + Math.random().toString(36).substr(2, 9),
                        titleName: "作业人员应佩带A、过滤式呼吸器B、空气式呼吸器",
                        isAffirm: "",
                        isAffirmName: "",
                    }]
                }],
                projectSn: this.$store.state.projectSn,
            };
        },
        // downloadFile(url, fileName) {
        //   const link = document.createElement('a');
        //   link.href = url;
        //   link.download = fileName;
        //   link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
        //   link.click();
        // },
        goBack() {
            this.dialogFormVisible = true;
            // this.initData()
            this.isAdd = false;
            this.isEdit = false;
            this.isUpdate = false;
        },
        onSubmit() {
            this.pageNo = 1;
            this.initData();
        },
        onRefresh() {
            this.formInline.enterpriseId = "";
            this.formInline.applicantTeamLeaderName  = "";

            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 = {
                applicant: this.formInline.enterpriseId,
                applicantTeamLeaderName : this.formInline.applicantTeamLeaderName ,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                projectSn: this.projectSn,
                // assignmentPersonInCharge: this.$store.state.userInfo.accountType == 6 ? this.$store.state.userInfo.userId : '',
            };
            getHighPermitPageApi(data).then((res) => {
                if (res.result) {
                    console.log(res.result.records, 1);
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                }
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        deleteRow(rows) {
            if (rows.finalAcceptanceStatus === 2) {
                this.$message.warning("该项特种作业已闭合，请勿操作");
                return;
            }
            // console.log(rows.id)
            this.deleteId = rows.id;
            this.deleteDialog = true;
        },
        checkDelete() {
            deleteHighPermitApi({ 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();
        },

        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;

            getHighPermitByIdApi({
                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.workerTimeBegin ? res.result.workerTimeBegin : '',
                            res.result.workerTimeEnd ? res.result.workerTimeEnd : '',
                        ],
                        tableList: JSON.parse(val.safeControlMeasure).reduce((prev, ele, index) => {
                            const findIndex = prev.findIndex(item => item.title == ele["field2632657741490"]);
                            if (findIndex == -1) {
                                prev.push({
                                    id: index + 1,
                                    title: ele["field2632657741490"],
                                    detailList: [
                                        {
                                            id: 'id-' + Math.random().toString(36).substr(2, 9),
                                            titleName: ele["field9539657401800"],
                                            isAffirm: ele["field9282320023273"],
                                            isAffirmName: ele["field8640601863915"] instanceof Array ? ele["field8640601863915"][0] : ele["field8640601863915"],
                                        }
                                    ]
                                });
                                return prev;
                            }
                            prev[findIndex].detailList.push({
                                id: 'id-' + Math.random().toString(36).substr(2, 9),
                                titleName: ele["field9539657401800"],
                                isAffirm: ele["field9282320023273"],
                                isAffirmName: ele["field8640601863915"] instanceof Array ? ele["field8640601863915"][0] : ele["field8640601863915"],
                            });
                            return prev;
                        }, []),
                    };
                }
            });

            this.isSuperDanger = val.issuperdanger;
        },
        // 关闭前执行
        handleClose(done) {
            this.initData();
            this.$refs["cardForm"].resetFields();
            // console.log(this.$refs["cardForm"].resetFields())
            if (done) {
                done();
            } else {
                this.cardDialog = false;
            }
        },
        countName(list, rowIndex) {
            return list.reduce((prev, item, index) => {
                // console.log(index == rowIndex, prev);
                if (index < rowIndex) {
                    prev += item.detailList.length;
                    return prev;
                }
                return prev;
            }, 0);
        },
        //获取列表数据
        getCooperatorList() {
            let data = {
                projectSn: this.$store.state.projectSn,
                pageNo: 1,
                pageSize: -1,
                // enterpriseTypeId: this.enterpriseTypeSelectId,
            };
            getCooperatorListApi(data).then((res) => {
                if (res.code == 200) {
                    this.cooperatorList = res.result.records;
                }
            });
        },
        //查询选择人员下拉
        getDutyPerson() {
            let data = {
                projectSn: this.$store.state.projectSn,
                // isFilterQualityRegionEnterprise: 1
            }
            getWorkerInfoList(data).then(res => {
                if (res.code == 200) {
                    this.workerListOptions = res.result.records
                    console.log('获取施工人员下拉', this.workerListOptions)
                } else {
                    this.$message.error(res.message)
                }
            })
        },
    },
    computed: {
        workerListOptionsUp() {
            return (workerName) => {
                const find = this.workerListOptions.find(item => item.id == workerName);
                return find ? find.workerName : '--';
            }
        },
    }
};
</script>
  
<style lang="less" scoped>
.dialogFormBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    .el-date-editor,
    .el-textarea {
        width: 320px;
    }



}

.gasanalysis-table {
    table {
        width: 100%;
        // height: 100%;
        font-size: 16px;
        margin-bottom: 20px;
    }

    tr {
        height: 50px;
    }

    td {
        text-align: center;
        min-width: 80px;

        .el-select,
        /deep/ .el-input {
            width: 150px !important;
        }
    }

    table,
    td,
    th {
        border: 1px solid #CDCDCD;
        border-collapse: collapse;
        // color: white;
    }

    th {
        background-color: #EEEEEE;
    }
}

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

.form-box {
    width: 90%;
    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;
            font-weight: bold;
        }

        .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;
    // margin-top: 20px;
}

.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>
  