<template>
  <el-dialog class="car-collect" v-model="state" width="445" :align-center="true" @closed="onClose">
    <div class="content">
      <div class="images">
        <el-image
          :style="{ height: '100%', width: '100%', transform: 'rotateY(180deg)' }"
          :src="IMAGE_BASE + nowCar.carImageUrl"
          fit="contain"
        >
          <template #error>
            <div class="image-error">
              <Icon icon="ep:picture" />
            </div>
          </template>
        </el-image>
      </div>

      <div class="lines">
        <div class="line-ttl">
          <div class="ttl">{{ nowCar.carName }}</div>
          <div
            @click="collectChange"
            :class="['icon', { collected: nowCar.isFocusMark || nowCar.isDangerous }]"
          ></div>
        </div>

        <div class="line-text">
          <div class="name">隧道方向：</div>
          <div class="text">{{ directionMap[nowCar.direction] }}</div>
        </div>

        <div class="line-text">
          <div class="name">进入时间：</div>
          <div class="text">{{ nowCar.inTunnelTime }}</div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="footer">
        <div class="cols">
          <div class="col-x">
            <div class="icon"></div>
            <div class="text"> 留存 {{ nowCar.retainedMinutesTime }}分钟 </div>
          </div>

          <div class="col-x">
            <div class="icon"></div>
            <div class="text"> 车速 {{ nowCar.speed }}km/h </div>
          </div>

          <div class="col-x">
            <div class="icon"></div>
            <div class="text"> 桩号 {{ numToStone(nowCar.carMilestone) }} </div>
          </div>
        </div>

        <el-button v-if="!nowCar.mook" @click="goTracker" class="def-btn">轨迹追踪</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, withDefaults } from 'vue'

import { CAR_TYPES } from '@/config/dict'
import { ROAD_DIRECTION } from '@/config/enum'
import { ASYNC_DIRECTIONS } from '@/config/dict'
import { carMark, cancelMark } from '@/api/home'
import { numToStone } from '@/utils/tunnel'
import { ElMessage } from 'element-plus'

const IMAGE_BASE = import.meta.env.VITE_IMAGE_BASE

const emits = defineEmits(['go-track'])

const props = withDefaults(
  defineProps<{
    cars?: any[]
  }>(),
  {
    cars: () => []
  }
)

const selected = defineModel<string | null>()
const nowCar = ref<any>({})

const directionMap = computed(() => {
  return Object.fromEntries(
    ASYNC_DIRECTIONS().map((item) => {
      return [item.key, item.name]
    })
  )
})

// 状态
const state = computed({
  get() {
    return Boolean(selected.value)
  },
  set(e) {
    if (!e) {
      selected.value = null
    }
  }
})

watch(
  () => props.cars,
  (e) => {
    if (!selected.value) return

    const current = e.find((item) => selected.value === item.id)

    if (!current) return

    const {
      id,
      type,
      mook,
      originalCar: {
        carPlate,
        inTunnelTime,
        speed,
        retainedMinutesTime,
        isFocusMark,
        isDangerous,
        carImageUrl,
        direction,
        carMilestone
      }
    } = current

    nowCar.value = {
      id,
      mook,
      direction,
      inTunnelTime,
      retainedMinutesTime,
      isFocusMark,
      isDangerous,
      carImageUrl,
      carMilestone,
      speed: speed.toFixed(2),
      carName: `${CAR_TYPES[type].name}(${carPlate})`
    }
  }
)

// 关闭
const onClose = () => {
  selected.value = null
  nowCar.value = {}
}

// 收藏与取消
const collectChange = async () => {
  const { id, isFocusMark, isDangerous } = nowCar.value

  if (isDangerous) {
    return ElMessage.warning('危化品车不可取消关注！')
  }

  if (isFocusMark) {
    await cancelMark({ carId: id })
  } else {
    await carMark({ carId: id })
  }
}

// 轨迹追踪
const goTracker = () => {
  state.value = false

  emits('go-track', {
    id: selected.value,
    direction: ROAD_DIRECTION[nowCar.value.direction]
  })
}
</script>

<style lang="scss" scoped>
$base_url: '@/assets/images/home/';

.content {
  display: flex;
  align-items: center;
  color: white;
  padding: 16px;
  .images {
    width: 74px;
    height: 74px;
    background: #eaeaea;
    position: relative;
    :deep(.image-error) {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666666;
    }
  }
  .lines {
    flex-grow: 1;
    margin-left: 12px;
    .line-ttl {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      .ttl {
        font-size: 18px;
        font-weight: 600;
        line-height: 18px;
      }
      .icon {
        width: 21px;
        height: 20px;
        background: url($base_url + 'collect_1.png') no-repeat;
        background-size: cover;
        cursor: pointer;
        &.collected {
          background: url($base_url + 'collect_2.png') no-repeat;
          background-size: cover;
        }
      }
    }
    .line-text {
      display: flex;
      margin-bottom: 3px;
    }
  }
}

.footer {
  height: 47px;
  background: rgba(69, 116, 182, 0.36);
  display: flex;
  align-items: center;

  padding: 0 16px;
  color: white;
  .cols {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    margin-right: 10px;
    .col-x {
      display: flex;
      align-items: center;
      font-size: 12px;
      justify-content: space-between;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        // background: salmon;
      }
    }
    .col-x:nth-child(1) {
      .icon {
        background: url($base_url + 'remain.png') no-repeat;
        background-size: cover;
      }
    }
    .col-x:nth-child(2) {
      .icon {
        background: url($base_url + 'speed.png') no-repeat;
        background-size: cover;
      }
    }
    .col-x:nth-child(3) {
      .icon {
        background: url($base_url + 'distance.png') no-repeat;
        background-size: cover;
      }
    }
  }
}
</style>

<style lang="scss">
.car-collect {
  padding: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: #0d3561;
  border-radius: 4px;

  .el-dialog__header {
    display: none;
  }
  .el-dialog__footer {
    padding-top: 0;
  }
  .def-btn {
    background: #1270ff;
    border: 1px solid rgba(155, 193, 255, 0.74);
    height: 28px;
    padding: 8px 10px;
    color: white;
    &:hover {
      border: 1px solid rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
