<template>
  <div
    ref="targetSection"
    class="edit-add-detail-new-content"
    data-name="basics"
  >
    <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>
                <div class="popover-container-content">
                  请选择进行数据同步
                </div>
                <div class="popover-container-btn">
                  <el-button
                    icon="el-icon-refresh"
                    plain
                    size="small"
                    type="primary"
                    @click="reventChange"
                    >救援同步
                  </el-button>
                  <el-button
                    icon="el-icon-refresh"
                    plain
                    size="small"
                    type="primary"
                    @click="synchronousData"
                    >同步数据至交通管制
                  </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 class="btn-action">-->
            <!--              <el-button-->
            <!--                icon="el-icon-refresh"-->
            <!--                size="mini"-->
            <!--                type="success"-->
            <!--                @click="synchronousData"-->
            <!--              >同步数据至交通管制-->
            <!--              </el-button-->
            <!--              >-->
            <!--            </div>-->
          </div>
        </div>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="事件标题" prop="eventName">
              <el-input
                v-model="addEditForm.eventName"
                :autosize="{minRows: 2, maxRows: 4}"
                maxlength="200"
                placeholder="请输入事件标题"
                show-word-limit
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件来源">
              <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-col :span="6">
            <el-form-item label="确认情况" prop="eventSituation">
              <el-select
                v-model="addEditForm.eventSituation"
                clearable
                placeholder="请选择确认情况"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getDictionaryByCode('qrqk')"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <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"
                @change="eventTimeChange"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件类型" prop="lwEventType">
              <el-cascader
                ref="cascader"
                v-model="eventTypeValue"
                :options="sjlxOptions"
                :props="{
                  checkStrictly: true,
                  label: 'name'
                }"
                :show-all-levels="false"
                clearable
                filterable
                popper-class="twoStage"
                style="width: 100%"
                @change="eventTypeChange"
              ></el-cascader>
              <!-- <el-select v-model="addEditForm.eventType" style="width: 100%" placeholder="事件类型" clearable>
                                <el-option v-for="(item, index) in getDictionaryByCode(
                                    'sjlx'
                                )" :key="index" :label="item.name" :value="item.value" />
                            </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接警时间" prop="receiveTime">
              <el-date-picker
                v-model="addEditForm.receiveTime"
                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="6">
            <el-form-item label="确认时间" prop="confirmTime">
              <el-date-picker
                v-model="addEditForm.confirmTime"
                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-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-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="报案电话" prop="eventTel">
              <el-input
                v-model="addEditForm.eventTel"
                clearable
                placeholder="报案电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="路段名称" prop="roadId">
              <el-select
                v-model="addEditForm.roadId"
                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-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="桩号范围">
              <span
                v-if="pileNumberRange"
                style="
                  margin-right: 20px;
                  color: #fff;
                  font-size: 14px;
                  font-weight: 100;
                "
                >{{ pileNumberRange }}</span
              >
              <el-radio-group
                v-model="addEditForm.eventPlace"
                size="small"
                @input="eventPlaceChange"
              >
                <el-radio
                  v-for="(item, index) in getDictionaryByCode('sjfsqy')"
                  :key="index"
                  :label="item.value"
                  border
                  >{{ item.name }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <ScopeClassify
            ref="scopeClassify"
            :info="addEditForm"
            :pileNumberRange="pileNumberRange"
            :roadId="addEditForm.roadId"
            :type="addEditForm.eventPlace"
            @change="changeScopeClassifyData"
          >
          </ScopeClassify>
        </el-row>
        <el-row v-if="whereTheRoadGoes.length > 0" :gutter="24">
          <el-col :span="8">
            <el-form-item label="道路方向" prop="direction">
              <el-radio-group
                v-model="addEditForm.direction"
                size="small"
                @change="hangleChangeDirection"
              >
                <el-radio
                  v-for="(item, index) in whereTheRoadGoes"
                  :key="index"
                  :label="item.value"
                  border
                  >{{ item.name }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="备注信息" prop="placeRemarks">
              <el-input
                v-model="addEditForm.placeRemarks"
                :autosize="{minRows: 2, maxRows: 4}"
                placeholder="请输入备注信息"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="事件等级" prop="eventLevel">
              <el-radio-group v-model="addEditForm.eventLevel" size="small">
                <el-radio
                  v-for="(item, index) in getDictionaryByCode('sjdj')"
                  :key="index"
                  :label="item.value"
                  border
                  >{{ item.name }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-row :gutter="24">-->
        <!--          <el-col :span="6">-->
        <!--            <el-form-item label="预计恢复时间">-->
        <!--              <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-row>-->
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="拥堵里程" prop="blockLength">
              <el-input
                v-model="addEditForm.blockLength"
                class="number-input"
                placeholder="请输入内容"
                type="number"
              >
                <template slot="append">KM</template>
              </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-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="hurtUserNum">
              <el-input
                v-model="addEditForm.hurtUserNum"
                clearable
                placeholder="受伤人员数量"
                type="number"
                @change="hurtUserNumChange"
              ></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"
                @change="deadUserNumChange"
              ></el-input>
            </el-form-item>
          </el-col>
          <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-row>
        <el-row :gutter="24">
          <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-col :span="8">
            <el-form-item label="路产损失" prop="loss">
              <el-input
                v-model="addEditForm.loss"
                clearable
                disabled
                placeholder="路产损失"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--  救援同步  -->
    <RescueSynchronizaDialog
      :is-show.sync="rescueSynchronizaDialog"
      :treeId="addEditForm.roadId"
      @confirm="handleSelect"
    />
  </div>
</template>
<script>
import moment from 'moment'
import {tableDetail} from '@/api/patrolAndRescue/commandDispatch/eventRegistration'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import ScopeClassify from '../ScopeClassify'
import RescueSynchronizaDialog from '../RescueSynchronizaDialog/index.vue'

export default {
  name: 'BasicsInfo',
  components: {RescueSynchronizaDialog, ScopeClassify},
  props: {
    roadOptions: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      isShowPopover: false,
      rescueSynchronizaDialog: false,
      whereTheRoadGoes: [],
      addEditForm: {
        eventType: ['2', '7'],
        roadId: '',
        eventPlace: '1',
        eventTime: new Date(),
        eventLevel: '0'
      },
      addEditRules: {
        eventName: [
          {
            required: true,
            message: '事件标题不能为空',
            trigger: 'blur'
          }
        ],
        eventSituation: [
          {
            required: true,
            message: '确认情况不能为空',
            trigger: ['change']
          }
        ],
        lwEventType: [
          {
            required: true,
            message: '事件类型不能为空',
            trigger: ['change']
          }
        ],
        eventTime: [
          {
            required: true,
            message: '事件发生时间不能为空',
            trigger: ['change']
          }
        ],
        receiveTime: [
          {
            required: true,
            message: '接警时间不能为空',
            trigger: ['change']
          }
        ],
        confirmTime: [
          {
            required: true,
            message: '确认时间不能为空',
            trigger: ['change']
          }
        ],
        // eventTel: [
        //   {
        //     required: true,
        //     message: '报案电话不能为空',
        //     trigger: ['change']
        //   }
        // ],
        roadId: [
          {
            required: true,
            message: '报案电话不能为空',
            trigger: ['change']
          }
        ],
        direction: [
          {
            required: true,
            message: '道路方向不能为空',
            trigger: ['change']
          }
        ],
        placeRemarks: [
          {
            required: true,
            message: '备注信息不能为空',
            trigger: ['change']
          }
        ],
        eventLevel: [
          {
            required: true,
            message: '事件等级不能为空',
            trigger: ['change']
          }
        ]
      },
      id: '',
      // 桩号范围
      pileNumberRange: '',
      // 事件类型
      sjlxOptions: [],
      eventTypeValue: [],
      basicInfo: {
        eventTime: new Date()
      },
      casualties: {}
    }
  },
  watch: {
    roadOptions: {
      handler(newVal, oldVal) {
        if (newVal.length) {
          this.$set(this.addEditForm, 'roadId', this.roadOptions[0].id)
          let roadInfo = this.roadOptions.find(
            item => item.id === this.roadOptions[0].id
          )
          this.basicInfo.roadName = roadInfo.code + roadInfo.name
          const basic = this.formatBasicInfo()
          this.$emit('basicInfoChange', {
            basic
          })
          this.formatBasicTitle()
          if (roadInfo.startPegK && roadInfo.endPegK) {
            this.pileNumberRange = roadInfo.startPegK + '~' + roadInfo.endPegK
          } else {
            this.pileNumberRange = ''
          }
        }
      },
      deep: true
    }
  },
  created() {
    this.eventPlaceChange('1')
    this.sjlxOptions = this.getDictionaryByCode('lx_sjlx')
    this.sjlxOptions.forEach(item => {
      if (item.lowerDic.lx_sjlxxq) {
        item.children = item.lowerDic.lx_sjlxxq
      }
    })
  },
  mounted() {},
  methods: {
    reventChange() {
      this.rescueSynchronizaDialog = true
    },
    handleSelect(data) {
      let obj = {
        rescueId: data.id,
        rescueNo: data.rescueNo,
        eventTel: data.rescueTel || '',
        eventTime: data.rescueTime || '',
        roadId: data.roadId || '',
        roadName: data.roadName || '',
        roadCode: data.roadCode || '',
        pegVal: data.pegVal || '',
        startPatrolId: data.startPatrolId || '',
        startPatrolName: data.startPatrolName || '',
        endPatrolId: data.endPatrolId || '',
        endPatrolName: data.endPatrolName || '',
        direction: data.direction || ''
      }
      this.addEditForm = {...this.addEditForm, ...obj}
      // this.addEditForm.rescueId = this.addEditForm.id
      // this.addEditForm.id = ''
      // this.addEditForm.eventTel = this.addEditForm.rescueTel
      this.$refs.scopeClassify.rescueSynchronization(this.addEditForm)
    },
    eventPlaceChange(val) {
      let data = this.getDictionaryByCode('sjfsqy')
      data.forEach(item => {
        if (item.value == val) {
          this.whereTheRoadGoes = item.lowerDic ? item.lowerDic['jtgz-fx'] : []
        }
      })
    },
    // 地点变化
    changeScopeClassifyData(data) {
      console.log(data, '888888')
      this.basicInfo.place = data
      const basic = this.formatBasicInfo()
      this.$emit('basicInfoChange', {
        basic
      })
      this.formatBasicTitle()
    },
    deadUserNumChange() {
      this.casualties.deadUserNum = this.addEditForm.deadUserNum
      const casualties = this.formatCasualtiesInfo()
      this.$emit('basicInfoChange', {
        casualties
      })
    },
    hurtUserNumChange() {
      this.casualties.hurtUserNum = this.addEditForm.hurtUserNum
      const casualties = this.formatCasualtiesInfo()
      this.$emit('basicInfoChange', {
        casualties
      })
    },
    hangleChangeDirection() {
      this.basicInfo.direction = this.addEditForm.direction
      const basic = this.formatBasicInfo()
      this.$emit('basicInfoChange', {
        basic
      })
      this.formatBasicTitle()
    },
    eventTimeChange() {
      this.basicInfo.eventTime = this.addEditForm.eventTime
      const basic = this.formatBasicInfo()
      this.$emit('basicInfoChange', {
        basic
      })
    },
    formatBasicTitle() {
      let text = ''
      const {roadName, direction, eventType, place} = this.basicInfo
      const directionText = this.dictionaryEscape('xsfx', direction)
      text += roadName ? roadName : ''
      text += directionText ? '' + directionText : ''
      text += place ? '' + place : ''
      text += eventType ? '' + eventType : ''
      this.$set(this.addEditForm, 'eventName', text)
    },
    formatBasicInfo() {
      let text = ''
      const {eventTime, roadName, direction, eventType, place} = this.basicInfo
      const time = moment(eventTime).format('YYYY年MM月DD日HH时mm分ss秒')
      const directionText = this.dictionaryEscape('xsfx', direction)
      text = time ? time + ' ' : ''
      text += roadName ? roadName : ''
      text += directionText ? '' + directionText : ''
      text += place ? '' + place : ''
      text += eventType ? '' + eventType : ''
      return text
    },
    formatCasualtiesInfo() {
      let text = ''
      const {hurtUserNum, deadUserNum} = this.casualties
      text = deadUserNum && deadUserNum > 0 ? deadUserNum + '人死亡' : ''
      text += hurtUserNum && hurtUserNum > 0 ? hurtUserNum + '人受伤' : ''
      return text
    },
    getDictionaryByCode,
    dictionaryEscape,
    synchronousData() {
      let data = JSON.parse(
        JSON.stringify(this.$refs.scopeClassify.sendData(false))
      )
      let roadInfo = this.roadOptions.find(
        item => item.id === this.addEditForm.roadId
      )
      let sendData = {
        roadId: this.addEditForm.roadId,
        eventPlace: this.addEditForm.eventPlace,
        pileNumberRange: this.pileNumberRange,
        roadName: roadInfo.name,
        roadCode: roadInfo.code
      }
      if (this.addEditForm.eventPlace > 1) {
        sendData.placeDetail = data
      } else {
        sendData = {...sendData, ...data}
      }
      this.$bus.$emit('synchronousData', sendData)
    },
    // 路段变化
    roadChange(e) {
      let roadInfo = this.roadOptions.find(item => item.id === e)
      if (roadInfo.startPegK && roadInfo.endPegK) {
        this.pileNumberRange = roadInfo.startPegK + '~' + roadInfo.endPegK
      } else {
        this.pileNumberRange = ''
      }
      this.$emit('roadChange', e)
      this.basicInfo.roadName = roadInfo.code + roadInfo.name
      const basic = this.formatBasicInfo()
      this.$emit('basicInfoChange', {
        basic
      })
      this.formatBasicTitle()
    },
    eventTypeChange() {
      let nodeItem = this.$refs.cascader.getCheckedNodes()[0]
      this.$set(this.addEditForm, 'lwEventType', nodeItem ? nodeItem.value : '')
      console.log(nodeItem)
      this.basicInfo.eventType = nodeItem.label
      const basic = this.formatBasicInfo()
      this.$emit('basicInfoChange', {
        basic,
        isAppoint: nodeItem.value === '37' || nodeItem.value === '38'
      })
      this.formatBasicTitle()
    },
    // 获取详情
    async getDetail(id) {
      try {
        this.addEditForm = await tableDetail(id)
        const {roadId = '', pegSVal = '', pegEVal = ''} = this.addEditForm
        if (pegSVal) {
          let startPegArr = pegSVal.split('+')
          this.addEditForm.startPeg = startPegArr[0].slice(1)
          this.addEditForm.startPegAdd = startPegArr[1]
        }
        if (pegEVal) {
          let endPegArr = pegEVal.split('+')
          this.addEditForm.endPeg = endPegArr[0].slice(1)
          this.addEditForm.endPegAdd = endPegArr[1]
        }
        // this.roadChange(roadId)
      } finally {
      }
    },
    // 保存
    sendBaseData() {
      let baseData = {}
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          baseData = {
            fieldNum: Object.keys(object).length
          }
        } else {
          let data = JSON.parse(JSON.stringify(this.addEditForm))
          data.eventTime = moment(data.eventTime).format('YYYY-MM-DD HH:mm:ss')
          data.receiveTime = moment(data.receiveTime).format(
            'YYYY-MM-DD HH:mm:ss'
          )
          data.confirmTime = moment(data.confirmTime).format(
            'YYYY-MM-DD HH:mm:ss'
          )
          data.recoverTime = moment(data.recoverTime).format(
            'YYYY-MM-DD HH:mm:ss'
          )
          let roadInfo = this.roadOptions.find(item => item.id === data.roadId)
          data.roadName = roadInfo.name
          data.roadCode = roadInfo.code
          data.eventType = JSON.stringify(data.eventType)
          let roadData = this.$refs.scopeClassify.sendData(false)
          if (data.eventPlace > 1) {
            data.placeDetail = JSON.stringify(roadData)
            data.lat = roadData[0]?.lat
            data.lng = roadData[0]?.lng
            baseData = data
          } else {
            baseData = {...data, ...roadData, placeDetail: '[]'}
          }
        }
      })
      return baseData
    }
  }
}
</script>

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

::v-deep .el-textarea .el-input__count {
  background: transparent;
}

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

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

.name-check-box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .name-check {
    display: flex;
    width: fit-content;
  }
}

::v-deep .el-tabs {
  overflow: hidden;

  .el-tabs__nav {
    transform: translateX(20px) !important;

    .el-tabs__item {
      letter-spacing: 1px;
      font-size: 15px;
      font-weight: 600;
    }
  }

  height: calc(100% - 93px);
  background: #114066;
  border-radius: 5px;

  .el-tabs__content {
    height: 92%;

    div#pane-first {
      height: 100%;

      .edit-add-detail-new-content {
        // overflow: hidden;
        height: 100%;
      }
    }
  }
}

.el-icon-plus {
  cursor: pointer;
  display: block;
  height: 100%;
  font-size: 16px !important;
  font-weight: 900;
  color: #43a1ff;
}

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

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

  .form-content {
    flex: 3;
  }

  .map-content {
    flex: 4;
    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;
      }
    }
  }
}
</style>
