<!-- 
 * @Description: 预警管理
 * @Author: huguodong 
 * @Date: 2023-12-15 15:44:05
!-->
<template>
  <div class="main-box">
    <TreeFilter
      ref="treeFilters"
      title="预警类型"
      label="label"
      id="value"
      :isData="true"
      width="240px"
      :data="warnOptions"
      @change="changeType"
    ></TreeFilter>

    <div class="table-box">
      <ProTable ref="proTable" title="预警列表" :columns="columns" :request-api="getTableList" @reset="resetRecords">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <!-- <s-button suffix="预警" @click="onOpen(FormOptEnum.ADD)" /> -->
          <s-button
            type="danger"
            plain
            suffix="预警"
            :opt="FormOptEnum.DELETE"
            :disabled="!scope.isSelected"
            @click="onDelete(scope.selectedListIds, '删除所选数据')"
          />
        </template>
        <!-- tick -->
        <template #tick="scope">
          {{ scope.row.tick }}
        </template>
        <template #warnHand="scope">
          <el-tag v-if="scope.row.warnHand == 1" type="success">已处理</el-tag>
          <el-tag v-else type="danger">未处理</el-tag>
        </template>
        <!-- 表格 菜单类型 按钮 -->
        <template #menuType="scope">
          <el-space wrap>
            <el-tag v-if="scope.row.menuType === MenuTypeDictEnum.MENU" type="success">{{
              dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.MENU)
            }}</el-tag>
            <el-tag v-else-if="scope.row.menuType === MenuTypeDictEnum.LINK" type="warning">{{
              dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.LINK)
            }}</el-tag>
            <el-tag v-else type="info">{{ dictStore.dictTranslation(SysDictEnum.MENU_TYPE, scope.row.menuType) }}</el-tag>
            <el-tag v-if="scope.row.isHome === true" type="danger">首页</el-tag>
          </el-space>
        </template>
        <!-- 操作 -->
        <template #operation="scope">
          <s-button link :opt="FormOptEnum.VIEW" @click="onDetail(scope.row)"> 详情 </s-button>
          <s-button v-if="scope.row.warnHand == 0" link :opt="FormOptEnum.EDIT" @click="toHandle(FormOptEnum.EDIT, scope.row)">处理</s-button>
          <s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.id], `确定删除该预警吗？`)" />
        </template>
      </ProTable>
      <el-dialog
        v-model="visible"
        :title="detailData.alarmTypeDesc ? detailData.alarmTypeDesc + '-' + detailData.tick : ''"
        width="830px"
        :before-close="handleClose"
      >
        <div>
          <img class="detailpic" :src="detailData.snapshotUrl" alt="" />
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="linebox">所属学校：演示学校</div>
            </el-col>
            <el-col :span="12">
              <div class="linebox">班级：{{ detailData.personSetName ? detailData.personSetName : "暂无数据" }}</div>
            </el-col>
            <el-col :span="12">
              <div class="linebox">姓名：{{ detailData.personName ? detailData.personName : "暂无数据" }}</div>
            </el-col>
            <el-col :span="12">
              <div class="linebox">预警摄像头：{{ detailData.cameraName }}</div>
            </el-col>
            <el-col :span="12">
              <div class="linebox">预警类型：{{ detailData.alarmTypeDesc }}</div>
            </el-col>
            <el-col :span="12">
              <div class="linebox">预警时间：{{ detailData.tick }}</div>
            </el-col>

            <el-col :span="12">
              <div class="linebox">备注信息：{{ detailData.extend ? detailData.extend : "暂无数据" }}</div>
            </el-col>
            <el-col :span="12">
              <div class="linebox">
                复核视频：
                <span style="cursor: pointer" v-if="detailData.videoUrl" @click="onPlay(detailData.videoUrl)">
                  <el-icon color="#409efc" :size="20">
                    <VideoCamera />
                  </el-icon>
                  <!-- <el-icon><VideoCamera /></el-icon> -->
                </span>
                <span v-else>暂无数据</span>
                <!-- {{ detailData.videoUrl }} -->
              </div>
            </el-col>
            <el-col :span="24">
              <div class="linebox">
                处理意见：
                <span style="cursor: pointer" v-if="detailData.remark">
                  {{ detailData.remark }}
                </span>
                <span v-else>暂无数据</span>
                <!-- {{ detailData.videoUrl }} -->
              </div>
            </el-col>
          </el-row>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="visible = false">关闭</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 视频 -->
      <el-dialog v-model="videoVisible" title="视频" width="830px" :before-close="handleCloseVideo">
        <div>
          <div class="dialogHeader">
            <div></div>
            <!-- <div class="dialogBtn" @click="refreshUrl">
              <el-icon color="#409efc" :size="20">
                    <Refresh />
              </el-icon>
              <div>刷新视频</div>
            </div> -->
          </div>
          <VideoPlay :videoUrl="videoUrls" />
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handleCloseVideo">关闭</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 预览头像 -->
      <el-dialog v-model="preViewvisible" title="查看图片" width="830px" :before-close="previewhandleClose">
        <div style="display: flex; align-items: center; justify-content: center">
          <img class="detailpic" :src="faceUrl" alt="" />
        </div>
      </el-dialog>
      <!-- 处理预警 -->
      <handleForm ref="formRefH" />
    </div>
  </div>
