<template>
    <div class="dangerousBigProject">
        <div>
            <div class="search-box">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                    <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.alarmPersonName" clearable
                            style="width: 200px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="报警时间">
                        <el-date-picker v-model="formInline.alarmTime" value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </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">
                <!-- @cell-click="previewDetail" -->
                <el-table class="tables" :data="tableData" size="small" @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.enterpriseName }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="所属班组/部门" prop=""
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.teamName ? scope.row.teamName : scope.row.departmentName}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="报警人员姓名" prop="alarmPersonName"></el-table-column>
                    <!-- <el-table-column align="center" label="证书编号" prop="certificateNo"></el-table-column> -->
                    <el-table-column align="center" label="应急类型" prop="emergencyTypeName"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" label="详细地址" show-overflow-tooltip prop="latitude">
                        <template slot-scope="scope">
                            <!-- {{ scope.row.longitude }}<span v-if="scope.row.latitude && scope.row.longitude">,</span>{{
                                scope.row.latitude }} -->
                            {{ scope.row.incidentSite }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="救援物资分布" prop="assignmentPersonInChargeName">
                        <template slot-scope="scope">
                            <i class="el-icon-map-location" @click="mapShow(scope.row)"></i>
                        </template>
                    </el-table-column>
                    <!-- 状态 -->
                    <el-table-column label="处置状态" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.dispositionStatus === 1"
                                style="color:#f56c6c;font-weight:bold;">待救援</span>
                            <span v-if="scope.row.dispositionStatus === 2"
                                style="color:#5181f6;font-weight:bold;">救援中</span>
                            <span v-if="scope.row.dispositionStatus === 3"
                                style="color:#008000;font-weight:bold;">已救援</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="报警时间" prop="alarmTime"></el-table-column>
                    <!-- 操作 -->
                    <el-table-column align="center" :label="$t('message.dangerousBigProject.operation')">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="viewData(scope.row)" type="text" size="small"
                                v-permission="{key: 'emergencyDisposal_detail', menuPath: '/project/emergencyDisposal/emergencyDisposal'}">
                                <i class="el-icon-s-order"></i>
                                查看详情
                            </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 @click.stop="deleteRow(scope.row)" type="text" size="small"
                                v-permission="{key: 'emergencyDisposal_delete', menuPath: '/project/emergencyDisposal/emergencyDisposal'}">
                                <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>
        </div>
        <el-dialog title="查看详情" :visible.sync="isEditDisabled" width="70%">
            <div class="emergency">
                <div>
                    <div class="emergency-title">基本信息</div>
                    <div class="emergency-info">
                        <div>
                            <div>报警人员姓名：{{ firstAidCallDetail.alarmPersonName }}</div>
                            <div>
                                现场视频情况：
                                <span style="color: #5181f6; cursor: pointer;"
                                    @click.stop="playerVideo($store.state.FILEURL + JSON.parse(firstAidCallDetail.liveVideoSituation)[0].url)">
                                    {{ (firstAidCallDetail.liveVideoSituation &&
                                        JSON.parse(firstAidCallDetail.liveVideoSituation) instanceof Array &&
                                        JSON.parse(firstAidCallDetail.liveVideoSituation).length > 0) ?
                                        (JSON.parse(firstAidCallDetail.liveVideoSituation)[0].name) : '' }}
                                </span>
                            </div>
                        </div>
                        <div>
                            <div>应急类型：{{ firstAidCallDetail.emergencyTypeName }}</div>
                            <div>
                                处置状态：
                                <span v-if="firstAidCallDetail.dispositionStatus === 1"
                                    style="color:#f56c6c;font-weight:bold;">待救援</span>
                                <span v-if="firstAidCallDetail.dispositionStatus === 2"
                                    style="color:#5181f6;font-weight:bold;">救援中</span>
                                <span v-if="firstAidCallDetail.dispositionStatus === 3"
                                    style="color:#008000;font-weight:bold;">已救援</span>
                            </div>
                        </div>
                        <div>
                            <div>所属企业：{{ firstAidCallDetail.enterpriseName }}</div>
                            <div>经纬度：
                                <span>
                                    {{ firstAidCallDetail.longitude }}<span
                                        v-if="firstAidCallDetail.latitude && firstAidCallDetail.longitude">,</span>{{
                                            firstAidCallDetail.latitude }}
                                </span>
                            </div>
                        </div>
                        <div>
                            <div>详细地址：<span>{{ firstAidCallDetail.incidentSite }}</span></div>
                            <div>报警时间：{{ firstAidCallDetail.alarmTime }}</div>
                        </div>
                        <div>
                            <div class="emergency-detail"><span>应急详情：</span><span>{{ firstAidCallDetail.emergencyDetail
                                    }}</span> </div>
                            <div>现场图片：
                                <div v-for="(item, index) in firstAidCallDetail.livePicture &&
                                    JSON.parse(firstAidCallDetail.livePicture) instanceof Array && JSON.parse(firstAidCallDetail.livePicture)"
                                    :key="index" style="flex: 1;">
                                    <!-- <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: 74px; height: 74px;margin-right: 10px;"
                                        :src="item ? $store.state.FILEURL + item.url : ''"
                                        :preview-src-list="[item ? $store.state.FILEURL + item.url : '']">
                                    </el-image>
                                </div>
                                <!-- <el-image style="width: 74px; height: 47px" :src="firstAidCallDetail.livePicture"
                                    :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']">
                                </el-image> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="firstAidCallDetail.emergencyTypeId != -1">
                    <div class="emergency-title">救援资料</div>
                    <div class="emergency-info">
                        <div>
                            <div>处置资料：
                                <span v-if="emergencyInfo.disposalInformation" style="color:#5181F6;cursor: pointer;"
                                    @click="downloadReport(emergencyInfo.disposalInformation)">
                                    {{ JSON.parse(emergencyInfo.disposalInformation).map(item => item.name).join("、") }}
                                </span>
                            </div>
                            <div>
                                指导文件：
                                <span style="color:#5181F6;cursor: pointer;"
                                    @click="downloadReport(emergencyInfo.guidanceDocument)">
                                    {{ emergencyInfo && emergencyInfo.guidanceDocument &&
                                        JSON.parse(emergencyInfo.guidanceDocument).map(item =>
                                            item.name).join("、") }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="case">
                    <div class="emergency-title">
                        救援情况
                        <div style="color: #5181F6;" v-if="firstAidCallDetail.incidentClosedStatus == 2">事故已关闭</div>
                    </div>
                    <!-- <div
                        style="display: flex;justify-content: flex-end;padding: 18px 0;border-bottom: 1px solid #c0ccda">
                        <el-button type="primary" @click="addFirstAidCall()">新增救援情况</el-button>
                    </div> -->
                    <div v-if="firstAidCallDetail.incidentClosedStatus == 1">
                        <div class="emergency-condition" v-for="(item, index) in firstAidCallList" :key="index">
                            <div>
                                <div><span>处置人：</span>
                                    <div>{{ item.disposerName }}</div>
                                </div>
                                <div> <span>处置完成时间：</span><el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                                        v-model="item.disposerTime" type="datetime" placeholder="选择日期时间">
                                    </el-date-picker></div>
                            </div>
                            <div>
                                <!-- :limit="1" -->
                                <div class="video-column"><span>现场视频：</span><el-upload class="upload-demo" drag
                                        :file-list="item.fileVideoList"
                                        :on-preview="(file) => onPreview(file, item.fileVideoList, 1)"
                                        :before-upload="(file) => beforeAvatarUpload(file, item.fileVideoList, 1)"
                                        name="files" accept="video/mp4" :on-success="function (response) {
                                            return handleAvatarSuccess(response, index, 1)
                                        }" :on-remove="function (response, fileList) {
                                            return handleDelete(fileList, index, 1)
                                        }" :action="$store.state.UPLOADURL" multiple>
                                        <i class="el-icon-upload"></i>
                                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                    </el-upload></div>
                                <div>
                                    <span>现场图片：</span>
                                    <el-upload :action="$store.state.UPLOADURL"
                                        :before-upload="(file) => beforeAvatarUpload(file, item.fileImageList, 2)"
                                        name="files" list-type="picture-card" accept=".png, .jpg, .jpeg"
                                        :on-preview="(file) => onPreview(file, item.fileVideoList, 2)" :on-success="function (response) {
                                            return handleAvatarSuccess(response, index, 2)
                                        }" :file-list="item.fileImageList" :on-remove="function (response, fileList) {
                                            return handleDelete(fileList, index, 2)
                                        }">
                                        <i class="el-icon-plus"></i>
                                        <!-- <div slot="tip" class="el-upload__tip">只能上传一张</div> -->
                                    </el-upload>
                                </div>
                            </div>
                            <div>
                                <div><span>处置说明：</span><el-input v-model="item.disposerExplain"
                                        placeholder="请输入"></el-input>
                                </div>
                            </div>
                            <div class="deletebtn_icon" @click="deleteFirstAidCall(index)">
                                <i class="el-icon-close"></i>
                                <!-- <el-button type="danger" @click="deleteFirstAidCall(index)">删除</el-button> -->
                            </div>
                        </div>
                    </div>
                    <div v-if="firstAidCallDetail.incidentClosedStatus == 2">
                        <div class="emergency-condition condition2" v-for="(item, index) in firstAidCallList"
                            :key="index">
                            <div>
                                <div>
                                    <span>处置人：</span>
                                    <div>{{ item.disposerName }}</div>
                                </div>
                                <div>
                                    <span>处置完成时间：</span>
                                    <div>{{ item.disposerTime }}</div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <span>现场视频：</span>
                                    <div style="color: #5181f6; cursor: pointer"
                                        @click.stop="playerVideo(item.fileVideoList[0].url)">
                                        {{ item.fileVideoList && item.fileVideoList.length > 0 ?
                                            item.fileVideoList[0].name : '' }}
                                    </div>
                                </div>
                                <div>
                                    <span>现场图片：</span>
                                    <div v-for="(ele, index) in item.fileImageList" :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="ele ? ele.url : ''" :preview-src-list="[ele ? ele.url : '']">
                                        </el-image>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <span>处置说明：</span>
                                    <div>{{ item.disposerExplain }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div @click="addFirstAidCall()" class="addfirstaidcall"
                        v-if="firstAidCallDetail.incidentClosedStatus == 1">
                        <i class="el-icon-plus"></i> 新增救援情况
                    </div>
                    <div style="display: flex;justify-content: center;"
                        v-if="firstAidCallDetail.incidentClosedStatus == 1">
                        <el-button type="primary" @click="onSubmitAll()">提交救援记录</el-button>
                    </div>
                </div>
                <div class="case" v-if="firstAidCallDetail.incidentClosedStatus == 2">
                    <div class="emergency-title">
                        处置报告
                        <!-- <el-button type="primary" v-if="firstAidCallDetail.dispositionStatus != 3"
                            @click="addDisposalReport()">提交处置报告</el-button> -->
                    </div>
                    <div class="emergency-condition" style="border-bottom: none;">
                        <div style="justify-content: center;">
                            <div v-if="firstAidCallDetail.dispositionStatus == 2">
                                <el-upload class="upload-demo upload-file" drag :file-list="fileVideoList" name="files"
                                    :limit="1" :on-success="function (response) {
                                        return handleAvatarSuccess(response, -1, 3)
                                    }" :on-remove="function (response, fileList) {
                                        return handleDelete(fileList, -1, 3)
                                    }" :action="$store.state.UPLOADURL" multiple>
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                </el-upload>
                            </div>
                            <div v-if="firstAidCallDetail.dispositionStatus == 3"
                                style="color: #5181f6; cursor: pointer;justify-content: center;"
                                @click="downloadReport(firstAidCallDetail.disposalReport)">
                                下载处置报告
                            </div>
                            <!-- <div>指导文件：11111</div> -->
                        </div>
                        <div style="display: flex;justify-content: center;"
                            v-if="firstAidCallDetail.dispositionStatus != 3">
                            <el-button type="primary" @click="addDisposalReport()">提交处置报告</el-button>
                        </div>

                    </div>
                </div>
            </div>
            <!-- <span slot="footer" class="dialog-footer" v-if="firstAidCallDetail.incidentClosedStatus == 2 && firstAidCallDetail.dispositionStatus != 3">
                <el-button @click="isEditDisabled = false">取 消</el-button>
                <el-button type="primary" @click="addDisposalReport()">提交处置报告</el-button>
            </span> -->
        </el-dialog>
        <el-dialog title="查看物资分布" :visible.sync="dialogVisible" width="70%">
            <div id="map"></div>
        </el-dialog>
        <!-- 视频播放 -->
        <el-dialog class="video" :modal-append-to-body="false" :visible.sync="isShow" @close="closeBtn">
            <video v-if="isShow || player" width="100%" height="550" controls autoplay style="margin-left: 10px">
                <source :src="player" type="video/mp4" />
                <source :src="player" type="video/mp4" />
                <source :src="player" type="video/mp4" />
                您的浏览器不支持 video 标签。
            </video>
        </el-dialog>
        <el-dialog :visible.sync="dialogImageVisible">
             <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment'
