<template>
  <div class="wrap">
    <div class="alarm_info">
      <div class="alarm_title">
        <div class="title_left">
          <span class="car_title">{{info.alarmTypeString}}</span>
          <img class="alarm_level" v-if="info.level == 1" src="@/assets/alarm_one.png" alt="">
          <img class="alarm_level" v-if="info.level == 2" src="@/assets/alarm_two.png" alt="">
          <img class="alarm_level" v-if="info.level == 3" src="@/assets/alarm_three.png" alt="">
        </div>
        <div class="status">{{info.handStatusString}}</div>
      </div>
      <div class="content_list">
        <div class="alarm_content">
          <div class="label">报警时间:</div>
          <div class="content">{{info.startTime}}</div>
        </div>
        <div class="alarm_content">
          <div class="label">报警详情:</div>
          <div class="content">{{info.alarmRemark}}</div>
        </div>
        <div class="alarm_content">
          <div class="label">报警照片:</div>
          <div class="content">
            <img class="photo" v-if="info.url" :src="info.url" alt="">
          </div>
        </div>
        <div class="alarm_content">
          <div class="label">报警通道:</div>
          <div class="content content_flex">
            <span>{{ info.plateNumber + '_' + (info?.channel || '') }} <!--浙A7H1M2_1--></span>
            <span class="btn" @click="goAlarmMonitoring">查看监控</span>
          </div>
        </div>
      </div>
    </div>
    <div class="alarm_info car_info">
      <div class="car_title title">
        车辆位置
      </div>
      <div class="car_map">
        <div class="map_title">
          <span class="driver_name">{{info.vehicleName}} / {{info.plateNumber}}</span>
          <span class="driver_name">司机：{{info.onlineDriverName}} <a :href="'tel:' + info.onlinePhone">{{info.onlinePhone}}</a></span>
        </div>
        <div class="map_cover" id="container"></div>
      </div>
    </div>
    <div class="deal_btn" v-if="[0, 3].includes(info.handStatus)" @click="dealWithShow = true">处理</div>
    <van-popup v-model="dealWithShow" v-if="dealWithShow" round position="center">
      <div class="dialog_wrap">
        <div class="dialog_title">报警处理</div>
        <div>
          <van-radio-group v-model="radio" @change="change" class="horizontal-radio-group">
            <van-radio v-for="item in radioList" :key="item.value" :name="item.value" :disabled="item.disabled" class="item">
              <span :style="{ color: radio === item.value ? '#393230' : 'rgba(0, 0, 0, 0.5)' }">
                {{ item.name }}
              </span>
              <img
                slot="icon"
                class="icon"
                slot-scope="props"
                :src="props.checked ? activeIcon : inactiveIcon"
              >
            </van-radio>
          </van-radio-group>
          <div class="alarm_tip" v-if="['1', '2', '3'].includes(String(info.alarmType))">
            注：开始处理后将流转至技术支持进行处理。
          </div>
          <div class="alarm_text" v-if="radio == 5">
            <textarea class="alarm_textarea" id="text-input" rows="6" placeholder="处理结果：" v-model.trim="remark"></textarea>
          </div>
          <div class="btn_wrap">
            <div class="btn_confirm" @click="noMultipleClicks(operatorHandle)">确认</div>
            <div class="btn_close" @click="dealWithShow = false">关闭</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {myMixins} from "@/utils/myMixins"
  import { getAlarmByCode, dealWithAlarm } from "@/api/order"
  import trailerPosition from "@/assets/alarm_trailer.png";
  import repairPosition from "@/assets/alarm_repair.png";
  export default {
    name: "vehicleAlarmDetail",
    mixins: [ myMixins ],
    data() {
      return {
        noClick: true,
        map: null,
        lng: 121.553376,
        lat: 31.247998,
        radio: '',
        activeIcon: require('@/assets/alarm_check.png'),
        inactiveIcon: require('@/assets/alarm_unCheck.png'),
        dealWithShow: false,
        radioList: [{ name: '开始处理', value: 3, disabled: false }, { name: '处理完成', value: 5, disabled: false }],
        remark: '',
        code: '',
        info: {}
      }
    },
    mounted() {
      this.code = this.$route.query.code;
      this.getAlarmDetail();
      this.initMap();
    },
    methods: {
      // 新增方法：重置弹窗状态
      resetPopupState() {
        this.radio = '';
        this.remark = '';
        // 重置radioList状态
        this.radioList = [
          { name: '开始处理', value: 3, disabled: false },
          { name: '处理完成', value: 5, disabled: false }
        ];
      },
      goAlarmMonitoring() {
        let data = {
          "action":"goMonitoring",
          "params": {
            "code": this.code
          }
        };
        let u = navigator.userAgent;
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if(isiOS){
          window.webkit.messageHandlers.nativeObject.postMessage(data);
        }else {
          window.android.sendMessage("code=" + this.code);
        }
      },
      async operatorHandle() {
        try {
          await dealWithAlarm({
            alarmId: this.info.id,
            handleStatus: this.radio,
            remark: this.remark
          })
          this.$toast('操作成功')
          this.resetPopupState();
        } finally {
           this.dealWithShow = false;
           await this.getAlarmDetail();
        }
      },
      change(e) {
        this.radio = e
      },
      async getAlarmDetail() {
        let res = await getAlarmByCode({
          code: this.code
        });
        if(!res.data) {
          this.$router.push({
            name: 'vehicleAlarmList',
            params: {
              token: localStorage.getItem('token')
            },
            replace: true  // 关键：替换当前路由，而不是新增历史记录
          });
          return
        }
        this.info = res?.data;
        // 每次获取详情时重置radioList
        this.radioList = [
          { name: '开始处理', value: 3, disabled: false },
          { name: '处理完成', value: 5, disabled: false }
        ];
        if( this.info.handStatus == 0 && ['1', '2', '3'].includes(String(this.info.alarmType))) {    // 未处理，且需要技术处理
          this.radio =  this.radioList[0].value
          this.radioList[1].disabled = true
        }
        if(this.info.handStatus == 3) {
          this.radioList[0].disabled = true
        }
      },
      initMap() {
        this.map = new AMap.Map('container',{
          zoom:14,//级别(缩放比例 3-20 )
          center: [this.lng, this.lat],//中心点坐标
          viewMode:'2D',//使用3D视图
        })
        this.map.on('complete', () => {
          this.mapMarkers();
        });
      },
      mapMarkers() {
        let url = String(this.info.vehicleType) == '5' ? repairPosition : trailerPosition
        let marker = new AMap.Marker({
          position: [this.lng, this.lat],
          icon: new AMap.Icon({
            image: url, // 图片的相对路径
            size: new AMap.Size(42, 50),  // 图标的尺寸
            imageSize: new AMap.Size(42, 50)  // 图片的实际尺寸
          }),
        });
        this.map.add(marker);
      }
    }
  }