</template>

<script setup lang="tsx" name="sysSpa">
 import VideoPlay from "@/components/VideoPlay/videoplay.vue";
import { warnZJRQApi } from "@/api";
import { ZJRQ } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import handleForm from "./components/handleForm.vue";
import { useDictStore } from "@/stores/modules";
import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums";
const faceUrl = ref('');
const preViewvisible = ref(false); //是否显示人员表单
const viewHeadImage = (scope: any) => {
  faceUrl.value = scope.row.snapshotUrl;
  preViewvisible.value = true
  console.log(faceUrl);
};
const previewhandleClose = () => {
  preViewvisible.value = false;
};
const visible = ref(false); //是否显示表单
onMounted(() => {
  getWarnTypeList();
});
const formRefH = ref<InstanceType<typeof handleForm> | null>(null);
function toHandle(opt: FormOptEnum, record: {} | ZJRQ.WarnInfo= {}) {
  formRefH.value?.onOpen({ opt: opt, record: JSON.parse(JSON.stringify(record)), successful: RefreshTable });
}
let warnOptions = ref([]);
function getWarnTypeList() {
  warnOptions.value = []
  setTimeout(async ()=> {
    await warnZJRQApi.warnType({}).then((res:any) => {
      let { code, data } = res;
    
      if (code == 200) {
        warnOptions.value = data.map((item:any) => {
          return {
            label: item.name,
            value: item.code
          };
        })
        
      }
    });
  })
  
}
// 自定义渲染表头（使用tsx语法）
const headerRender = (scope: any) => {
  return (
    <span>{scope.column.label}</span> 
   
  );
};
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
const dictStore = useDictStore();

// 表格配置项
const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
  { type: "selection", fixed: "left", width: 80 },
  // { prop: "searchKey", label: "关键字", search: { el: "input" }, isShow: false },
  // { prop: "cameraId", label: "所属摄像头", search: { el: "input" }, isShow: false },
  // { prop: "alarmTypeDesc", label: "预警类型", search: { el: "input" }, isShow: false },
  {
    prop: "poiId",
    label: "所属学校",
    render: () => {
      return "演示学校";
    }
  },
  
  {
    prop: "personSetName",
    label: "班级",
    // render: () => {
    //   return "楼道";
    // }
  },
  {
    prop: "cameraName",
    label: "预警摄像头",
    // render: () => {
    //   return "楼道";
    // }
  },
  {
    prop: "snapshotUrl",
    label: "预警快照",
    render: scope => {
      return (
        <img src={scope.row.snapshotUrl ? scope.row.snapshotUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/>
      );
    }
  },
  {
    prop: "personName",
    label: "姓名",
    // render: () => {
    //   return "楼道";
    // }
  },
  
  {
    prop: "alarmType",
    label: "预警类型",
    enum: warnOptions, 
    // search: { 
    //   el: "tree-select",
    //   // span: 1
    // } 
  },
  
  {
    prop: "tick", 
    label: "预警时间",
    headerRender,
    width: 180,
    search: {
      el: "date-picker",
      span: 2,
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
      // defaultValue: ["2022-11-12 11:35:00", "2022-12-12 11:35:00"]
    }
   },
   {
    prop: "warnHand",
    label: "处理状态",
    enum: [
      {
        label: "已处理",
        value: 1
      },
      {
        label: "未处理",
        value: 0
      }
    ], 
    // render: scope => {
    //   if (scope.row.warnHand === 1) {
    //     return "已处理";
    //   } else {
    //     return "未处理";
    //   }
    // },
    search: { 
      el: "tree-select",
      span: 1 
    } 
  },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];


const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.tick && (newParams.StartTick = newParams.tick[0]);
  newParams.tick && (newParams.EndTick = newParams.tick[1]);
  delete newParams.tick;
  return warnZJRQApi.page(newParams);
};/**
 * 删除
 * @param ids  id数组
 */
async function onDelete(ids: string[], msg: string) {
  // 二次确认 => 请求api => 刷新表格
  await useHandleData(warnZJRQApi.delete, { ids }, '操作');
  RefreshTable();
}

/**
 * 刷新表格
 */
function RefreshTable() {
  proTable.value?.refresh();
}
// 详情数据
// let detailData: globalThis.Ref<{}>
let detailData = ref({});
function onDetail(row: any) {
  visible.value = true;
   warnZJRQApi.detail({ id: row.id }).then((res:any) => {
      let { code, data } = res;
    
      if (code == 200) {
        detailData.value = data
      }
    });
  
  
}

const handleClose = () => {
  visible.value = false;
};
const videoVisible = ref(false); //是否显示表单
const videoUrls = ref('');
const onPlay = (url:string) => {
  videoVisible.value = true;
  videoUrls.value = url
}
const handleCloseVideo = () => {
  videoVisible.value = false;
  videoUrls.value = ''
};
const alarmType = ref<number | string>()
function changeType(val: number | string) {
  alarmType.value = val
  proTable.value!.pageable.pageNum = 1;
  proTable.value!.searchParam.alarmType = val;
  proTable.value!.search();
}
function resetRecords() {
  getWarnTypeList()
}
</script>

<style lang="scss" scoped>
.detailpic {
  width: 800px;
  object-fit: cover;
}
.linebox {
  margin-top: 20px;
}
</style>