//   import addPlan from './addPlan.vue'

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

import {
    getEmergencyRecordPageApi,
    getEmergencyRecordQueryByIdApi,
    getEmergencyRecordEditApi,
    getEmergencyRecordDeleteApi,
    getEmergencyTypeListApi,
    getEmergencyReliefListApi,
    getEmergencyRecordListApi
} from "@/assets/js/api/emergencyDisposal"

import { getCooperatorListApi } from "@/assets/js/api/cooperationUnit";
export default {
    components: {
        //   addPlan,
        // detail,
        // editPlan
    },
    data() {
        return {
            dialogImageUrl:"",
            dialogImageVisible:false,
            firstAidCallList: [{
                disposerName: "",
                disposerTime: "",
                fileVideoList: [],
                fileImageList: [],
                disposerExplain: "",
            }],
            fileVideoList: [],
            dialogVisible: false,
            mapObj: null,
            firstAidCallDetail: {},
            isShow: false,
            player: '',
            videoName: '',
            emergencyData: [],
            emergencyInfo: {},
            mapDataList: [],
            mapsDetail: {},
            mapDataList2: [],
            infoWindow: null, //信息窗口
            positionData: [],

            formInline: {
                firemanName: '',
                enterpriseId: '',
                alarmPersonName: "",
                alarmTime: "",
            },
            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: []
            },
            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: "",
            isEditDisabled: false,
            editParms: [],
            fileName1: "",
            fileName2: "",
            fileName3: "",
            styleType: 1,
            isUpdate: false
        }
    },
    created() {
        this.projectSn = this.$store.state.projectSn
        this.styleType = this.$store.state.userInfo.styleType;

        this.initData();
        this.getEnterpriseInfoList();
        this.getEmergencyTypeList();
        this.getEmergencyReliefList();
    },
    mounted() {

    },
    methods: {
        beforeAvatarUpload(file, arr, type) {
            if (arr.length > 0) {
                this.$message.warning("上传已经上限！"); //只能上传图片
                return false;
            } else {
                return true;
            }
        },
        downloadReport(row) {
            const url = row && row != "null" && JSON.parse(row)[0].url;
            const fileName = row && row != "null" && JSON.parse(row)[0].name;
            if (!url) {
                this.$message.warning('暂无下载文件');
                return
            }
            fetch(url)
                .then(response => response.blob())
                .then(blob => {
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.download = fileName;
                    link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
                    link.click();
                });
        },
        addDisposalReport() {
            console.log(this.firstAidCallList);
            if (this.fileVideoList.length == 0) {
                this.$message.warning("请填写处置报告")
                return
            }
            // return
            getEmergencyRecordEditApi({
                projectSn: this.projectSn,
                id: this.firstAidCallDetail.id,
                disposalReport: JSON.stringify(this.fileVideoList),
                dispositionStatus: 3,
                situations: this.firstAidCallList.map(item => {
                    return {
                        disposalPersonId: item.userId,
                        disposalPersonName: item.disposerName,
                        disposalCompletionTime: item.disposerTime,
                        livePicture: JSON.stringify(item.fileImageList),
                        liveVideoSituation: JSON.stringify(item.fileVideoList),
                        disposalSpecification: item.disposerExplain,
                    }
                }),
            }).then((res) => {
                if (res.code) {
                    console.log(res.result, 1)
                    this.$message.success(res.message)
                    this.initData()
                    this.isEditDisabled = false;
                    // this.responsibilityList = res.result;
                }
            })
        },
        onSubmitAll() {
            if (this.firstAidCallList.length == 0) {
                this.$message.warning("救援记录不能为空")
                return
            }
            const everyTime = this.firstAidCallList.every(item => item.disposerTime);
            if (!everyTime && this.firstAidCallList.length != 0) {
                this.$message.warning("处置完成时间有未填项")
                return
            }
            // return
            getEmergencyRecordEditApi({
                projectSn: this.projectSn,
                id: this.firstAidCallDetail.id,
                dispositionStatus: 2,
                situations: this.firstAidCallList.map(item => {
                    return {
                        disposalPersonId: item.userId,
                        disposalPersonName: item.disposerName,
                        disposalCompletionTime: item.disposerTime,
                        livePicture: JSON.stringify(item.fileImageList),
                        liveVideoSituation: JSON.stringify(item.fileVideoList),
                        disposalSpecification: item.disposerExplain,
                    }
                }),
            }).then((res) => {
                if (res.code) {
                    console.log(res.result, 1)
                    this.$message.success(res.message)
                    this.initData()
                    this.isEditDisabled = false;
                    // this.responsibilityList = res.result;
                }
            })
        },
        getEmergencyReliefList() {
            getEmergencyReliefListApi({
                projectSn: this.projectSn,
            }).then((res) => {
                if (res.code) {
                    console.log(res.result, 1)
                    this.mapDataList = res.result;
                    // this.responsibilityList = res.result;
                }
            })
        },
        getEmergencyRecordList() {
            getEmergencyRecordListApi({
                projectSn: this.projectSn,
            }).then((res) => {
                if (res.code) {
                    console.log(res.result, 1)
                    this.mapDataList2 = res.result;
                    // this.responsibilityList = res.result;
                }
            })
        },
        initMap() {
            console.log(this.mapsDetail)
            //地图加载
            this.mapObj = new AMap.Map("map", {
                resizeEnable: true,
                zoom: 17, //初始化地图层级
                center: [this.mapsDetail.longitude ? this.mapsDetail.longitude : 116.39742, this.mapsDetail.latitude ? this.mapsDetail.latitude : 39.909], //地图中心点
            });
            const markerArr = this.mapDataList.filter(item => item.longitude || item.latitude).map((item, index) => {
                const longitude = item.longitude ? item.longitude : 0;
                const latitude = item.latitude ? item.latitude : 0;
                const normalMarker = new AMap.Marker({
                    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    // content:content,
                    position: new AMap.LngLat(longitude, latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: item.goodsName,
                    // offset: new AMap.Pixel(-15, (-15 * (index + 1))),
                })
                console.log(item);
                normalMarker.setLabel({
                    // offset: new AMap.Pixel(20, -10),  //设置文本标注偏移量
                    content: item.goodsName, //设置文本标注内容
                    direction: 'top' //设置文本标注方位
                });
                
                normalMarker.content =
                    '<p><b>物资名称：</b>' + item.goodsName + '</p>' + 
                    '<p><b>详细地址：</b>' + (item.detailedAddress ? item.detailedAddress : '') + '</p>' +
                    '<p><b>备注：</b>' + item.remark + '</p>';
                normalMarker.on('click', this.markerClick);
                normalMarker.setExtData({}); //给标注添加信息，点击时可以获取

                return normalMarker;
            })

            const markerArr2 = [this.mapsDetail].filter(item => item.longitude || item.latitude).map((item, index) => {
                const longitude = item.longitude ? item.longitude : 0;
                const latitude = item.latitude ? item.latitude : 0;
                const normalMarker = new AMap.Marker({
                    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
                    // content: '<p><b>地址：</b>' + '地址地址地址' + '</p>',
                    position: new AMap.LngLat(longitude, latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: item.goodsName,
                    // offset: new AMap.Pixel((-15 * (index + 1)), -30),
                })
                console.log(item);
                normalMarker.content =
                    '<p><b>报警姓名：</b>' + item.alarmPersonName + '</p>' +
                    '<p><b>类型：</b>' + item.emergencyTypeName + '</p>' +
                    '<p><b>详细地址：</b>' + (item.incidentSite ? item.incidentSite : '') + '</p>';
                // '<p><b>类型：</b>' + item.emergencyDetail + '</p>'
                normalMarker.on('click', this.markerClick);
                normalMarker.setExtData({}); //给标注添加信息，点击时可以获取
                return normalMarker;
            })

            // var circle = new AMap.Circle({
            //     center: new AMap.LngLat(116.39, 39.9),  // 圆心位置
            //     radius: 1000, // 圆半径
            //     fillColor: 'red',   // 圆形填充颜色
            //     strokeColor: '#fff', // 描边颜色
            //     strokeWeight: 2, // 描边宽度
            // });

            // this.mapObj.add(circle);

            // this.mapPoint();

            this.positionData = markerArr.concat(markerArr2);


            this.infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(16, -50)
            });

            // infoWindow.open(map);
            this.mapObj.add(this.positionData);

            // massMarks.setData(markerArr);
            // massMarks.setMap(this.mapObj);
            // marker.setMap(this.mapObj);
            this.mapObj.setFitView();

            console.log('!!!!!!!!!!!!!!!!!!!', this.mapObj);

        },
        markerClick(e) {
            //这个只是标注的点击事件
            // this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
            this.infoWindow.setContent(e.target.content);
            this.infoWindow.open(this.mapObj, e.target.getPosition());
        },
        handleAvatarSuccess(res, index, type) {
            if (type == 2) {
                this.firstAidCallList[index].fileImageList.push({
                    url: this.$store.state.FILEURL + res.data[0].imageUrl,
                    name: res.data[0].fileInfo.originalFilename,
                })
            } else if (type == 1) {
                this.firstAidCallList[index].fileVideoList.push({
                    url: this.$store.state.FILEURL + res.data[0].imageUrl,
                    name: res.data[0].fileInfo.originalFilename,
                })
            } else if (type == 3) {
                this.fileVideoList.push({
                    url: this.$store.state.FILEURL + res.data[0].imageUrl,
                    name: res.data[0].fileInfo.originalFilename,
                })
            }
            // this.form.loginLogo = this.$store.state.FILEURL + res.data[0].imageUrl
            // this.fileList = [{ name: '', url: this.form.loginLogo }]
            // if (this.fileList.length >= 1) {
            //     this.upload_btn1 = true; // 隐藏上传按钮
            // }
        },
        onPreview(file, fileList, type) {

            console.log(file);
            if (type == 1) {
                this.playerVideo(file.url);
            } else if (type == 2) {
                this.dialogImageUrl = file.url
                this.dialogImageVisible = true
            }
        },
        handleDelete(res, index, type) {
            // this.upload_btn1 = false;
            // this.fileList = fileList
            if (type == 2) {
                this.firstAidCallList[index].fileImageList = res;
            } else if (type == 1) {
                this.firstAidCallList[index].fileVideoList = res;
            } else if (type == 3) {
                this.fileVideoList = res;
            }
        },
        addFirstAidCall() {
            this.firstAidCallList.push({
                disposerName: this.$store.state.userInfo.realName,
                userId: this.$store.state.userInfo.userId,
                disposerTime: "",
                fileVideoList: [],
                fileImageList: [],
                disposerExplain: "",
            })
        },
        deleteFirstAidCall(index) {
            this.firstAidCallList.splice(index, 1);
        },
        mapShow(row) {
            this.mapsDetail = row;
            setTimeout(() => {
                this.initMap();
            }, 10)
            this.dialogVisible = true;
        },
        //关闭视频
        closeBtn() {
            this.isShow = false;
            this.player = "";
        },
        //视频播放
        playerVideo(item) {
            console.log(item);
            if (item) {
                // let index = item.indexOf("*");
                // let videoUrl = item.substring(index + 1);
                // console.log("点击", videoUrl);
                this.isShow = false;
                this.$nextTick(() => {
                    this.player = item;
                    this.isShow = true;
                });
            } else {
                this.$message.error("暂无视频");
            }
        },
        onSubmit() {
            this.pageNo = 1;
            this.initData();
        },
        onRefresh() {
            this.formInline.enterpriseId = "";
            this.formInline.alarmPersonName = "";
            this.formInline.alarmTime = "";

            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() {
            // this.tableData = [{}]
            let data = {
                enterpriseId: this.formInline.enterpriseId,
                alarmPersonName: this.formInline.alarmPersonName,
                // alarmTime: this.formInline.alarmTime,
                alarmTime_begin: (this.formInline.alarmTime && this.formInline.alarmTime.length > 0) ? this.formInline.alarmTime[0] : '',
                alarmTime_end: (this.formInline.alarmTime && this.formInline.alarmTime.length > 0) ? this.formInline.alarmTime[1] : '',
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                projectSn: this.projectSn,
                // assignmentPersonInCharge: this.$store.state.userInfo.accountType == 6 ? this.$store.state.userInfo.userId : '',
            }
            getEmergencyRecordPageApi(data).then((res) => {
                if (res.result) {
                    console.log(res.result.records, 1)
                    this.tableData = res.result.records;

                    this.total = res.result.total;
                }
            });
        },
        getEmergencyTypeList() {
            getEmergencyTypeListApi({
                projectSn: this.projectSn
            }).then((res) => {
                if (res.result) {
                    this.emergencyData = res.result;
                }
            })
        },
        viewData(row) {
            // this.clearData()
            this.dialogFormVisible = true

            getEmergencyRecordQueryByIdApi({
                projectSn: this.projectSn,
                id: row.id,
            }).then((res) => {
                if (res.result) {
                    console.log(res.result, 1)
                    const find = this.emergencyData.find(item => item.id == res.result.emergencyTypeId);
                    this.emergencyInfo = find ? find : {};
                    // console.log(find);
                    this.firstAidCallDetail = res.result;
                    this.firstAidCallList = res.result.situations.map(item => {
                        return {
                            id: item.disposalPersonName,
                            disposerName: item.disposalPersonName,
                            disposerTime: item.disposalCompletionTime,
                            fileVideoList: item.liveVideoSituation ? JSON.parse(item.liveVideoSituation) : [],
                            fileImageList: item.livePicture ? JSON.parse(item.livePicture) : [],
                            disposerExplain: item.disposalSpecification,
                        }
                    })

                }
            })
            // "查看"
            this.dialogTitle = this.$t('message.dangerousBigProject.view')
            this.isDisabled = true
            this.isEditDisabled = true
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        deleteRow(row) {
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    getEmergencyRecordDeleteApi({ id: row.id }).then((res) => {
                        console.log(res)
                        if (res.code == 200) {
                            this.$message.success(res.message)
                            this.initData()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });

        },
        handleSizeChange(e) {
            this.pageSize = e;
            this.initData()
        },
        handleCurrentChange() {
            this.initData()
        },
    }
}
</script>

<style lang="less" scoped>
/deep/ .amap-marker-label {
    border: none;
}

/deep/ .amap-icon img {
    width: 30px;
    height: 40px;
}

/deep/.el-dialog__footer {
    text-align: center;
}

#map {
    width: 100%;
    height: 500px;
}

/deep/ .el-dialog__body {
    padding: 10px 20px 30px;
}

.emergency {
    // padding: 14px;

    .emergency-title {
        padding: 0 30px;
        font-weight: bold;
        font-size: 16px;
        color: #000000;
        background: #D9D9D9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 34px;

        .el-button {
            height: 100%;
            padding-top: 0;
            padding-bottom: 0;
        }
    }

    .emergency-info>div {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        font-size: 14px;
        color: #000000;
        margin: 20px;
        width: 85%;

        div {
            display: flex;
            align-items: flex-start;
            width: 240px;

            span {
                flex: 1,
            }
        }

        .emergency-detail {
            flex-direction: column;

            span:last-child {
                margin-top: 12px;
                // margin-left: 17px;
            }
        }
    }

    .emergency-condition {
        border-bottom: 1px solid #c0ccda;
        padding-right: 20px;
        position: relative;
    }

    .emergency-condition>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #000000;
        margin: 20px;



        div {
            display: flex;
            align-items: center;
            // justify-content: center;
            width: inherit;

            // span {
            //     flex: 1;
            // }
        }

        >div {
            width: 380px;
            justify-content: flex-start;

            div:last-child {
                flex: 1;
                justify-content: flex-start;
            }
        }

        /deep/ .el-upload-dragger {
            width: 310px;
            height: 40px;
            position: relative;

            .el-upload__text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                justify-content: center;
            }

            .el-icon-upload {
                font-size: 20px;
                margin: 0;
                position: absolute;
                left: 13%;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        /deep/ .el-upload--picture-card {
            width: 66px;
            height: 62px;
            position: relative;

            i {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }


        }

        /deep/ .el-upload-list__item {
            width: 66px;
            height: 62px;
            margin-bottom: 0
        }

        .video-column {
            align-items: flex-start;

            div {
                flex-direction: column;
            }

            /deep/ .el-upload-list__item {
                width: 220px;
                height: 62px;
                margin-bottom: 0
            }
        }
    }


    .condition2 {
        border-bottom: none;
        padding: 13px 109px 13px 10px;
        background: #F1F1F1;
        border-radius: 10px;
        margin-top: 15px;

    }

    .condition2:last-child {
        margin-bottom: 15px;
    }

    .condition2>div {
        margin: 8px;
    }
}

.case {
    /deep/ .el-image__inner {
        width: initial;
    }
}

.upload-file {
    flex-direction: column;

    /deep/ .el-upload-list__item {
        width: 100% !important;

    }
}

.deletebtn_icon {
    position: absolute;
    top: -34px;
    right: -10px;
    color: #D81E06 !important;
    font-size: 20px !important;
    cursor: pointer;
}

.addfirstaidcall {
    width: 290px;
    height: 37px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px dashed #D8DBE8;
    color: #272D45;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px auto;
    cursor: pointer;

    i {
        margin-right: 12px;
    }
}

.el-icon-s-order,
.el-icon-map-location {
    color: #5181F6;
}

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

        .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;
    }
}
</style>