<template>
  <div class="appearance-monitor-warp">
    <div class="appearance-monitor-left h-[100%]">
      <template v-if="currFileList?.length">
        <div class="monitor-left-top">
          <div class="file-preview-screen">
            <Player :src="currFile?.video_url" :is-playing="isPlaying" v-if="currFile?.video_url"
              @play="isPlaying = true" @pause="isPlaying = false" />
            <img :src="currFile?.image_url" v-else-if="currFile?.image_url" >
            <div v-else>
              <!-- //TODO 视频【图片】加载失败 -->
            </div>
          </div>
        </div>
        <div class="monitor-left-bottom">
          <swiper ref="swiperRef" :modules="modules" :slides-per-view="4" :space-between="10" navigation
            :scrollbar="{ draggable: false }" :centered-slides="false" :observer="true" :observeParents="true"
            @swiper="onSwiper" @slideChange="onSlideChange">
            <swiper-slide v-for="(file, index) in currFileList" :key="index" @click="handleSlideClick(index)"
              :class="{ 'active-slide': activeIndex === index }">
              <img :src="file?.image_url" v-if="file?.image_url" class="cursor-pointer" />
              <SwiperPlayer class="cursor-pointer" :videoUrl="file?.video_url" v-else-if="file?.video_url"
                :isPlaying="isPlaying && (activeIndex === index)" />
              <div v-else>
                <!-- //TODO 视频【图片】加载失败 -->
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </template>
      <div class="empty-bg" v-else></div>
    </div>
    <div class="appearance-monitor-right h-[100%]">
      <div class="module-header">
        <ContentHeader bgLayout="918">
          <template #title>
            <div class="w-[200px] bg_title bg_title_5"></div>
          </template>
          <template #extra>
            <div></div>
          </template>
        </ContentHeader>
      </div>
      <!-- 表格区域 -->
      <!-- 搜索区域 -->
      <div class="px-[16px]">

        <div class="appearance-monitor-search-box">
          <el-select v-model="searchForm.station" placeholder="站点" class="custom-select">
            <el-option label="小觉站" value="小觉站"></el-option>
            <el-option label="东西站" value="东西站"></el-option>
            <el-option label="立杆区" value="立杆区"></el-option>
          </el-select>
          <el-input v-model="searchForm.train_number" placeholder="请输入列车号" class="custom-input" clearable />
          <el-input v-model="searchForm.train_carriage_number" placeholder="请输入车厢号" class="custom-input" clearable />
          <el-select v-model="searchForm.fault_type" placeholder="故障类型" class="custom-select">
            <el-option label="下侧门板缺失" value="下侧门板缺失"></el-option>
            <el-option label="门折页座脱落" value="门折页座脱落"></el-option>
            <el-option label="小门塔扣丢失" value="小门塔扣丢失"></el-option>
            <el-option label="小窗裂纹" value="小窗裂纹"></el-option>
            <el-option label="搭扣未搭" value="搭扣未搭"></el-option>
            <el-option label="小门外胀" value="小门外胀"></el-option>
          </el-select>
          <el-button type="primary" @click="handleQuery" class="basic-btn query-btn">
            <span class="icon"></span> 查询
          </el-button>
          <el-button @click="handleReset" class="basic-btn reset-btn">
            <span class="icon"></span> 重置
          </el-button>
        </div>
        <!-- 右侧表格区域 -->
        <div class="w-full right-panel">
          <div class="bg-transparent baseTable_wrap">
            <template v-if="pagination.total > 0">
              <BaseTable class="bg-transparent baseTable_box" :total="pagination.total" :pageSize="pagination.pageSize"
                :dataSource="listData" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage"
                @change="handleTableChange" :row-class-name="handleRowClassName" @row-click="handleRowClick">
                <template #created_at="{ row }">
                  <div>{{row}}</div>
                </template>
              </BaseTable>
            </template>
          </div>
        </div>
      </div>

    </div>
    <PointModal v-model:value="isPointOpen" :info="currentRow" @close="isPointOpen = false" />
    <AlarmModal v-model:value="isAlarmOpen" :info="currentRow" :image="currFileList" @close="isAlarmOpen = false" />
    <DeleteModal v-model:value="isDeleteOpen" @delete-success="getList()" :info="currentRow" @close="isDeleteOpen = false" />
  </div>
</template>
<script lang="ts" setup>
import Player from '@/components/videoPlayer/Player.vue'
import SwiperPlayer from './components/SwiperPlayer.vue'
import ContentHeader from "@/components/ContentHeader.vue";
import { BaseTable } from "@/components/CustomTable";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Scrollbar } from "swiper/modules";
import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/dashboard';
import { isSuccessApi } from "@/utils/forApi";
import PointModal from './components/PointModal.vue'
import AlarmModal from './components/AlarmModal.vue'
import DeleteModal from './components/DeleteModal.vue'

