<template>
  <div class="edit-add-detail">
    <div class="edit-add-detail-new-content">
      <div
        v-loading="false"
        class="form-content"
        element-loading-background="rgba(10 ,38 ,61, 0.95)"
        element-loading-text="数据加载中..."
      >
        <el-form
          ref="addEditForm"
          :model="addEditForm"
          :rules="addEditRules"
          label-position="right"
          label-suffix="："
          label-width="140px"
        >
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">路损信息</div>
              <el-popover
                v-model="isShowPopover"
                placement="bottom-start"
                popper-class="import-popover"
                trigger="hover"
              >
                <div class="popover-container">
                  <div class="popover-container-title">
                    <div class="popover-container-title-left">
                      <i class="el-icon-warning" /> 提示：
                    </div>
                    <!--                    <div-->
                    <!--                      class="popover-container-title-right"-->
                    <!--                      @click="isShowPopover = false"-->
                    <!--                    >-->
                    <!--                      <i class="el-icon-close" />-->
                    <!--                    </div>-->
                  </div>
                  <div class="popover-container-content">
                    请选择根据事件/救援进行数据同步
                  </div>
                  <div class="popover-container-btn">
                    <el-button
                      icon="el-icon-refresh"
                      plain
                      size="small"
                      type="primary"
                      @click="showDialog('reventSynchroniza')"
                    >事件同步
                    </el-button
                    >
                    <el-button
                      icon="el-icon-refresh"
                      plain
                      size="small"
                      type="primary"
                      @click="showDialog('rescueSynchroniza')"
                    >救援同步
                    </el-button
                    >
                  </div>
                </div>
                <template v-slot:reference>
                  <div class="btn-action">
                    <el-button
                      class="btn btn-plus"
                      icon="el-icon-refresh"
                      size="small"
                      style="margin: 0 10px"
                      type="success"
                    >
                      同步
                    </el-button>
                  </div>
                </template>
              </el-popover>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="事件标题" prop="eventName">
                <el-input
                  v-model="addEditForm.eventName"
                  :autosize="{minRows: 2, maxRows: 4}"
                  placeholder="事件标题"
                  type="textarea"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="报案电话" prop="eventTel">
                <el-input
                  v-model="addEditForm.eventTel"
                  clearable
                  placeholder="报案电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件发生时间" prop="eventTime">
                <el-date-picker
                  v-model="addEditForm.eventTime"
                  default-time="12:00:00"
                  placeholder="选择日期时间"
                  style="width: 100%"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件来源" prop="eventSrc">
                <el-select
                  v-model="addEditForm.eventSrc"
                  clearable
                  placeholder="事件来源"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in getDictionaryByCode('sjly')"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="所属路段" prop="roadId">
                <el-select
                  v-model="addEditForm.roadId"
                  clearable
                  filterable
                  placeholder="请选择所属路段"
                  style="width: 100%"
                  @change="roadChange"
                >
                  <el-option
                    v-for="item in roadOptions"
                    :key="item.id"
                    :label="item.roadName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <!--                <el-input-->
                <!--                  v-model="addEditForm.road.roadName"-->
                <!--                  class="el-click-input"-->
                <!--                  clearable-->
                <!--                  placeholder="点击选所在路段"-->
                <!--                  readonly-->
                <!--                  suffix-icon="el-icon-search"-->
                <!--                  @click.native="showDialog('roadChoice')"-->
                <!--                >-->
                <!--                  <template v-if="addEditForm.road.roadCode" v-slot:prepend>-->
                <!--                    {{ addEditForm.road.roadCode }}-->
                <!--                  </template>-->
                <!--                </el-input>-->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始巡查站" prop="startPatrolId">
                <el-select
                  v-model="addEditForm.startPatrolId"
                  filterable
                  placeholder="请选择开始开始巡查站"
                  style="width: 100%"
                  @change="siteChange($event, 'startPatrol')"
                >
                  <el-option
                    v-for="item in alongRouteInfoData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!--              <el-form-item label="开始巡查站" prop="startPatrolName">-->
              <!--                <el-input-->
              <!--                  v-model="addEditForm.startPatrolName"-->
              <!--                  clearable-->
              <!--                  placeholder="开始巡查站"-->
              <!--                ></el-input>-->
              <!--              </el-form-item>-->
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束巡查站" prop="endPatrolId">
                <el-select
                  v-model="addEditForm.endPatrolId"
                  filterable
                  placeholder="请选择结束巡查站"
                  style="width: 100%"
                  @change="siteChange($event, 'endPatrol')"
                >
                  <el-option
                    v-for="item in alongRouteInfoData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!--              <el-form-item label="结束巡查站" prop="endPatrolName">-->
              <!--                <el-input-->
              <!--                  v-model="addEditForm.endPatrolName"-->
              <!--                  clearable-->
              <!--                  placeholder="结束巡查站"-->
              <!--                ></el-input>-->
              <!--              </el-form-item>-->
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="路段桩号范围">
              <span style="
                  margin-right: 20px;
                  color: #fff;
                  font-size: 14px;
                  font-weight: 100;
                ">{{ pileNumberRange }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="stake-mark" label="开始点位桩号全值">
                <div class="pegSVal-text1">K</div>
                <el-input
                  v-model="addEditForm.startPeg"
                  clearable
                  oninput="value=value.replace(/[^0-9]/g,'')"
                  type="number"
                ></el-input>
                <div class="pegSVal-text2">+</div>
                <el-input
                  v-model="addEditForm.startPegAdd"
                  clearable
                  oninput="value=value.replace(/[^0-9]/g,'')"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="stake-mark" label="结束点位桩号全值">
                <!--                <div v-if="isDisabled">{{ addEditForm.pegEVal || '-' }}</div>-->
                <div class="pegSVal-text1">K</div>
                <el-input
                  v-model="addEditForm.endPeg"
                  clearable
                  oninput="value=value.replace(/[^0-9]/g,'')"
                  type="number"
                ></el-input>
                <div class="pegSVal-text2">+</div>
                <el-input
                  v-model="addEditForm.endPegAdd"
                  clearable
                  oninput="value=value.replace(/[^0-9]/g,'')"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="行驶方向" prop="direction">
                <el-radio-group v-model="addEditForm.direction" size="mini">
                  <el-radio
                    v-for="(item, index) in getDictionaryByCode('xsfx')"
                    :key="index"
                    :label="item.value"
                    :value="item.value"
                    border
                  >{{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="事件等级" prop="eventLevel">
                <el-radio-group v-model="addEditForm.eventLevel" size="mini">
                  <el-radio
                    v-for="(item, index) in eventGradeOptions"
                    :key="index"
                    :label="item.value"
                    :value="item.value"
                  >{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="关联事件" prop="eventId">
                <!--                <div v-if="isDisabled">{{ addEditForm.event.eventNo ? 'NO.' + addEditForm.event.eventNo : '-' }}</div>-->
                <el-input
                  v-model="addEditForm.event.eventNo"
                  class="el-click-input"
                  clearable
                  placeholder="点击选择关联事件"
                  readonly
                  suffix-icon="el-icon-search"
                  @click.native="showDialog('eventChoice')"
                >
                  <template v-if="addEditForm.event.eventNo" v-slot:prepend>
                    NO.
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件类型" prop="eventType">
                <!--                <div v-if="isDisabled">{{ dictionaryEscape('sjlx', addEditForm.eventType || '-') }}</div>-->
                <el-select
                  v-model="addEditForm.eventType"
                  clearable
                  placeholder="事件类型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in getDictionaryByCode('lx_sjlxxq')"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="肇事车辆/故障车辆" prop="causeCar">
                <!--                <div v-if="isDisabled">{{ addEditForm.causeCar || '-' }}</div>-->
                <el-input
                  v-model="addEditForm.causeCar"
                  clearable
                  placeholder="肇事车辆/故障车辆"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--          <el-row :gutter="24">-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="所属执法支队及大队" prop="trafficTeam">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.trafficTeam"-->
          <!--                  clearable-->
          <!--                  placeholder="所属执法支队及大队"-->
          <!--                ></el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="处置队伍" prop="teamId">-->
          <!--                <el-cascader-->
          <!--                  ref="teamIdCascader"-->
          <!--                  v-model="addEditForm.teamId"-->
          <!--                  :options="teamTreeData"-->
          <!--                  :props="{-->
          <!--                    emitPath: false,-->
          <!--                    checkStrictly: true,-->
          <!--                    label: 'name',-->
          <!--                    value: 'id'-->
          <!--                  }"-->
          <!--                  :show-all-levels="false"-->
          <!--                  clearable-->
          <!--                  filterable-->
          <!--                  style="width: 100%"-->
          <!--                  @change="teamIdChange"-->
          <!--                ></el-cascader>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="处置人员" prop="userName">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.user.userName"-->
          <!--                  class="el-click-input"-->
          <!--                  clearable-->
          <!--                  placeholder="点击选择处置人员"-->
          <!--                  readonly-->
          <!--                  suffix-icon="el-icon-search"-->
          <!--                  @click.native="showDialog('userChoice')"-->
          <!--                >-->
          <!--                </el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <!--          <el-row :gutter="24">-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="处置时间" prop="handleTime">-->
          <!--                <el-date-picker-->
          <!--                  v-model="addEditForm.handleTime"-->
          <!--                  default-time="12:00:00"-->
          <!--                  placeholder="选择日期时间"-->
          <!--                  style="width: 100%"-->
          <!--                  type="datetime"-->
          <!--                  value-format="yyyy-MM-dd HH:mm:ss"-->
          <!--                >-->
          <!--                </el-date-picker>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="路产损失" prop="loss">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.loss"-->
          <!--                  class="number-input"-->
          <!--                  placeholder="请输入内容"-->
          <!--                  type="number"-->
          <!--                >-->
          <!--                </el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="滞留人员" prop="holdupUserNum">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.holdupUserNum"-->
          <!--                  clearable-->
          <!--                  placeholder="滞留人员数量"-->
          <!--                  type="number"-->
          <!--                ></el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <!--          <el-row :gutter="24">-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="受伤人员" prop="hurtUserNum">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.hurtUserNum"-->
          <!--                  clearable-->
          <!--                  placeholder="受伤人员数量"-->
          <!--                  type="number"-->
          <!--                ></el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="死亡人员" prop="deadUserNum">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.deadUserNum"-->
          <!--                  clearable-->
          <!--                  placeholder="死亡人员数量"-->
          <!--                  type="number"-->
          <!--                ></el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="滞留车辆" prop="holdupCarNum">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.holdupCarNum"-->
          <!--                  clearable-->
          <!--                  placeholder="滞留车辆"-->
          <!--                  type="number"-->
          <!--                ></el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <!--          <el-row :gutter="24">-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="损坏车辆" prop="brokenCarNum">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.brokenCarNum"-->
          <!--                  clearable-->
          <!--                  placeholder="损坏车辆"-->
          <!--                  type="number"-->
          <!--                ></el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="拥堵里程" prop="blockLength">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.blockLength"-->
          <!--                  clearable-->
          <!--                  placeholder="拥堵里程"-->
          <!--                  type="number"-->
          <!--                >-->
          <!--                  <template slot="append">KM</template>-->
          <!--                </el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="肇事方" prop="cause">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.cause"-->
          <!--                  clearable-->
          <!--                  placeholder="肇事方"-->
          <!--                ></el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="肇事车辆" prop="causeCar">-->
          <!--                <el-input-->
          <!--                  v-model="addEditForm.causeCar"-->
          <!--                  clearable-->
          <!--                  placeholder="肇事车辆"-->
          <!--                ></el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="备注" prop="memo">
                <!--                <div v-if="isDisabled">{{ addEditForm.memo || '-' }}</div>-->
                <el-input
                  v-model="addEditForm.memo"
                  :autosize="{minRows: 4, maxRows: 6}"
                  placeholder="请输入"
                  type="textarea"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <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="addEditForm.compensationDetailsSingle"
            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="160"
            >
              <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="160">
            </el-table-column>
            <el-table-column align="center" label="数量" prop="num" width="160">
            </el-table-column>
            <el-table-column
              align="center"
              label="赔偿标准"
              prop="price"
              width="160"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="小计(元)"
              prop="totle"
              width="160"
            >
            </el-table-column>
            <el-table-column align="center" width="180">
              <template #header>
                <el-button
                  class="btn btn-plus"
                  icon="el-icon-plus"
                  size="small"
                  type="primary"
                  @click="showDialog('detailedList', '1')"
                >
                  新增
                </el-button>
              </template>
              <template v-slot="{row, $index}">
                <el-link
                  :underline="false"
                  type="primary"
                  @click="clickEdit(row, $index)"
                >
                  修改
                </el-link>
                <el-link
                  :underline="false"
                  type="danger"
                  @click="clickDelete(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="addEditForm.compensationDetailsDouble"
            border
            style="width: 100%"
          >
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="60"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="金额"
              prop="totle"
            >
            </el-table-column>
            <el-table-column
              :formatter="({memo}) => memo || '-'"
              align="center"
              label="备注"
              prop="memo"
            >
            </el-table-column>
            <el-table-column align="center" width="180">
              <template #header>
                <el-button
                  class="btn btn-plus"
                  icon="el-icon-plus"
                  size="small"
                  type="primary"
                  @click="showDialog('detailedList', '2')"
                >
                  新增
                </el-button>
              </template>
              <template v-slot="{row, $index}">
                <el-link
                  :underline="false"
                  type="primary"
                  @click="clickEdit(row, $index)"
                >
                  修改
                </el-link>
                <el-link
                  :underline="false"
                  type="danger"
                  @click="clickDelete(row, $index)"
                >
                  删除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="footer">
      <el-button :loading="saveLoading" type="primary" @click="handleSave">
        {{ $t('domestic.save') }}
      </el-button>
      <el-button @click="changePage('TablePage')">
        {{ $t('domestic.cancel') }}
      </el-button>
    </div>
    <!-- 人员选择 -->
    <!--    <UserChoiceDialog-->
    <!--      :is-show.sync="userChoiceDialog"-->
    <!--      :selected-content.sync="addEditForm.user"-->
    <!--      @confirm="handleUserSelect"-->
    <!--    />-->
    <!-- 事件选择 -->
    <EventChoiceDialog
      :is-show.sync="eventChoiceDialog"
      :roadId="addEditForm.roadId"
      :selected-content.sync="addEditForm.event"
      @confirm="handleEventSelect"
    />
    <!-- 赔偿清单 -->
    <DetailedListGialog
      :fatherId="treeItem.fatherId"
      :is-show.sync="detailedListDialog"
      :itemDetail="itemDetail"
      :roadId="addEditForm.roadId"
      @sendData="sendData"
    />
    <!--  事件同步  -->
    <ReventSynchronizaDialog :is-show.sync="reventSynchronizaDialog" :treeId="addEditForm.roadId"
                             @confirm="handleSelect" />
    <!--  救援同步  -->
    <RescueSynchronizaDialog :is-show.sync="rescueSynchronizaDialog" :treeId="addEditForm.roadId"
                             @confirm="handleSelect" />
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
import {
  listDeletion,
  roadData,
  tableAdd,
  tableDetail,
  tableEdit
} from '@/api/patrolAndRescue/roadDamageComp/roadDamageRegister'
import {tableData as alongRouteInfoInter} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/alongRouteInfo'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import EventChoiceDialog from './components/EventChoiceDialog'
import DetailedListGialog from './components/DetailedListGialog'
import ReventSynchronizaDialog from './components/ReventSynchronizaDialog/index.vue'
import RescueSynchronizaDialog from './components/RescueSynchronizaDialog/index.vue'
import {refineRequestBody} from '@/utils/requestWrappers'


export default {
  name: 'EditAddPage',
  components: {
    ReventSynchronizaDialog,
    RescueSynchronizaDialog,
    EventChoiceDialog,
    DetailedListGialog
  },
  props: {
    componentName: {
      default: 'EditAddPage',
      type: String
    }
  },
  data() {
    return {
      id: '',
      formLoading: true,
      isShowPopover: false,
      treeItem: {},
      roadOptions: [],
      alongRouteInfoData: [],
      pileNumberRange: '',

      addEditForm: {
        direction: '1',
        eventLevel: 0,
        event: {},
        compensationDetailsSingle: [],
        compensationDetailsDouble: []
      },
      addEditRules: {
        eventName: [
          {
            required: true,
            message: '事件标题不能为空',
            trigger: ['change', 'blur']
          }
        ],
        eventTime: [
          {
            required: true,
            message: '报案时间不能为空',
            trigger: ['change', 'blur']
          }
        ],
        roadId: [
          {
            required: true,
            message: '路段信息不能为空',
            trigger: ['change']
          }
        ]
        // eventType: [
        //   {
        //     required: true,
        //     message: '请选择事件类型',
        //     trigger: ['change']
        //   }
        // ],
        // rescueType: [
        //   {
        //     required: true,
        //     message: '救援类型不能为空',
        //     trigger: ['change']
        //   }
        // ],
        // roadId: [
        //   {
        //     required: true,
        //     message: '路段信息不能为空',
        //     trigger: ['change']
        //   }
        // ],
        // teamId: [
        //   {
        //     required: true,
        //     message: '派遣队伍不能为空',
        //     trigger: ['change']
        //   }
        // ],
        // eventTime: [
        //   {
        //     required: true,
        //     message: '事件发生时间不能为空',
        //     trigger: ['change']
        //   }
        // ]
      },
      saveLoading: false, // 上传loading
      rescueSynchronizaDialog: false,
      reventSynchronizaDialog: false,
      eventChoiceDialog: false,
      detailedListDialog: false,
      routerData: [], // 路线数据
      pubSub: null,
      teamTreeData: [], // 救援队伍组织树
      eventGradeOptions: [
        //事件等级
        {label: '无等级', value: 0},
        {label: '1级', value: 1},
        {label: '2级', value: 2},
        {label: '3级', value: 3},
        {label: '4级', value: 4}
      ],
      tableData: [],
      itemDetail: {},
      itemIndex: '',
      openTYpe: 'add',
      isDisabled: true
    }
  },
  watch: {
    componentName: {
      handler(newVal) {
        if (newVal === this.$options.name) {
          this.openPage()
        } else {
          this.closePage()
        }
      }
    }
  },
  mounted() {
    this.pubSub = PubSub.subscribe('EditAddPage', (_, data) => {
      console.log(data)
      this.getRoadOptions()
      // 路段默认值
      if (data.treeItem) {
        this.treeItem = data.treeItem
      }
      if (data.id) {
        this.id = data.id
        this.treeItem.fatherId = data.fatherId
      }
    })
  },
  methods: {
    dictionaryEscape,
    getDictionaryByCode,
    // 事件回显 救援回显
    handleSelect(data) {
      this.addEditForm = {...this.addEditForm, ...data}
      if (data.pegSVal) {
        let startPegArr = data.pegSVal.split('+')
        this.$set(this.addEditForm, 'startPeg', startPegArr[0].slice(1))
        this.$set(this.addEditForm, 'startPegAdd', startPegArr[1])
      }
      if (data.pegEVal) {
        let startPegArr = data.pegEVal.split('+')
        this.$set(this.addEditForm, 'endPeg', startPegArr[0].slice(1))
        this.$set(this.addEditForm, 'endPegAdd', startPegArr[1])
      }
      this.addEditForm.id = ''
    },
    // 路段数据查询
    async getRoadOptions() {
      const {rows = []} = await roadData({pageBean: {pageSize: -1}})
      this.roadOptions = rows.map((item) => {
        item.roadName = item.name + ' ' + item.code
        return item
      })
      // 默认赋值路段
      if (!this.id) {
        this.$set(this.addEditForm, 'roadId', this.treeItem.id)
        this.$set(this.addEditForm, 'roadName', this.treeItem.name)
        this.roadChange(this.treeItem.id)
      } else {
        this.getDetail(this.id)
      }
    },
    // 路段事件
    roadChange(e) {
      let roadInfo = this.roadOptions.find(item => item.id === e)
      // console.log(roadInfo, this.roadOptions)
      this.$set(this.addEditForm, 'roadName', roadInfo.name)
      if (roadInfo.startPegK && roadInfo.endPegK) {
        this.pileNumberRange = roadInfo.startPegK + '~' + roadInfo.endPegK
      } else {
        this.pileNumberRange = ''
      }
      this.getAlongRouteInfo(e, (data) => {
        const {startPatrolId, endPatrolId} = this.addEditForm
        /*
         * 巡检开始，结束站
         * */
        if (startPatrolId) {
          if (!data.some((i) => i.id === startPatrolId)) {
            this.addEditForm.startPatrolId = ''
            setTimeout((_) => this.$message.warning('请重新选择巡检开始站..'))
          }
        }
        if (endPatrolId) {
          if (!data.some((i) => i.id === endPatrolId)) {
            this.addEditForm.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.addEditForm[`${type}Name`] = siteInfo.name
    },

    clickEdit(item, index) {
      this.detailedListDialog = true
      this.itemDetail = item
      this.itemIndex = index
      this.openTYpe = 'edit'
    },
    clickDelete(item, index) {
      this.$confirm('确定删除此条数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (item.id) {
          let {state, message} = await listDeletion(item.id)
          if (state) {
            this.$message.success('删除成功')
            if (item.propertySubjectType === '1') {
              this.addEditForm.compensationDetailsSingle.splice(index, 1)
            } else {
              this.addEditForm.compensationDetailsDouble.splice(index, 1)
            }
            // this.addEditForm.compensationDetails.splice(index, 1)
          }
        } else {
          if (item.propertySubjectType === '1') {
            this.addEditForm.compensationDetailsSingle.splice(index, 1)
          } else {
            this.addEditForm.compensationDetailsDouble.splice(index, 1)
          }
          // this.addEditForm.compensationDetails.splice(index, 1)
        }
      })
    },
    sendData(data) {
      if (this.openTYpe === 'edit') {
        if (data.propertySubjectType === '1') {
          this.addEditForm.compensationDetailsSingle[this.itemIndex] = data
        } else {
          this.addEditForm.compensationDetailsDouble[this.itemIndex] = data
        }
      } else {
        if (data.propertySubjectType === '1') {
          if (this.addEditForm.compensationDetailsSingle.length > 0) {
            this.addEditForm.compensationDetailsSingle.push(data)
          } else {
            this.$set(this.addEditForm, 'compensationDetailsSingle', [data])
          }
        } else {
          if (this.addEditForm.compensationDetailsDouble.length > 0) {
            this.addEditForm.compensationDetailsDouble.push(data)
          } else {
            this.$set(this.addEditForm, 'compensationDetailsDouble', [data])
          }
        }
      }
    },
    // 打开页面执行
    openPage() {
    },
    // 展示弹层
    showDialog(dialogName, type) {
      this.openTYpe = 'add'
      if (!dialogName) return
      this[dialogName + 'Dialog'] = true
      this.itemDetail = {}
      if (type) {
        this.itemDetail.propertySubjectType = type
      }
    },

    // 关闭页面执行
    closePage() {
      const {pubSub, addEditRules} = this
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {
        pubSub,
        addEditRules
      })
      this.$nextTick(_ => {
        this.$refs.addEditForm.$el.scrollTop = 0
        this.$refs.addEditForm.clearValidate()
      })
    },
    handleEventSelect(event) {
      this.$set(this.addEditForm, 'eventId', event.eventId)
    },
    // 获取详情
    async getDetail(id) {
      try {
        this.addEditForm = await tableDetail(id)
        const {
          eventId = '',
          eventNo = '',
          pegSVal = '',
          pegEVal = ''
        } = this.addEditForm
        this.addEditForm.event = {
          eventId,
          eventNo
        }
        if (pegSVal) {
          let startPegArr = pegSVal.split('+')
          this.$set(this.addEditForm, 'startPeg', startPegArr[0].slice(1))
          this.$set(this.addEditForm, 'startPegAdd', startPegArr[1])
        }
        if (pegEVal) {
          let startPegArr = pegEVal.split('+')
          this.$set(this.addEditForm, 'endPeg', startPegArr[0].slice(1))
          this.$set(this.addEditForm, 'endPegAdd', startPegArr[1])
        }
        if (!this.addEditForm.compensationDetails) {
          this.addEditForm.compensationDetailsSingle = []
          this.addEditForm.compensationDetailsDouble = []
        } else {
          this.addEditForm.compensationDetailsSingle = this.addEditForm.compensationDetails.filter(item => item.propertySubjectType === '1')
          this.addEditForm.compensationDetailsDouble = this.addEditForm.compensationDetails.filter(item => item.propertySubjectType === '2')
        }
        this.roadChange(this.addEditForm.roadId)
      } finally {
        this.formLoading = false
      }
    },

    // 保存
    handleSave() {
      console.log(this.addEditForm, '00000000000')
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          let data = JSON.parse(JSON.stringify(this.addEditForm))
          if ((data.startPeg !== '' && data.startPeg !== undefined) && (data.startPegAdd !== '' && data.startPegAdd !== undefined)) {
            data.pegSVal = 'k' + (data.startPeg !== '' ? data.startPeg : '') + '+' + (data.startPegAdd !== '' ? data.startPegAdd : '')
          }
          if ((data.endPeg !== '' && data.endPeg !== undefined) && (data.endPegAdd !== '' && data.endPegAdd !== undefined)) {
            data.pegEVal = 'k' + (data.endPeg !== '' ? data.endPeg : '') + '+' + (data.endPegAdd !== '' ? data.endPegAdd : '')
          }
          data.compensationDetails = [...data.compensationDetailsSingle, ...data.compensationDetailsDouble]
          const myInterFace = this.id ? tableEdit : tableAdd
          try {
            let {state, message, value} = await myInterFace({
              ...data,
              ...data.event
            })
            if (state) {
              message = this.id ? '编辑' : '新增'
              this.$message.success(`保存成功`)
              this.changePage('TablePage', this.id ? 'edit' : 'add')
            }
          } finally {
            this.saveLoading = false
          }
        }
      })
    },

    // 改变页面
    changePage(pageName = '', type = '') {
      if (!pageName) return
      this.$emit('changePage', pageName, _ => {
        PubSub.publish(pageName, {type})
      })
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables';

.number-input {
  ::v-deep .el-input__inner {
    font-size: 14px;
  }
}

.rows-title {
  position: relative;
  width: 500px;

  .btn-action {
    position: absolute;
    top: 50%;
    left: 90px;
    transform: translateY(-50%);
  }
}

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

  .form-content {
    flex: 2;
  }

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

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

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

  ::v-deep.el-icon-plus {
    cursor: pointer;
    // font-size: 18px !important;
    font-weight: bolder;
    // color: #43a1ff;
    // margin-right: 5px;
  }

  ::v-deep.el-icon-delete {
    cursor: pointer;
    font-size: 18px !important;
    font-weight: bolder;
    color: #f56c6c;
  }
}
</style>

<style lang="scss"></style>
