<template>
  <div :class="['edit-add-detail', pageType !== 'edit' ? '' : 'detail']">
    <div class="edit-add-detail-new-content">
      <div class="form-content" style="width: calc(100% - 600px)">
        <el-form
          ref="formInfo"
          :label-width="pageType === 'edit' ? '' : '100px'"
          :model="detailForm"
          class="detail-form"
          label-position="right"
          label-suffix="："
        >
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">事件基础信息</div>
            </div>
          </div>
          <transition v-if="pageType !== 'edit'" name="el-zoom-in-top">
            <div
              v-loading="editSaveLoading"
              element-loading-background="rgba(17, 64, 102, 0.95)"
              element-loading-spinner="el-icon-loading"
              element-loading-text="数据保存修改中..."
            >
              <BasicsInfo
                ref="basicsContent"
                :roadOptions="roadOptions"
              ></BasicsInfo>
            </div>
          </transition>
          <transition v-if="pageType === 'edit'" name="el-zoom-in-top">
            <div v-if="pageType === 'edit'">
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="事件单号">
                    <span :title="detailForm.eventNo" class="text">
                      {{ detailForm.eventNo || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="事件标题">
                    <span :title="detailForm.eventName" class="text">
                      {{ detailForm.eventName || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="事件来源">
                    <span :title="detailForm.eventSrc" class="text">
                      {{
                        dictionaryEscape('sjly', detailForm.eventSrc + '') ||
                        '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="确认情况">
                    <span :title="detailForm.eventSituation" class="text">
                      {{
                        dictionaryEscape(
                          'sjly',
                          detailForm.eventSituation + ''
                        ) || '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="事件发生时间">
                    <span :title="detailForm.eventTime" class="text">
                      {{ detailForm.eventTime || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="事件类型">
                    <span :title="detailForm.eventType" class="text">
                      {{
                        dictionaryEscape(
                          'lx_sjlxxq',
                          detailForm.lwEventType + ''
                        ) || '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="接警时间">
                    <span :title="detailForm.receiveTime" class="text">
                      {{ detailForm.receiveTime || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="确认时间">
                    <span :title="detailForm.confirmTime" class="text">
                      {{ detailForm.confirmTime || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="事件报案电话">
                    <span :title="detailForm.eventTel" class="text">
                      {{ detailForm.eventTel || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="路段名称">
                    <span :title="detailForm.roadName" class="text">
                      {{ detailForm.roadName || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="事件地点类型">
                    <span :title="detailForm.eventPlace" class="text">
                      {{
                        dictionaryEscape(
                          'sjfsqy',
                          detailForm.eventPlace + ''
                        ) || '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="事件地点">
                    <span :title="detailForm.placeName" class="text">
                      {{ detailForm.placeName || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="起点桩号">
                    <span :title="detailForm.pegSVal" class="text">
                      {{ detailForm.pegSVal || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="终点桩号">
                    <span :title="detailForm.pegEVal" class="text">
                      {{ detailForm.pegEVal || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开始站">
                    <span :title="detailForm.startPatrolName" class="text">
                      {{ detailForm.startPatrolName || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="结束站">
                    <span :title="detailForm.endPatrolName" class="text">
                      {{ detailForm.endPatrolName || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="道路方向">
                    <span :title="detailForm.direction" class="text">
                      {{
                        dictionChange(detailForm.direction, detailForm.eventPlace) || '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注信息">
                    <span :title="detailForm.placeRemarks" class="text">
                      {{ detailForm.placeRemarks || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="事件等级">
                    <span :title="detailForm.eventLevel" class="text">
                      {{
                        dictionaryEscape('sjdj', detailForm.eventLevel + '') ||
                        '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="拥堵里程(KM)">
                    <span :title="detailForm.blockLength" class="text">
                    {{ detailForm.blockLength !== undefined && detailForm.blockLength !== null ? detailForm.blockLength : '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="滞留人数">
                    <span :title="detailForm.holdupUserNum" class="text">
                      {{ detailForm.holdupUserNum !== undefined && detailForm.holdupUserNum !== null ? detailForm.holdupUserNum : '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="滞留车辆">
                    <span :title="detailForm.holdupCarNum" class="text">
                       {{ detailForm.holdupCarNum !== undefined && detailForm.holdupCarNum !== null ? detailForm.holdupCarNum : '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="受伤人数">
                    <span :title="detailForm.hurtUserNum" class="text">
                        {{ detailForm.hurtUserNum !== undefined && detailForm.hurtUserNum !== null ? detailForm.hurtUserNum : '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="死亡人数">
                    <span :title="detailForm.deadUserNum" class="text">
                     {{ detailForm.deadUserNum !== undefined && detailForm.deadUserNum !== null ? detailForm.deadUserNum : '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="损坏车辆">
                    <span :title="detailForm.brokenCarNum" class="text">
                      {{ detailForm.brokenCarNum !== undefined && detailForm.brokenCarNum !== null ? detailForm.brokenCarNum : '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="肇事方/故障车方">
                    <span :title="detailForm.cause" class="text">
                      {{ detailForm.cause || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="肇事车辆/故障车辆">
                    <span :title="detailForm.causeCar" class="text">
                      {{ detailForm.causeCar || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="路产损失(元)">
                    <span :title="detailForm.loss" class="text">
                      {{ detailForm.loss || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="事件描述">
                    <span :title="detailForm.memo" class="text">
                      {{ detailForm.memo || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="处理措施">
                    <span :title="detailForm.disposition" class="text">
                      {{ detailForm.disposition || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </transition>
          <template>
            <div class="rows">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">交通管制列表</div>
              </div>
            </div>
            <el-table :data="detailForm.trafficControls" style="width: 100%">
              <!-- <el-table-column align="center" type="index" label="序号" width="60">
              </el-table-column> -->
              <el-table-column
                align="center"
                label="路段名称"
                prop="propertyTypeId"
                width="130"
              >
                <template v-slot="{row}">
                  {{ row.roadCode + row.roadName || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="地点"
                prop="placeName"
                width="120"
              >
                <template v-slot="{row}">
                  {{ row.placeName || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="起止桩号"
                min-width="100"
                prop="unit"
              >
                <template v-slot="{row}">
                  <div v-if="row.pegSVal || row.pegEVal">
                    <div>{{ row.pegSVal || '-' }}</div>
                    <div>{{ row.pegEVal || '-' }}</div>
                  </div>
                  <div v-else>-</div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="方向"
                prop="direction"
                width="80"
              >
                <template v-slot="{row}">
                  {{ dictionChange(row.direction, row.eventPlace) || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="管制措施"
                prop="price"
                width="80"
              >
                <template v-slot="{row}">
                  {{ dictionaryEscape('gzcs', row.measureType) || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="管制开始时间"
                min-width="140"
                prop="startTime"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="解除时间"
                prop="endTime"
                width="120"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="状态"
                prop="status"
                width="80"
              >
                <template v-slot="{row}">
                  {{ dictionaryEscape('gzzt', row.status, {congruent: false}) || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                min-width="140"
                prop="totle"
              >
                <template v-slot="{row, $index}">
                  <el-popover
                    v-if="!row.endTime"
                    v-model="popoverVisible"
                    placement="right"
                    trigger="click"
                    width="220"
                  >
                    <div class="release-title">解除时间：</div>
                    <el-date-picker
                      v-model="jiechuTime"
                      default-time="12:00:00"
                      placeholder="选择解除时间"
                      style="width: 200px"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      @change="handleDateChange(row)"
                      @click.native.stop
                    >
                    </el-date-picker>
                    <div class="release-btn">
                      <el-button
                        size="mini"
                        type="primary"
                        @click="handleRelieve(row)"
                      >确定
                      </el-button>
                    </div>
                    <el-link
                      slot="reference"
                      :underline="false"
                      class="release-cancel"
                      type="success"
                    >
                      解除
                    </el-link>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
            <div class="rows">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">交通拥堵列表</div>
              </div>
            </div>
            <el-table :data="detailForm.trafficCongestions" style="width: 100%">
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="路段名称"
                prop="propertyTypeId"
                width="130"
              >
                <template v-slot="{row}">
                  {{ row.roadCode + row.roadName || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="起止桩号"
                min-width="100"
                prop="unit"
              >
                <template v-slot="{row}">
                  <div>{{ row.pegSVal || '-' }}</div>
                  <div>{{ row.pegEVal || '-' }}</div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="拥堵开始时间"
                prop="startTime"
                width="120"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="预计解除时间"
                prop="controlTime"
                width="120"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="解除时间"
                prop="endTime"
                width="120"
              >
              </el-table-column>
              <!-- <el-table-column align="center" prop="totle" label="操作" width="140">
                <template v-slot="{ row, $index }">
                  <el-link :underline="false" type="primary" @click="handleEdit(row, $index)">
                    编辑
                  </el-link>
                  <el-link :underline="false" type="danger" @click="handleDelete(row, $index)">
                    删除
                  </el-link>
                </template>
              </el-table-column> -->
            </el-table>
            <div class="rows">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">路产赔偿清单</div>
              </div>
            </div>
            <el-table
              :data="detailForm.compensationDetails"
              border
              style="width: 100%"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="项目类别"
                prop="propertyTypeId"
                width="80"
              >
                <template v-slot="{row}">
                  {{ dictionaryEscape('lsxmlx', row.propertyTypeId) || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="项目明细"
                min-width="100"
                prop="propertySubjectName"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="单位"
                prop="unit"
                width="80"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="数量"
                prop="num"
                width="80"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="赔偿标准"
                prop="price"
                width="80"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="小计(元)"
                prop="totle"
                width="80"
              >
              </el-table-column>
            </el-table>
            <div class="rows">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">救援单信息</div>
              </div>
            </div>
            <el-table :data="detailForm.rescueInfos" style="width: 100%">
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="70"
              />
              <el-table-column
                align="center"
                label="救援单号"
                prop="rescueNo"
                width="180"
              >
                <template v-slot="{row}">
                  <span style="color: #c3cad0;font-size: 14px;text-decoration: underline;cursor: pointer;"
                        @click="rescueIncidents(row)">{{ row.rescueNo
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="救援类型"
                prop="rescueType"
                width="100"
              >
                <template v-slot="{row}">
                  {{ dictionaryEscape('jylx', row.rescueType + '') || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="事件点位桩号"
                prop="pegVal"
              ></el-table-column>
              <el-table-column
                align="center"
                label="行驶方向"
                prop="direction"
                width="100"
              >
                <template v-slot="{row}">
                  {{ dictionaryEscape('xsfx', row.direction + '') || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="报案时间"
                min-width="160"
                prop="rescueTime"
              ></el-table-column>
            </el-table>
            <div class="rows">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">救援费用信息</div>
              </div>
            </div>
            <el-table :data="detailForm.costs" style="width: 100%">
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="70"
              />
              <el-table-column
                align="center"
                label="发票单号"
                prop="invoiceNo"
                width="180"
              ></el-table-column>
              <el-table-column
                align="center"
                label="应收金额"
                prop="shouldMoney"
                width="80"
              ></el-table-column>
              <el-table-column
                align="center"
                label="实收金额"
                prop="actualMoney"
                width="80"
              ></el-table-column>
              <el-table-column
                align="center"
                label="收费类型"
                prop="costType"
                width="100"
              >
                <template v-slot="{row}">
                  {{ dictionaryEscape('sflx', row.costType + '') || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="支付方式"
                prop="payType"
                width="100"
              >
                <template v-slot="{row}">
                  {{ dictionaryEscape('zffs', row.payType + '') || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="支付时间"
                min-width="180"
                prop="costTime"
              ></el-table-column>
            </el-table>
          </template>
        </el-form>
      </div>
      <div class="form-content" style="width: 600px">
        <el-form
          ref="formInfo"
          :model="detailForm"
          class="detail-form"
          label-position="right"
          label-suffix="："
        >
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">处置流程记录</div>
            </div>
          </div>
          <el-timeline class="flow-box">
            <el-timeline-item
              v-for="item in detailForm.handles"
              :key="item.id"
              :timestamp="item.createTime"
              placement="top"
            >
              <el-card>
                <div class="header">
                  <div class="title">
                    处置节点：{{ item.dictValue || '-' }}
                  </div>
                </div>
                <div class="header">
                  <div class="title" style="display: flex">
                    <div>处置部门/队伍：</div>
                    <div style="flex: 1;">{{ item.handleTeamName || '-' }}</div>
                  </div>
                </div>
                <div class="header">
                  <div class="title" style="display: flex">
                    <div>处置人员：</div>
                    <div style="flex: 1;">{{ item.handleUserName || '-' }}</div>
                  </div>
                </div>
                <div class="event-detail">
                  处置情况：{{ item.handleInfo || '-' }}
                </div>
                <div class="dispose-img">
                  <el-image
                    v-for="file in item.files"
                    :key="file.id"
                    :preview-src-list="getFilePreviewUrlList(item.files)"
                    :src="file.filePreviewUrl"
                    style="width: 100px; height: 100px"
                  >
                  </el-image>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-form>
      </div>
      <!-- 事件选择 -->
      <SaveDetailDialog
        :detailForm="saveDetailForm"
        :is-show.sync="SaveDetailDialog"
      />
    </div>
  </div>
</template>

<script>
import {refineRequestBody} from '@/utils/requestWrappers'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import {deregulation, tableDetail, tableEdit} from '@/api/patrolAndRescue/commandDispatch/eventManagement'
import PubSub from 'pubsub-js'
import {tableData as roadSectionInfoInter} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/roadSectionInfo'
import {tableData as alongRouteInfoInter} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/alongRouteInfo'
import {tableData as teamData} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/patrolAndRescueTeamsMgmt'
import SaveDetailDialog
  from '@/views/patrolAndRescue/commandDispatch/EventInquiry/components/SaveDetailDialog/index.vue'
import moment from 'moment'

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {SaveDetailDialog},
  data() {
    return {
      appointDialog: false,
      editSaveLoading: false,
      pageType: 'edit',
      detailForm: {},
      pubSub: null,
      eventStatus: 0,
      confirmLoading: false,
      reverse: true,
      map: null,
      mapLoading: true,
      mapDefaultOptions: {
        center: [106.5507, 29.5647] /*地图中心点*/,
        zoom: 9 /*地图默认缩放等级*/
      },
      eventGradeOptions: [
        //事件等级
        {label: '1级', value: 1},
        {label: '2级', value: 2},
        {label: '3级', value: 3},
        {label: '4级', value: 4}
      ],
      markers: [],
      roadOptions: [],
      alongRouteInfoData: [],
      teamOptions: [],
      editDialog: false,
      eventType: '',
      baseInfo: {},
      SaveDetailDialog: false,
      saveDetailForm: {},
      jiechuTime: new Date(),
      popoverVisible: false
    }
  },
  computed: {},
  watch: {
    componentName: {
      handler(newVal) {
        if (newVal === this.$options.name) {
          this.openPage()
        } else {
          this.closePage()
        }
      }
    }
  },
  mounted() {
    this.pubSub = PubSub.subscribe('DetailPage', (_, data) => {
      if (data.id) {
        this.eventStatus = data.status
        this.getDetail(data.id)
      }
      this.getRoadOptions()
    })
  },
  methods: {
    getDictionaryByCode,
    dictionaryEscape,
    handleDateChange(row) {
      if (row.startTime > this.jiechuTime) {
        this.jiechuTime = ''
        this.$message.error('管制解除时间必须在管制开始时间之后！')
      }
      this.popoverVisible = true
    },
    dictionChange(value, eventPlace) {
      if (!value || !eventPlace) return '-'
      const placeItem = this.getDictionaryByCode('sjfsqy')
        .find(item => item.value === eventPlace)
      if (!placeItem?.lowerDic?.['jtgz-fx']) return '-'
      const matchedItem = placeItem.lowerDic['jtgz-fx']
        .find(item => item.value === value)
      return matchedItem?.name || '-'
    },
    showAppointDialog() {
      // this.baseInfo = this.$refs.basicsContent.sendBaseData()
      // this.$refs.addEditForm.validate(async (valid, object) => {
      //   if (!valid) {
      //     this.$message.warning(
      //       `有${Object.keys(object).length + (basiceData.fieldNum || 0)
      //       }个字段未通过校验，请正确填写表单内容。`
      //     )
      //   } else {

      //   }
      // })
      this.appointDialog = true
    },

    rescueIncidents(row) {
      this.SaveDetailDialog = true
      this.saveDetailForm = row
    },

    clickEdit() {
      this.pageType = this.pageType === 'edit' ? 'detail' : 'edit'
      if (this.pageType !== 'edit') {
        this.$nextTick(() => {
          this.$refs.basicsContent.getDetail(this.detailForm)
        })
      }
    },
    async clickSave() {
      // let data = JSON.parse(JSON.stringify(this.detailForm))
      let data = this.$refs.basicsContent.sendBaseData()
      if (data.fieldNum) {
        this.$message.warning(
          `有${data.fieldNum}个字段未通过校验，请正确填写表单内容。`
        )
      } else {
        delete data.handles
        delete data.compensationInfo
        delete data.trafficCongestions
        delete data.trafficControls
        data.eventType = JSON.stringify(data.eventType)
        try {
          this.editSaveLoading = true
          let {state, message, value} = await tableEdit(data)
          if (state) {
            this.$message.success(`编辑保存成功`)
            this.pageType = 'edit'
            this.detailForm = {...this.detailForm, ...data}
            this.detailForm.eventType = JSON.parse(data.eventType)
          }
        } finally {
          this.editSaveLoading = false
        }
      }
    },

    // 路段数据查询
    async getRoadOptions() {
      const {rows = []} = await roadSectionInfoInter({pageBean: {pageSize: -1}})
      this.roadOptions = rows.map((item) => {
        item.roadName = item.name + ' ' + item.code
        return item
      })
      // if(!this.id) {
      //   this.$set(this.detailForm, 'roadId', this.roadOptions[0].id)
      //   this.roadChange(this.roadOptions[0].id)
      // }
    },
    // 路段选择变化
    async roadChange(value) {
      this.getTeamData(value)
      // 通过路段信息获取沿线设备信息
      this.getAlongRouteInfo(value, (data) => {
        const {startPatrolId, endPatrolId} = this.detailForm

        /*
         * 巡检开始，结束站
         * */
        if (startPatrolId) {
          if (!data.some((i) => i.id === startPatrolId)) {
            this.detailForm.startPatrolId = ''
            setTimeout((_) => this.$message.warning('请重新选择巡检开始站..'))
          }
        }

        if (endPatrolId) {
          if (!data.some((i) => i.id === endPatrolId)) {
            this.detailForm.endPatrolId = ''
            setTimeout((_) => this.$message.warning('请重新选择巡检结束站..'))
          }
        }
      })
    },
    // 通过路段信息获取沿线设备信息
    async getAlongRouteInfo(value, callback) {
      const _wipeData = () => {
        this.alongRouteInfoData = []
        callback && callback(this.alongRouteInfoData)
      }

      try {
        // 获取沿线设施
        const {rows = []} = await alongRouteInfoInter(
          refineRequestBody({
            querys: [{operation: 'IN', property: 'road_segment_id_', value}]
          }),
          'addEdit'
        )

        callback && callback(rows)
        this.alongRouteInfoData = rows
      } catch (error) {
        // 不为请求过快结束的情况下，重置
        if (error.message !== 'canceled') _wipeData()
      }
    },

    siteChange(e, type) {
      let siteInfo = this.alongRouteInfoData.find((item) => item.id === e)
      this.detailForm[`${type}Name`] = siteInfo.name
    },

    // 通过路段信息获取巡查救援队伍信息
    async getTeamData(value) {
      const {rows = []} = await teamData(
        refineRequestBody({
          querys: [
            {operation: 'IN', property: 'r.id_', value},
            {operation: 'EQUAL', property: 't.type_', value: '1'}
          ]
        }),
        'addEdit'
      )
      this.teamOptions = rows
    },

    // 附件预览list
    getFilePreviewUrlList(files) {
      let srcList = files.map((item) => {
        return item.filePreviewUrl
      })
      return srcList
    },
    eventConfirm() {
      this.$confirm('确定事件核实确认吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.confirmLoading = true
        const {state} = await eventConfirm(this.detailForm.id)
        if (state) {
          this.$message.success(`事件确认成功`)
          this.confirmLoading = false
          this.changePage('TablePage', 'add')
        }
      })
    },
    // 打开页面执行
    openPage() {
      // this.$refs.mineMap?.map?.resize()
    },
    changePage(pageName = '', type = '') {
      if (!pageName) return
      this.$emit('changePage', pageName, (_) => {
        PubSub.publish(pageName, {type})
      })
    },
    // 关闭页面执行
    closePage() {
      const {pubSub, addEditRules, roadOptions} = this
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {
        pubSub,
        roadOptions
      })
      // this.$refs.mineMap?.resetMap(_ => this.mapLoading = false) // 重置地图
      this.$nextTick((_) => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },
    mapLoad() {
      this.mapLoading = false
    },
    // 自定义标记点
    customTagPoints(lnglat = []) {
      this.markers[this.markers.length - 1]?.remove()
      // 自定义点标记的内部DOM元素
      let el = document.createElement('div')
      el.className = 'marker-tip'
      // Marker构造函数接收两个参数，一个为自定义的DOM元素，一个是Object参数，其中包括偏移量等
      let marker = new this.$refs.mineMap.mineMap.Marker(el, {
        anchor: 'center',
        offset: [0, 0] // offset参数为标注点相对于其左上角偏移像素大小
      })
        // 调用setLngLat方法指定Marker的坐标位置
        .setLngLat(lnglat)
        .addTo(this.$refs.mineMap.map)
      this.markers.push(marker)
    },

    // 获取详情
    async getDetail(id) {
      this.detailForm = await tableDetail(id)
      const {pegSVal = '', pegEVal = ''} = this.detailForm
      if (pegSVal) {
        let startPegArr = pegSVal.split('+')
        this.detailForm.startPeg = startPegArr[0].slice(1)
        this.detailForm.startPegAdd = startPegArr[1]
      }
      if (pegEVal) {
        let endPegArr = pegEVal.split('+')
        this.detailForm.endPeg = endPegArr[0].slice(1)
        this.detailForm.endPegAdd = endPegArr[1]
      }
      this.detailForm.eventType = JSON.parse(this.detailForm.eventType)
      this.roadChange(this.detailForm.roadId)
    },

    getEventType() {
      const {eventType} = this.detailForm
      if (eventType) {
        if (eventType.length > 1) {
          return this.dictionaryEscape('lx_sjlxxq', eventType[1] + '')
        } else {
          return '-'
        }
      } else {
        return '-'
      }
    },

    //
    async handleRelieve(row, index) {
      if (this.jiechuTime) {
        this.popoverVisible = false
        row.endTime = moment(this.jiechuTime).format('YYYY-MM-DD HH:mm:ss')
        row.status = 2
        const {state, value, message} = await deregulation(row)
        if (state) {
          this.$message.success('解除管制成功')
          await this.getDetail(this.detailForm.id)
        } else {
          this.$message.error(message || '解除管制失败')
        }
      } else {
        this.$message.warning('请选择解除时间')
      }

      // this.$confirm('确认解除管制吗?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   console.log(row)
      //
      //   row.status = 2
      //   deregulation(row).then((res) => {
      //     if (res.state) {
      //       this.$message.success('解除管制成功！')
      //     }
      //   })
      // })
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
.corporate-customers {
  .edit-add-detail {
    .form-content {
      .el-form {
        .rows {
          ::v-deep.rows-title {
            flex: 1;
            display: flex;
            justify-content: space-between;

            .text-overflow {
              width: auto;
            }

            .actions {
              display: flex;
              text-align: right;
              // gap: 10px;
            }
          }
        }
      }
    }
  }
}

.edit-add-detail-new-content {
  width: 100%;
  display: flex;
  height: 0;
  flex: 1;
  // column-gap: 20px;

  .form-content {
    flex: 4;
  }

  .map-content {
    flex: 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: $--system-border-color3 0.5px 0.5px 5px 1px;

    ::v-deep.marker-tip {
      position: relative;
      background-image: url('~@/assets/img/patrolAndRescue/inspection-points-icon.png');
      background-size: cover;
      width: 48px !important;
      height: 48px !important;
      z-index: 999;

      &::after {
        position: absolute;
        content: '救援点位置';
        left: 100%;
        top: 8px;
        width: 80px;
        height: 25px;
        font-size: 16px;
        color: $--color-warning;
        text-align: center;
        line-height: 25px;
        padding: 5px 10px;
        background-color: rgba(darken($--color-warning, 70%), 0.9);
        border-radius: 3px;
        box-shadow: 0 0 6px rgba($--color-warning, 0.8);
        border: none;
        z-index: 999;
      }
    }
  }

  .stake-mark {
    ::v-deep .el-form-item__content {
      display: flex;
      justify-content: space-between;

      .pegVal-text2,
      .pegVal-text1 {
        padding-right: 10px;
        font-size: 16px;
        width: fit-content;
      }

      .pegVal-text2 {
        padding-left: 10px;
        font-size: 24px;
      }
    }
  }
}

.flow-box {
  ::v-deep.el-timeline-item__timestamp {
    font-size: 16px;
    color: #fff;
  }

  .el-card {
    background-color: #144871;
    border-radius: 5px;
  }

  .header {
    display: flex;

    .title {
      width: 50%;
    }

    margin-bottom: 10px;
  }

  .event-detail {
    // padding: 10px 0;
    margin-bottom: 10px;
  }

  .dispose-img {
    display: flex;
    gap: 10px;

    .el-image {
      border-radius: 5px;
      box-sizing: border-box;
    }
  }

}

::v-deep.el-backtop {
  background: transparent;
}

::v-deep.top-box {
  background: rgba(10, 38, 61, .5);
}

.corporate-customers {
  .edit-add-detail-new-content {
    ::v-deep .form-content {
      border-radius: 0 !important;
      box-shadow: none !important;
    }
  }
}

::v-deep .el-radio {
  margin-right: 0px;
}

.release-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.release-btn {
  text-align: right;
  margin-top: 10px;
}
</style>