import "swiper/css";
import 'swiper/scss';
import 'swiper/scss/navigation';
import { color } from 'echarts';
const modules = [Navigation, Scrollbar];
const activeIndex = ref(-1);
const swiperRef = ref(null);
const isPointOpen = ref<Boolean>(false); //点云弹窗
const isAlarmOpen = ref<Boolean>(false); //详情弹窗
const isDeleteOpen = ref<Boolean>(false); //删除弹窗
const columns = [
  {
    label: "站点",
    property: "station",
    width: 70,
  },
  {
    label: "车号",
    property: "train_number",
    width: 120,
  },
  {
    label: "车型",
    property: "train_model",
    width: 70,
  },
  {
    label: "车厢号",
    property: "train_carriage_number",
    width: 80,
  },
  {
    label: "告警类型",
    property: "alarm_type",
    width: 90,
  },
  {
    label: "故障类型",
    property: "fault_type",
    width: 120,
  },
  {
    label: "等级",
    property: "level",
    width: 60,
  },
  // {
  //   label: "复核",
  //   property: "is_reviewed",
  //   formatter: ({ is_reviewed }) => {
  //     return is_reviewed === true
  //       ? "是"
  //       : "否";
  //   },
  //   width: 60,
  // },
  {
    label: "时间",
    property: "created_at",
  },
  {
    slot: "operation",
    label: "操作",
    width: 140,
    formatter: (row) => {
      return h(
        "div",
        {
          style: {
            fontSize: "14px",
            color:"#37EBFF"
          }
        },
        [
          // h("i", {
          //   class: `iconfont icon-zishebeizu pr-[8px]`
          // }),
          h(
            "span",
            {
              fontSize: "14px",
              class: "pf-1",
            },
            [
              h("i", 
                {
                  style: {
                    fontSize: "14px",
                    letterSpacing: "2px",
                    marginRight: "4px",
                    color:"#37EBFF"
                  },
                  onClick: () => {
                    // console.log(row.id);
                    // 这里可以添加按钮点击后的具体逻辑
                    isPointOpen.value = true;
                  }
                },
                "点云"
              ),
              h("i", 
                {
                  style: {
                      fontSize: "14px",
                      letterSpacing: "2px",
                      marginRight: "4px",
                      color:"#009DFF"
                  },
                  onClick: (row) => {
                    // console.log(row.id);
                    // 这里可以添加按钮点击后的具体逻辑
                    isAlarmOpen.value = true;
                    currentRow.value = row;
                  }
                },
                "详情"
              ),
              h("i", 
                {
                  style: {
                    fontSize: "14px",
                    letterSpacing: "2px",
                    marginRight: "4px",
                    color:"#FF2727"
                  },
                  onClick: (row) => {
                    // console.log(row.id);
                    // 这里可以添加按钮点击后的具体逻辑
                    isDeleteOpen.value = true;
                    currentRow.value = row;
                  }
                },
                "删除"
              ),
            ]
          )
        ]
      );
    }
  }
]

const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
const listData = ref([]); // 列表数据
const currentRow = ref<Record<string, any>>({}); // 当前选中行
const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
const currFile = ref<Record<string, any>>({}); // 详情数据
const isPlaying = ref<boolean>(false); // 是否播放
// 搜索表单
const searchForm = reactive({
  train_number: "",
  train_carriage_number: "",
  fault_type: "",
  station:"",
  type: "appearance"
});
const dataLoading = ref(true);

const togglePlay = () => {
  isPlaying.value = !isPlaying.value;
};

const handleSlideClick = (index) => {
  if (activeIndex.value === index) {
    togglePlay()  // 播放 暂停
  } else {
    activeIndex.value = index;
    currFile.value = currFileList.value[index];
    isPlaying.value = false;
  }
};

const onSwiper = (swiper) => {
  swiperRef.value = swiper;
  console.log('Swiper 实例已获取:', swiper);
};
const onSlideChange = () => {
  console.log("slide change");
};

// 文件详情
const getFileList = async () => {
    try {
        const res = await getAppearanceMonitorDetailApi({ id: currentRow.value?.id, current: 1, pageSize: 1000 })
        console.log(res.data, 'getDetailList_data')
        if (isSuccessApi(res)) {
            // currFileList.value = res.data.data;
            currFileList.value = [
              {
                image_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
              },{
                image_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
              },{
                image_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
              },{
                image_url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
              }
            ]
            currFile.value = res.data.data[0];
            activeIndex.value = 0;
        }
    } catch (error) {
        console.log(error, 'getDetailList_error')
    }
}
// TODO mock 获取视频列表数据
// const getFileList = async () => {
//   try {
//     const resAll = await fetch('/api/v1/record/record_detail_list/', {
//       method: 'POST'
//     })
//     const res = await resAll.json()
//     if (isSuccessApi(res)) {
//       currFileList.value = res.data.data;
//       currFile.value = res.data.data[0];
//       activeIndex.value = 0;
//     }
//   } catch (error) {
//     console.error('获取数据失败:', error)
//   }
// }

function loadDetail() {
  currentRow.value = listData.value[0]
  getFileList()
}

// 获取列表
const getList = async () => {
  try {
    const { currentPage, pageSize } = pagination.value;
    const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
    console.log(res.data, 'getList_data')
    if (isSuccessApi(res)) {
      listData.value = res.data.data;
      loadDetail()
      pagination.value = {
        ...pagination.value,
        total: res.data.total
      };
    }
  } catch (error) {
    console.error('获取数据失败:', error)
  }
};

// 查询方法
const handleQuery = () => {
  getList()
};

// 重置方法
const handleReset = () => {
  searchForm.train_number = '';
  searchForm.train_carriage_number = '';
  searchForm.fault_type = '';
  getList()
};

function handleTableChange(record) {
  console.log("handleTableChange_record", record);
  pagination.value = {
    ...pagination.value,
    currentPage: record.page,
    pageSize: record.pageSize
  };
  getList();
}

// 定义行类名方法
const handleRowClassName = ({ row }) => {
  return row.id === currentRow.value.id ? 'selected-row' : '';
};

// 行点击事件处理
const handleRowClick = (row, event, rowIndex) => {
  currentRow.value = row;
  getFileList()
};

onMounted(() => {
  getList();
});
</script>
<style lang="scss">
@import url('./AppearanceMonitor.scss');
</style>