</script>
<style scoped lang="scss">
  .wrap {
    width: 100%;
    height: 100%;
    background-color: #F4F5F7 !important;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .alarm_info {
    padding-top: 12px;
    padding-bottom: 16px;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(39,52,125,0.05);
    border-radius: 6px;
    backdrop-filter: blur(5.602678571428572px);
    margin-top: 10px;
    .alarm_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(233, 233, 234, 0.6);
      padding: 3px 20px 10px 18px;
      .title_left {
        display: flex;
        align-items: center;
        .alarm_level {
          width: 32px;
          height: 14px;
          margin-left: 7px;
        }
      }
      .status {
        font-size: 11px;
        color: #FA8D14;
        font-weight: bold;
      }
    }
    .content_list {
      padding: 12px 18px 0px;
    }
    .alarm_content {
      display: flex;
      margin-bottom: 6px;
      .content {
        margin-left: 10px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.75);
        flex: 1;
        .btn {
          /*display: inline-block;*/
          padding: 5px 12px;
          background: #FA8236;
          border-radius: 3px;
          color: #fff;
          font-size: 12px;
        }
        .photo {
          width: 75px;
          height: 55px;
          margin-right: 6px;
          margin-bottom: 6px;
        }
      }
    }
  }

  .label {
    color: rgba(0, 0, 0, 0.5);
  }
  .content_flex {
    display: flex;
    justify-content: space-between;
  }
  .car_title {
    font-size: 14px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
  .title {
    padding-left: 18px;
    margin-bottom: 8px;
  }
  .car_info {
    padding: 12px 4px 5px 4px;
  }
  .car_map {
    width: 100%;
    /*height: 204px;*/
    border-radius: 4px;
    border: 1px solid #F0F0F0;
    background-color: #F9FCFF;
    box-sizing: border-box;
    .map_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 8px 10px 15px;
      .driver_name {
        font-size: 12px;
        color: #000000;
        a {
          color: #377BE6;
        }
      }
    }
    .map_cover {
      width: 100%;
      height: 174px;
      background-color: #fff;
    }
  }
  .deal_btn {
    width: calc(100% - 38px);
    height: 48px;
    text-align: center;
    line-height: 48px;
    position: fixed;
    bottom: 10px;
    left: 19px;
    font-size: 15px;
    color: #fff;
    background: #354D93;
    border-radius: 5px;
  }
  .dialog_wrap {
    width: 325px;
    border-radius: 13px;
    .dialog_title {
      height: 68px;
      line-height: 82px;
      background: linear-gradient( 180deg, #FFE8DA 0%, rgba(255,233,233,0) 100%);
      font-size: 18px;
      color: #E0481E;
      text-align: center;
      font-weight: bold;
    }
    .horizontal-radio-group {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-bottom: 15px;
      .icon {
        width: 16px;
        height: 16px;
      }
      .item {
        font-size: 14px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
      }
    }
    .alarm_tip {
      font-size: 14px;
      color: #FF5D3B;
      margin: 10px 0 20px;
      text-align: center;
    }
    .alarm_text {
      width: 100%;
      padding: 0 25px 15px;
      box-sizing: border-box;
      .alarm_textarea {
        width: 100%;
        background: #FFFBFB;
        border-radius: 3px;
        border: 1px solid #F97C64;
        backdrop-filter: blur(10px);
        padding: 10px;
        color: #FF5D3B;
        box-sizing: border-box;
      }
      .alarm_textarea::placeholder {
        color: rgba(255, 93, 59, 0.8);
      }
    }
    .btn_wrap {
      .btn_confirm {
        width: 173px;
        height: 42px;
        line-height: 42px;
        color: #FFFFFF;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
        background: #F16363;
        border-radius: 23px;
        margin: 0 auto;
      }
      .btn_close {
        margin-top: 12px;
        margin-bottom: 22px;
        font-size: 14px;
        color: rgba(44, 65, 85, 0.6);
        text-align: center;
      }
    }
  }
  ::v-deep .van-radio__icon {
    display: flex;
    align-items: center;
  }
  ::v-deep .van-radio__label--disabled {
    opacity: 0.5;
  }
</style>
