<template>
  <div class="event">
  
    <!-- 查询 -->
    <div class="search">

      <div class="inp-item">
        <div class="i-name">关键词：</div>
        <div class="i-content">
          <el-input v-model="params.keyword" class="x-inp" placeholder="请输入..." />
        </div>
      </div>

      <div class="inp-item">
        <div class="i-name">隧道方向：</div>
        <div class="i-content">
          <ItemSelect v-model="params.direction" :selects="ASYNC_DIRECTIONS()" />
        </div>
      </div>

      <div class="inp-item">
        <div class="i-name">事件类型：</div>
        <div class="i-content">
          <ItemSelectNew v-model="params.eventType" :selects="EVENT_TYPES" />
        </div>
      </div>

      <div class="inp-item">
        <div class="i-name">发生时间：</div>
        <div class="i-content">
          <el-date-picker
            v-model="areaTime"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            :teleported="false"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
      </div>
  
      <div class="inp-item">
        <div class="i-name">持续时间：</div>
        <div class="i-content">
          <span>≤</span>
          <el-input-number
            :controls="false"
            :min="0"
            v-model="params.retainedTime"
            class="num-inp"
            placeholder="请输入..."
          />
          <span>分钟</span>
        </div>
      </div>
  
      <div class="btns">
        <el-button @click="goSearch()" type="primary">搜索</el-button>
        <el-button @click="goSearch('reset')">重置</el-button>
      </div>
  
    </div>
  
    <!-- 列表 -->
    <div class="list-content">
      <el-table
        v-loading="loading"
        :data="listData"
        :row-class-name="({rowIndex}) => {
          return rowIndex % 2 === 0 ? 'stripe-row' : ''
        }"
        class="car-table"
      >
          <el-table-column label="序号" align="center" width="80" >
            <template #default="{ $index }">
              {{ $index + (params.pageNo - 1) * params.pageSize + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="eventStartTime" label="发生时间" width="180"/>
          <el-table-column prop="directionalPosition" label="方向位置" />
          <el-table-column label="事件类型" width="150">
            <template #default="{row}">
              <div :class="['event-type',  typeCompute(row).classStr]">
                {{ typeCompute(row).nameStr }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="eventSituation" label="现场情况" width="250" />
          <el-table-column prop="retainedTime" label="持续时间" width="100" />
          <el-table-column label="事件状态" align="center" width="110" >
            <template #default="{ row }">
              <div :class="`status-${row.eventStatus}`">
                {{ STATUS_MAP[row.eventStatus] }}
              </div>
              
            </template>
          </el-table-column>
          <el-table-column prop="eventCarPlate" label="关联车辆" width="250" />
          <el-table-column label="抓拍图片" width="230">
            <template #default="{ row }">
              <div class="image-group">
                <el-image
                  v-for="(item, x) in (row.eventImagesPath || []).slice(0, 2)"
                  class="catch-img"
                  :key="x"
                  :src="item"
                  style="width: 40px; height: 40px"
                  fit="cover"
                  @click="goPreview(row.eventImagesPath, x)"
                >
                  <template #error>
                    <el-image class="image-error" :src="DEFAULT_ICON" fit="cover" />
                  </template>
                  <template #placeholder>
                    <el-image class="image-error" :src="DEFAULT_ICON" fit="cover" />
                  </template>
                </el-image>
                <div
                  v-if="(row.eventImagesPath || []).length > 2"
                  class="add-btn"
                  @click="goPreview(row.eventImagesPath)"
                >
                  <span>+{{ row.eventImagesPath.length - 2 }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template #default="{row}">
              <div class="btns">

                <template v-if="[0, 3].includes(row.eventStatus)">
                  <div @click="goHandle(row)" class="deal-btn">处置</div>
                  <div class="dv-line"></div>
                </template>
                
                <div @click="backToEvent(row)" class="def-btn">事件回溯</div>

                <template v-if="![0, 3].includes(row.eventStatus)">
                  <div class="dv-line"></div>
                  <div class="def-btn">处置记录</div>
                  <div class="dv-line"></div>
                  <div class="def-btn">救援进度</div>
                </template>
              </div>
            </template>
          </el-table-column>
          <template #empty>
            <div class="empty">
              <span v-if="!loading">没有数据</span>
            </div>
          </template>
      </el-table>
  
      <!-- 分页 -->
      <div class="pages">
        
        <div class="sum">共 {{ params.total }} 条</div>
  
        <el-select
          v-model="params.pageSize"
          class="page-select"
          :teleported="false"
        >
          <el-option
            v-for="item in [10, 20, 30, 50]"
            :key="item"
            :label="item + '条/页'"
            :value="item"
          />
        </el-select>
  
        <el-pagination
          class="car-pages"
          layout="prev, pager, next"
          v-model:currentPage="params.pageNo"
          :teleported="false"
          :page-size="params.pageSize"
          :total="params.total"
          @change="pageChange"
        />

        <div class="jumper">
          前往
          <el-input-number
            v-model="jumperNum"
            @blur="goJumper"
            @keyup.enter="goJumper"
            :min="1"
            :max="allPages"
            :controls="false"
          />
          页
        </div>
  
      </div>

      

    </div>
    
  </div>

  <HandlePop @update="goSearch(true)" ref="handlePopRef" />
  
  <ElImageViewer
    v-if="viewSetting.show"
    v-bind="viewSetting"
    @close="() => { viewSetting.show = false }"
  />
  
  </template>
  
  <script lang='ts' setup>

  import { getEventList } from '@/api/event'
  
  import { ref, computed, reactive, onBeforeMount, getCurrentInstance } from 'vue'
  import { useRouter } from 'vue-router'
  import { ASYNC_DIRECTIONS, EVENT_TYPES, EVENT_STATUS } from '@/config/dict'

  import ItemSelect from './ItemSelect.vue'
  import ItemSelectNew from './ItemSelect-new.vue'
  import HandlePop from '../../components/HandlePop/index.vue'

  import DEFAULT_ICON from '@/assets/images/common/list-default.png'

  const app = getCurrentInstance()

  const areaTime = computed({
    get () {
      return [params.eventStartTimeSearchStart, params.eventStartTimeSearchEnd]
    },
    set (e) {
      if (e) {
        params.eventStartTimeSearchStart = e[0]
        params.eventStartTimeSearchEnd = e[1]
      } else {
        params.eventStartTimeSearchStart = ''
        params.eventStartTimeSearchEnd = ''
      }
      
    }
  })

  const jumperNum = ref<null | number>(null)

  const viewSetting = reactive<any>({
    urlList: [],
    initialIndex: 0,
    teleported: false,
    show: false
  })

  const EVENT_MAP = Object.fromEntries(EVENT_TYPES.map(item => {
    return [item.key, item.name]
  }))

  const STATUS_MAP = Object.fromEntries(EVENT_STATUS.map(item => {
    return [item.key, item.name]
  }))

  const handlePopRef = ref<any>(null)
  const router = useRouter()
  
  const params = reactive({
    keyword: '', // 关键词
    eventStatusSearch: 1,
    direction: ['上行', '下行'], // 方向
    retainedTime: null, // 留存时间
    eventStartTimeSearchStart: '', // 开始时间
    eventStartTimeSearchEnd: '', // 结束时间
    eventType: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '100'], // 事件类型
    pageNo: 1,
    pageSize: 10,
    total: 0
  })
  
  const listData = ref([])
  const loading = ref(true)

  const allPages = computed(() => {

    const left = params.total % params.pageSize
    if (params.total - left <= 0) {
      return 1
    } else {
      return ((params.total - left) / params.pageSize) + (left > 0 ? 1 : 0)
    }

  })

  // 获取列表
  const goGetList = async () => {
    loading.value = true
    const res = await getEventList(params)



    listData.value = res.list
    params.total = res.total
    loading.value = false
  }

  // 事件处理
  const goHandle = (e) => {
    handlePopRef.value.diaOpen(e)
  }

  // 分页切换
  const pageChange = (x) => {
    params.pageNo = x
    goGetList()
  }

  // 查询执行
  const goSearch = (reset?) => {
    params.pageNo = 1
    if (reset) {
      params.keyword = ''
      params.direction = ['上行', '下行']
      params.retainedTime = null
      params.eventStartTimeSearchStart = ''
      params.eventStartTimeSearchEnd = ''
      // params.eventType = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '100']
    params.eventType  = EVENT_TYPES.map(item=> {return item.key})

    }
    goGetList()
  }

  // 事件回溯
  const backToEvent = (row) => {
    router.push({
      path: 'history-detail',
      query: {
        id: row.id,
        from: 'history'
      }
    })
  }

  // 图片预览
  const goPreview = (images, x?) => {
    app?.proxy?.$openImage(images, '抓拍图片')
  }

  // 状态计算
  const typeCompute = (row) => {

    const { eventCarPlate, eventType } = row

    if(+eventType === 6) {
      return {
        classStr: 'type-1',
        nameStr: EVENT_MAP[eventType]
      }
    }

    if(eventCarPlate.length > 1) {
      return {
        classStr: 'type-2',
        nameStr: EVENT_MAP[eventType] + '(多车)'
      }
    }

    return {
      classStr: 'type-3',
      nameStr: EVENT_MAP[eventType] + '(单车)'
    }

  }

  // 页跳转
  const goJumper = () => {
    params.pageNo = jumperNum.value || 1
    goGetList()
  }

  onBeforeMount(() => {
    params.eventType  = EVENT_TYPES.map(item=> {return item.key})

    goGetList()
  })
  
  
  </script>
  
  <style lang='scss' scoped>

  .search {
    margin: 20px 40px 16px;
    padding: 16px 34px;
    color: white;
    background: rgba(69, 116, 182, 0.2);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

    display: grid;
    grid-template-columns: 504px 470px auto;
    row-gap: 14px;

    :deep(.el-input-number) {
      width: 90px !important;
    }

    .inp-item {
      display: flex;
      align-items: center;
      margin-right: 60px;
      .i-name {
        font-size: 14px;
        white-space: nowrap;
        width: 82px;
      }
      .i-content {
        display: flex;
        align-items: center;
        & > span {
          white-space: nowrap;
        }
      }
    }
    :deep(.el-input__wrapper) {
      border-radius: 0;
      background: transparent;
      // box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    .x-inp {
      width: 320px;
    }
    .num-inp {
      width: 126px;
      margin: 0 5px;
    }
    .btns {
      :deep(.el-button) {
        &:first-child {
          background: rgba(18, 112, 255, 1);
        }
        &:last-child {
          background: rgba(0, 125, 250, 0.15);
          color: white;
          border: 1px solid rgba(255, 255, 255, 0.29);
          &:hover {
            border-color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
  }
  
  .list-content {
    margin: 0 40px;
    .btns {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      .def-btn {
        cursor: pointer;
        color: #00AEFF;
        font-weight: 600;
        margin: 0 8px;
      }
      .dv-line {
        height: 12px;
        width: 1px;
        background: rgba(240, 245, 255, 0.45);
        margin: 0 8px;
      }
      .deal-btn {
        box-sizing: border-box;
        background: #1270FF;
        height: 24px;
        color: white;
        border-radius: 2px;
        padding: 0 8px;
        border: 1px solid rgba(155, 193, 255, 0.2);
        margin: 0 8px;
        cursor: pointer;
        &:hover {
          border: 1px solid rgba(155, 193, 255, 1);
        }
      }
    }
    .pages {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: white;
      padding-bottom: 30px;
      .sum {
        margin-right: 20px;
      }
      .page-select {
        width: 128px;
        margin-right: 20px;
        :deep(.el-select__wrapper) {
          border-radius: 0;
          background: rgba(32, 58, 96, 0.6);
          border: 1px solid rgba(32, 58, 96, 0.6);
          box-shadow: 0 0 0;
          
          .el-select__placeholder {
  
            color: white;
          } 
        }
      }
      .jumper {
        margin-left: 24px;
        font-size: 16px;
        :deep(.el-input__wrapper) {
          background-color: rgba(32, 58, 96, 0.6);
          border: 1px solid rgba(32, 58, 96, 0.6);
          border-radius: 0;
          box-shadow: 0 0 0 0;
        }
        :deep(.el-input-number) {
          width: 60px;
        }
      }
    }
    .empty {
      color: rgba(240, 245, 255, 0.45);
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .image-group {
      display: flex;
      align-items: center;
      :deep(.image-error) {
        height: 100%;
        width: 100%;
        // background: #EFEFEF;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666666;
      }
    }
    .add-btn {
      width: 40px;
      height: 40px;
      background: #002D5B;
      font-size: 16px;
      line-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      margin: 0 5px;
      color: white;
      cursor: pointer;

      span:first-child {
        margin-top: -2px;
        margin-right: 2px;
      }
    }

    .event-type {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-sizing: border-box;
      color: white;
      &.type-2{
        background: #F56C6C;
      }
      
      &.type-1 {
        background: #FA8C16;
      }
      &.type-3 {
        background: #507AFC;
      }
    }

    .status-0,
    .status-1,
    .status-2 {
      position: relative;
      display: inline-block;
      &::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 6px;
        position: absolute;
        left: -12px;
        top: 8px;
      }
    }
    .status-0,
    .status-3{
      color: #E6A23C;
      &::before {
        background: #E6A23C;
      }
    }
    .status-1 {
      color: #70A9FF;
      &::before {
        background: #70A9FF;
      }
    }
    .status-2 {
      color: #67C23A;
      &::before {
        background: #67C23A;
      }
    }
  }
  
  </style>
  
  <style lang="scss">
  
  .el-table {
    .catch-img {
      margin: 0 5px;
      border-radius: 4px;
      cursor: pointer;
    }
    &.car-table {
      --el-table-bg-color: transparent;
      --el-table-tr-bg-color: transparent;
      --el-table-header-bg-color: transparent;
      --el-table-border: 0px solid transparent;
      --el-table-border-color: transparent;
      --el-table-text-color: rgba(240, 245, 255, 0.95);
      --el-table-header-text-color: rgba(240, 245, 255, 0.95);
      // --el-table-row-hover-bg-color: rgba(69, 116, 182, 0.1);
      // --el-fill-color-lighter: rgba(69, 116, 182, 0.2);
      .car-row {
        height: 44px;
      }
      .stripe-row {
        background: rgba(69, 116, 182, 0.2);
      }
      .el-table__row:hover {
        .el-table__cell {
          background: rgba(69, 116, 182, 0);
        }
        
      }
    }
  }
  
  .el-pagination {
    &.car-pages {
      --el-pagination-bg-color: rgba(32, 58, 96, 0.6);
      --el-pagination-button-color: white;
      --el-pagination-button-disabled-bg-color: rgba(32, 58, 96, 0.4);
      --el-pagination-button-disabled-color: rgba(255, 255, 255, 0.5);
      .number {
        margin: 0 4px;
        &.is-active {
          background: #007DFA;
          color: white;
        }
      }
    }
  }

  .event {

    .el-loading-mask {
      background: rgba(0, 0, 0, 0.2);
    }

    .el-input__wrapper:not(.el-popper .el-input__wrapper) {
      width: 300px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
      .el-input__inner {
        color: #FFFFFF;
      }
    }

    .el-date-editor {
    
      .el-icon:nth-of-type(1) {
        display: none;
      }

      .el-range-input {
        color: white;
        width: 48%;
      }

      &.is-active {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
      }
    
    }

  }
  
  </style>