<template>
  <div :class="['edit-add-detail', pageType !== 'edit' ? '' : 'detail']">
    <div class="edit-add-detail-new-content">
      <div class="form-content" style="width: calc(100% - 500px)">
        <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 class="actions">
                <el-link
                  v-if="pageType === 'edit'"
                  :underline="false"
                  icon="el-icon-edit"
                  type="primary"
                  @click="clickEdit"
                  >编辑
                </el-link>
                <template v-else>
                  <el-link
                    :underline="false"
                    icon="el-icon-document-checked"
                    type="primary"
                    @click="clickSave"
                    >保存
                  </el-link>
                  <el-link
                    :underline="false"
                    icon="el-icon-close"
                    type="info"
                    @click="clickEdit"
                    >取消
                  </el-link>
                </template>

                <!-- v-if="detailForm.eventStatus == '3'" -->
                <!-- <el-link
                  v-if="detailForm.eventStatus == '3'"
                  :underline="false"
                  icon="el-icon-folder-checked"
                  type="success"
                  @click="handleEventCompleted"
                  >完结
                </el-link> -->
              </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 margin-row">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">交通管制列表</div>
                <div class="actions">
                  <el-link
                    :underline="false"
                    icon="el-icon-plus"
                    type="primary"
                    @click="handleAdd('controlDialog')"
                    >添加
                  </el-link>
                </div>
              </div>
            </div>
            <el-table
              :data="detailForm.trafficControls"
              style="width: 100%"
              @row-dblclick="row => handleEdit(row, 'controlDialog')"
            >
              <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="120"
                prop="placeName"
              >
                <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="方向"
                min-width="80"
                prop="direction"
              >
                <template v-slot="{row}">
                  {{ dictionChange(row.direction, row.eventPlace) || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="管制措施"
                min-width="80"
                prop="price"
              >
                <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="解除时间"
                min-width="120"
                prop="endTime"
              >
              </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="popoverVisibleMap[row.id]"
                    placement="right"
                    trigger="click"
                    width="220"
                    @show="initJiechuTime(row)"
                  >
                    <div class="release-title">解除时间：</div>
                    <el-date-picker
                      v-model="jiechuTimeMap[row.id]"
                      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>
                  <el-link
                    :underline="false"
                    type="danger"
                    @click="handleDelete(row, 'controlDialog')"
                  >
                    删除
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
            <div class="rows margin-row">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">交通拥堵列表</div>
                <div class="actions">
                  <el-link
                    :underline="false"
                    icon="el-icon-plus"
                    type="primary"
                    @click="handleAdd('trafficJamDialog')"
                    >添加
                  </el-link>
                </div>
              </div>
            </div>
            <el-table
              :data="detailForm.trafficCongestions"
              style="width: 100%"
              @row-dblclick="row => handleEdit(row, 'trafficJamDialog')"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="路段名称"
                min-width="100"
                prop="propertyTypeId"
              >
                <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 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="拥堵开始时间"
                min-width="120"
                prop="startTime"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="预计解除时间"
                min-width="120"
                prop="controlTime"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="解除时间"
                min-width="120"
                prop="endTime"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                prop="totle"
                width="140"
              >
                <template v-slot="{row, $index}">
                  <div class="btn-group">
                    <el-popover
                      v-if="!row.endTime"
                      v-model="popoverVisibleMap[row.id]"
                      placement="right"
                      trigger="click"
                      width="220"
                      @show="initReleaseTime(row)"
                    >
                      <div class="release-title">解除时间：</div>
                      <el-date-picker
                        v-model="releaseTimeMap[row.id]"
                        default-time="12:00:00"
                        placeholder="选择解除时间"
                        style="width: 200px"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="handleReleaseTimeChange(row)"
                        @click.native.stop
                      >
                      </el-date-picker>
                      <div class="release-btn">
                        <el-button
                          size="mini"
                          type="primary"
                          @click="handleRelease(row)"
                          >确定
                        </el-button>
                      </div>
                      <el-link
                        slot="reference"
                        :underline="false"
                        class="release-cancel"
                        type="success"
                      >
                        解除
                      </el-link>
                    </el-popover>
                    <el-link
                      :underline="false"
                      type="danger"
                      @click="handleDelete(row, 'trafficJamDialog')"
                    >
                      删除
                    </el-link>
                  </div>
                </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 class="actions">
                  <el-link
                    :underline="false"
                    icon="el-icon-plus"
                    type="primary"
                    @click="handleAdd('compensateDialog')"
                    >添加
                  </el-link>
                </div>
              </div>
            </div>
            <el-table
              :data="detailForm.compensationDetails"
              border
              style="width: 100%"
              @row-dblclick="row => handleEdit(row, 'compensateDialog')"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="赔偿分类"
                min-width="100"
                prop="propertySubjectType"
              >
                <template v-slot="{row}">
                  {{
                    dictionaryEscape('lsxmpcfl', row.propertySubjectType, {
                      congruent: false
                    }) || '-'
                  }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="项目明细"
                min-width="120"
                prop="propertySubjectName"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="明细分类"
                min-width="80"
                prop="propertyTypeId"
              >
                <template v-slot="{row}">
                  {{
                    dictionaryEscape('lsxmlx', row.propertyTypeId, {
                      congruent: false
                    }) || '-'
                  }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="单位"
                min-width="80"
                prop="unit"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="数量"
                min-width="80"
                prop="num"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="赔偿标准"
                min-width="80"
                prop="price"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="小计(元)"
                min-width="80"
                prop="totle"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                prop="totle"
                width="100"
              >
                <template v-slot="{row, $index}">
                  <el-link
                    :underline="false"
                    type="danger"
                    @click="handleDelete(row, 'compensateDialog')"
                  >
                    删除
                  </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.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 margin-row">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">救援费用信息</div>
                <div class="actions">
                  <el-link
                    :underline="false"
                    icon="el-icon-plus"
                    type="primary"
                    @click="handleAdd('rescueDialog')"
                    >添加
                  </el-link>
                </div>
              </div>
            </div>
            <el-table
              :data="detailForm.costs"
              style="width: 100%"
              @row-dblclick="row => handleEdit(row, 'rescueDialog')"
            >
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60"
              />

              <el-table-column
                align="center"
                label="应收金额"
                min-width="100"
                prop="shouldMoney"
              ></el-table-column>
              <el-table-column
                align="center"
                label="实收金额"
                min-width="100"
                prop="actualMoney"
              ></el-table-column>
              <el-table-column
                align="center"
                label="收费类型"
                min-width="100"
                prop="costType"
              >
                <template v-slot="{row}">
                  <template v-if="row.costType === '1'">救援收费</template>
                  <template v-else-if="row.costType === '2'">返空收费</template>
                  <template v-else> -</template>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="支付方式"
                min-width="100"
                prop="payType"
              >
                <template v-slot="{row}">
                  <template v-if="row.payType === '1'">线下支付</template>
                  <template v-else-if="row.payType === '2'">线上支付</template>
                  <template v-else> -</template>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="发票单号"
                min-width="140"
                prop="invoiceNo"
              ></el-table-column>
              <el-table-column
                align="center"
                label="支付时间"
                min-width="90"
                prop="costTime"
              ></el-table-column>
              <el-table-column
                align="center"
                label="操作"
                min-width="80"
                prop="totle"
              >
                <template v-slot="{row, $index}">
                  <el-link
                    :underline="false"
                    type="danger"
                    @click="handleDelete(row, 'rescueDialog')"
                  >
                    删除
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-form>
      </div>
      <div class="form-content" style="width: 500px">
        <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 class="title">-->
                  <!--                    事件处置时间：{{ item.handleTime || '-' }}-->
                  <!--                  </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>
        <el-button
          v-if="detailForm.eventStatus !== 4"
          :disabled="disableShow"
          circle
          class="add-btn-fixed"
          icon="el-icon-plus"
          title="添加处置环节"
          type="warning"
          @click="handleAddDisposal"
        ></el-button>
      </div>
      <!-- <EditDialog :is-show.sync="editDialog"></EditDialog> -->
    </div>
    <div slot="footer" class="footer">
      <el-button
        v-if="
          detailForm.eventStatus < 1 &&
            detailForm.lwEventType !== '37' &&
            detailForm.lwEventType !== '38'
        "
        type="primary"
        @click="showAppointDialog('appoint')"
      >
        委派
      </el-button>
      <el-button @click="changePage('TablePage', 'edit')">
        {{ $t('domestic.cancel') }}
      </el-button>
    </div>
    <!--  救援委派弹层  -->
    <AppointDialog
      :baseInfo="detailForm"
      :eventInfo="detailForm"
      :inspectOptions="inspectOptions"
      :is-show.sync="appointDialog"
      :roadOptions="roadOptions"
      :teamOptions="teamOptions"
      @offPage="changePage('TablePage', 'add')"
    />
    <disposalProcess
      :eventInfo="detailForm"
      :is-show.sync="disposalProcess"
      @updataHandles="handleUpdataHandles"
    >
    </disposalProcess>
    <!-- 赔偿清单 -->
    <DetailedListGialog
      :is-show.sync="compensateDialog"
      :itemDetail="compensateDialogDetail"
      :roadId="detailForm.roadId"
      @sendData="saveCompensation"
    />
    <!-- 救援费用信息 -->
    <rescueCostDialog
      :is-show.sync="rescueDialog"
      :itemDetail="rescueDialogDetail"
      @reload="reload"
    ></rescueCostDialog>
    <!-- 管制 -->
    <trafficControlDialog
      :is-show.sync="controlDialog"
      :itemDetail="controlDialogDetail"
      :roadOptions="roadOptions"
      @reload="reload"
    >
    </trafficControlDialog>
    <!-- 拥堵 -->
    <TrafficJamDialog
      :is-show.sync="trafficJamDialog"
      :itemDetail="trafficJamDialogDetail"
      :roadOptions="roadOptions"
      @reload="reload"
    >
    </TrafficJamDialog>
    <!-- 事件选择 -->
    <SaveDetailDialog
      :detailForm="saveDetailForm"
      :is-show.sync="SaveDetailDialog"
    />
  </div>
</template>

<script>
import {refineRequestBody} from '@/utils/requestWrappers'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import {
  deregulation,
  eventCompleted,
  tableDetail,
  tableEdit
} from '@/api/patrolAndRescue/commandDispatch/eventManagement'
import PubSub from 'pubsub-js'
import moment from 'moment'
import BasicsInfo from '../BasicsInfo'
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 AppointDialog from '../AppointDialog'
import disposalProcess from '../DisposalProcess'
import {
  compensationAdd,
  compensationDelete,
  compensationEdit,
  rescueFeeDelete,
  trafficControlDelete,
  trafficJamDelete,
  trafficJamEdit
} from '@/api/patrolAndRescue/commandDispatch/eventManagement/eventEdit'

import DetailedListGialog from '@/views/patrolAndRescue/roadDamageComp/RoadDamageRegister/components/EditAddPage/components/DetailedListGialog' // 赔偿清单弹窗
import rescueCostDialog from './rescueCostDialog/index.vue' // 救援费用信息弹窗
import trafficControlDialog from './trafficControlDialog/index.vue' // 拥堵列表弹窗
import TrafficJamDialog from './trafficJamDialog/index.vue'
import SaveDetailDialog from '@/views/patrolAndRescue/commandDispatch/EventInquiry/components/SaveDetailDialog/index.vue' // 拥堵列表弹窗
export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {
    SaveDetailDialog,
    BasicsInfo,
    AppointDialog,
    disposalProcess,
    DetailedListGialog,
    rescueCostDialog,
    TrafficJamDialog,
    trafficControlDialog
  },
  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: {},
      disposalProcess: false,
      compensateDialog: false, // 赔偿清单弹窗
      compensateDialogDetail: {},
      rescueDialog: false, // 救援费用信息弹窗
      rescueDialogDetail: {},
      controlDialog: false, // 管制列表弹窗
      controlDialogDetail: {},
      trafficJamDialog: false, // 拥堵列表弹窗
      trafficJamDialogDetail: {},
      releaseTimeMap: {},
      jiechuTimeMap: {},
      SaveDetailDialog: false,
      saveDetailForm: {},
      inspectOptions: [],
      popoverVisibleMap: {},
      disableShow: true
    }
  },
  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: {
    initJiechuTime(row) {
      if (!this.jiechuTimeMap[row.id]) {
        this.$set(
          this.jiechuTimeMap,
          row.id,
          moment().format('YYYY-MM-DD HH:mm:ss')
        )
      }
    },
    initReleaseTime(row) {
      if (!this.releaseTimeMap[row.id]) {
        this.$set(
          this.releaseTimeMap,
          row.id,
          moment().format('YYYY-MM-DD HH:mm:ss')
        )
      }
    },
    handleReleaseTimeChange(row) {
      if (row.startTime > this.releaseTimeMap[row.id]) {
        this.$set(this.releaseTimeMap, row.id, '')
        this.$message.error('拥堵解除时间必须在拥堵开始时间之后！')
      }
      this.$set(this.popoverVisibleMap, row.id, true)
    },
    handleDateChange(row) {
      if (row.startTime > this.jiechuTimeMap[row.id]) {
        this.$set(this.jiechuTimeMap, row.id, '')
        this.$message.error('管制解除时间必须在管制开始时间之后！')
      }
      this.$set(this.popoverVisibleMap, row.id, 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 || '-'

      // if (value && eventPlace) {
      //   let data = this.getDictionaryByCode('sjfsqy')
      //   let array = data.filter(item => item.value === eventPlace)[0].lowerDic['jtgz-fx']
      //   return array.filter(item => item.value === value)[0].name
      // } else {
      //   return '-'
      // }
    },
    rescueIncidents(row) {
      this.SaveDetailDialog = true
      this.saveDetailForm = row
    },
    handleAdd(type) {
      if (this.pageType === 'edit') {
        if (type === 'compensateDialog' && this.detailForm.compensationInfo) {
          this[type] = true
          this[type + 'Detail'] = {
            eventId: this.detailForm.id,
            roadId: this.detailForm.roadId
          }
        } else if (
          type === 'compensateDialog' &&
          !this.detailForm.compensationInfo
        ) {
          this.$router.push({
            name: 'roadDamageRegister'
          })
        }
        if (type !== 'compensateDialog') {
          this[type] = true
          this[type + 'Detail'] = {
            eventId: this.detailForm.id,
            roadId: this.detailForm.roadId
          }
        }
      } else {
        this.$message.warning('请先保存当前编辑的事件基础信息')
      }
    },
    async saveCompensation(data) {
      this.compensateDialogDetail = data
      this.compensateDialog = false
      const {
        id,
        unit,
        price,
        propertySubjectId,
        propertySubjectName,
        propertySubjectType,
        propertyTypeId,
        totle,
        num,
        memo,
        modle,
        compensationId
      } = this.compensateDialogDetail
      const params = {
        id,
        unit,
        price,
        propertySubjectId,
        propertySubjectName,
        propertySubjectType,
        propertyTypeId,
        totle,
        num,
        memo,
        modle,
        eventId: this.detailForm.id,
        compensationId: this.detailForm.compensationInfo.id
      }
      try {
        const API = data.id ? compensationEdit : compensationAdd
        const type = data.id ? '编辑' : '新增'
        const {state, message} = await API(params)
        if (state) {
          this.reload()
          this.$message.success('路产赔偿清单' + type + '成功！')
        } else {
          this.$message.error(message || '路产赔偿清单' + type + '失败！')
        }
      } catch (error) {
        this.$message.error(error || '路产赔偿清单保存失败！')
      }
    },
    handleEdit(row, type) {
      this[type + 'Detail'] = row
      this[type] = true
    },
    // 拥堵解除
    async handleRelease(row) {
      if (this.releaseTimeMap[row.id]) {
        this.$set(this.popoverVisibleMap, row.id, false)
        row.endTime = moment(this.releaseTimeMap[row.id]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        const {state, value, message} = await trafficJamEdit(row)
        if (state) {
          this.$message.success('拥堵解除成功')
          this.reload()
        } else {
          this.$message.error(message || '拥堵解除失败')
        }
      } else {
        this.$message.warning('请选择解除时间')
      }
    },
    handleDelete(data, type) {
      this.$confirm('是否删除该数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          let API
          switch (type) {
            case 'compensateDialog':
              API = compensationDelete
              break
            case 'trafficJamDialog':
              API = trafficJamDelete
              break
            case 'controlDialog':
              API = trafficControlDelete
              break
            case 'rescueDialog':
              API = rescueFeeDelete
              break
          }
          let {state} = await API(data.id)
          if (state) {
            this.$message.success('删除成功')
            this.reload()
          }
        } catch (error) {
          this.$message.error(error || '删除失败！')
        }
      })
    },
    reload() {
      this.getDetail(this.detailForm.id)
    },
    getDictionaryByCode,
    dictionaryEscape,
    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
    },
    handleUpdataHandles() {
      console.log('更新流程记录')
      this.getDetail(this.detailForm.id)
    },
    // 添加处置环节
    handleAddDisposal() {
      this.disposalProcess = true
    },
    clickEdit() {
      this.pageType = this.pageType === 'edit' ? 'detail' : 'edit'
      if (this.pageType !== 'edit') {
        this.$nextTick(() => {
          this.$refs.basicsContent.getDetail(this.detailForm)
        })
      }
    },
    async clickSave() {
      let data = this.$refs.basicsContent.sendBaseData()
      if (data.fieldNum) {
        this.$message.warning(
          `有${data.fieldNum}个字段未通过校验，请正确填写表单内容。`
        )
      } else {
        const query = {...data}
        delete query.handles
        delete query.compensationInfo
        delete query.trafficCongestions
        delete query.trafficControls
        query.eventType = JSON.stringify(query.eventType)
        try {
          this.editSaveLoading = true
          let {state, message, value} = await tableEdit(query)
          if (state) {
            this.$message.success(`编辑保存成功`)
            this.pageType = 'edit'
            this.detailForm = {...this.detailForm, ...data}
            this.detailForm.compensationDetails =
              this.detailForm?.compensationInfo?.compensationDetails || []
            this.detailForm.eventType = JSON.parse(data.eventType)
          }
        } finally {
          this.editSaveLoading = false
        }
      }
    },
    // 事件完结
    handleEventCompleted() {
      this.$confirm('确定事件已完结吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data = {
          eventId: this.detailForm.id,
          eventNode: 9
        }
        const {state} = await eventCompleted(data)
        if (state) {
          this.$message.success('事件完结成功！')
        }
      })
    },

    // 路段数据查询
    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.getInspectData(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: '2'}
          ]
        }),
        'addEdit'
      )
      this.teamOptions = rows
    },

    // 通过路段信息获取巡查救援队伍信息
    async getInspectData(value) {
      const {rows = []} = await teamData(
        refineRequestBody({
          querys: [
            {operation: 'IN', property: 'r.id_', value},
            {operation: 'EQUAL', property: 't.type_', value: '1'}
          ]
        }),
        'addEdit'
      )
      this.inspectOptions = 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.compensationDetails =
        this.detailForm?.compensationInfo?.compensationDetails || []
      this.detailForm.eventType = JSON.parse(this.detailForm.eventType)
      this.roadChange(this.detailForm.roadId)
      this.disableShow = false
      console.log(this.detailForm, '详情数据/////')
    },

    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.jiechuTimeMap[row.id]) {
        this.$set(this.popoverVisibleMap, row.id, false)
        row.endTime = moment(this.jiechuTimeMap[row.id]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        row.status = 2
        const {state, value, message} = await deregulation(row)
        if (state) {
          this.$message.success('解除管制成功')
          this.reload()
        } 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('解除管制成功！')
      //       this.reload()
      //     }
      //   })
      // })
    }
  },
  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;
              .el-link {
                display: initial !important;
              }
            }
          }
        }
      }
    }
  }
}

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

.add-btn-fixed {
  position: fixed;
  bottom: 160px;
  right: 40px;
  z-index: 999;
}

.margin-row {
  margin-top: 20px;
}

.release-cancel {
  padding-right: 14px;
  border-right: 1px solid $--system-border-color2;
}

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

.release-btn {
  text-align: right;
  margin-top: 10px;
}

.btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
