<template>
  <div class="flex" style="height: calc(100vh - 84px)">
    <scrollContainer style="width: 180px; height: 100%; overflow-x: hidden">
		<!-- <ul class="ul-menu">
			<li class="ui-menu-item nochild"
			 @click.stop="handleSelect('all')">告警总览</li>
			<li v-for="(item,index) in typeList" :key="index">
				<div class="ui-menu" @click.stop="item.show = !item.show">
					<span>{{item.name}}</span>
					<el-icon :class="item.show?'act':''"><ArrowDown/></el-icon>
				</div>
				<ul v-if="item.show" style="--el-menu-level: 1;">
					<li v-for="(subitem,subindex) in item.child" :key="subindex"
					class="ui-menu-item"
					 @click.stop="handleSelect(subitem.type)">{{subitem.name}}</li>
				</ul>
			</li>
		</ul> -->
      <el-menu default-active="all" style="min-height: 100%" @select="handleSelect">
        <el-menu-item index="all">
          <template #title>
            <span>告警总览</span>
          </template>
        </el-menu-item>
        <el-sub-menu :index="sji+1+''" v-for="(sud,sji) in typeList" :key="sji">
          <template #title>
            <span>{{sud.name}}</span>
          </template>
          <el-menu-item :index="sudsf.type" v-for="(sudsf,sjisf) in sud.child" :key="sjisf">{{sudsf.name}}</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </scrollContainer>
    <div class="flex-sub padding-lr" style="overflow-y: auto">
		<div class="flex align-center justify-between">
		  <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"
			class="margin-top-lg">
			<el-form-item label="告警类型">
			  <el-select v-model="defActiv" placeholder="选择告警类型" clearable @change="handleOption">
				<el-option v-for="(item,index) in alramRouter" :key="index" 
					:label="item.label" :value="item.value" />
			  </el-select>
			</el-form-item>
			<el-form-item>
			  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
			  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		  </el-form>
		  <div class="text-xl pointer">
			  <elIcon v-if="imgModal" @click="imgModal = false"><Menu/></elIcon>
			  <elIcon v-else @click="imgModal = true"><Operation/></elIcon>
		  </div>
		</div>
      <div v-loading="loading">
		  <div v-if="imgModal">
			  <el-table ref="tableRef" :data="alarmPreviewList">
			    <el-table-column label="序号" align="center" type="index" width="50" />
			    <el-table-column label="告警类型" align="center" prop="algorithm_configuration_name">
					<template #default="scope">
					  <span>{{ switchKey(scope.row.algorithm_configuration_name)[0] }}</span> 
					</template>
				</el-table-column>
			    <el-table-column label="告警位置" align="center" prop="camera_name"/>
			    <el-table-column label="告警等级" align="center" prop="alarm_overview_level"/>
			    <el-table-column label="告警时间" align="center" prop="create_time" width="180"/>
				<el-table-column label="告警图片" align="center">
					<template #default="scope">
						<elIcon @click="seeImg(scope.row.src)" class="pointer"><Picture/></elIcon>
					</template>
				</el-table-column>
				<el-table-column label="告警视频" align="center">
					<template #default="scope">
						<i @click="seeVid(scope.row.alarm_overview_video_url)" class="iconfont icon-shipin_Linear pointer"></i>
					</template>
				</el-table-column>
			</el-table>
		  </div>
		  <div v-else>
			<div class="grid col-4" v-if="alarmPreviewList.length">
			  <div class="padding-xs" v-for="(item, i) in alarmPreviewList" :key="i">
				<el-card :body-style="{ padding: '0px' }" shadow="hover">
				  <el-image :src="item.src" style="height: 150px; width: 100%"
					:preview-src-list="item.srcLi" fit="fill"></el-image>
				  <div class="text-sm padding-sm">
					<div class="flex justify-between">
						<div class="text-bold">
							<i class="iconfont icon-warn margin-right-xs"></i>
							<span>{{ switchKey(item.algorithm_configuration_name)[0] }}</span> 
						</div>
						<div>LV.{{ item.alarm_overview_level }}</div>
					</div>
					<div class="flex justify-between margin-tb-xs">
						<div>
							<i class="iconfont icon-dizhi margin-right-xs"></i>
							<span>{{ item.camera_name }}</span> 
						</div>
						<div class="pointer" @click="seeVid(item.alarm_overview_video_url)"><i class="iconfont icon-shipin_Linear"></i>视频</div>
					</div>
					<div><i class="iconfont icon-Time margin-right-xs"></i>{{ item.create_time }}</div>
				  </div>
				</el-card>
			  </div>
			</div>
			<el-empty v-else description="暂无数据"></el-empty>
		</div>
      </div>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
	<el-dialog
	  title="视频回放"
	  top="20px"
	  v-model="dialogVisible"
	  :before-close="handleClose"
	  width="80%">
		<div v-html="vidSrc"></div>
	</el-dialog>
	<el-dialog
	  title="图片预览"
	  top="20px"
	  v-model="imgVisible"
	  width="80%">
		<img :src="imgSrc" style="width:100%;" alt="">
	</el-dialog>
  </div>
</template>

<script setup>
import {
  listAlarmPreview,
  // getAlarmPreview,
  // delAlarmPreview,
  // addAlarmPreview,
  // updateAlarmPreview,
  // downloadAlarmPreview,
} from "@/api/alarmPreview";
import { getAlarmType } from "@/api/algorithmConfiguration";

// import _default from "@element-plus/icons-vue/dist/types/message.vue";
const baseUrl = location.protocol+"//"+window.location.host+"/";
// const baseUrl = import.meta.env.VITE_APP_BASE_API;
const { proxy } = getCurrentInstance();
const loading = ref(false);
const showSearch = ref(true);
const total = ref(0);
const alarmPreviewList = ref([]);
const alramRouter = ref([]);

const imgModal = ref(true);
const vidSrc = ref("");
const dialogVisible = ref(false);
const imgVisible = ref(false);
const imgSrc = ref("");
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 12,
	algorithm_configuration_name :"all"
  },
  defActiv: "all",
  typeList:[]
});

const { queryParams, defActiv, typeList } = toRefs(data);
const switchKey = function(key){
	let _str = "",_syy = 0;
	switch (key){
		case "humanOut": 
			_str = "离岗检测";
			_syy = 0;
			break;
		case "humanIn":
			_str = "区域警戒";
			_syy = 0;
			break;
		case "drowsy":
			_str = "疲劳检测";
			_syy = 0;
			break;
		case "cigarette":
			_str = "抽烟检测";
			_syy = 0;
			break;
		case "phone":
			_str = "打电话检测";
			_syy = 0;
			break;
		case "mask":
			_str = "口罩检测";
			_syy = 1;
			break;
		case "helmet":
			_str = "安全帽检测";
			_syy = 1;
			break;
		case "smoke":
			_str = "烟火检测";
			_syy = 1;
			break;
		case "ship":
			_str = "船体检测";
			_syy = 1;
			break;
		case "shipDetection":
			_str = "船体识别";
			_syy = 1;
			break;
			
		default: 
			_str = "其他";
			break;
	}
	return [_str, _syy];
}
const handleSelect = (key) => {
	if(defActiv.value != key){
		defActiv.value = key;
		handleQuery()
	}
};
const handleOption = (key) => {
	let _ind1 = typeList.value[0].child.findIndex(item => {return item.type == key });
	let _ind2 = typeList.value[1].child.findIndex(item => {return item.type == key });
	if(_ind1 != -1&&!typeList.value[0].show){
		typeList.value[0].show = true;
	}
	if(_ind2 != -1&&!typeList.value[1].show){
		typeList.value[1].show = true;
	}
	handleQuery();
}
function seeVid(_src){
	dialogVisible.value = true;
	if(_src.indexOf(".mp4") != -1){
		vidSrc.value = `<video width="100%" controls autobuffer autoplay>
			<source src="${baseUrl}${_src}" type="video/mp4"></source>
		</video>`
	}else{
		vidSrc.value = "";
	}
};
function seeImg(_src){
	imgVisible.value = true;
	imgSrc.value = _src;
};
function handleClose(done) {
	vidSrc.value = "";
	dialogVisible.value = false;
};
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
function getList() {
  loading.value = true;
  let _obj = queryParams.value;
  if(defActiv.value == "all"){
	  delete queryParams.value['algorithm_configuration_name']
  }else{
	  queryParams.value['algorithm_configuration_name'] = defActiv.value
  }
  listAlarmPreview(_obj).then((response) => {
	let _obj = response.data;
	_obj.forEach((item,ind) => {
		item.src = baseUrl + item.alarm_overview_image_url;
		item.srcLi  = [item.src];
	});
    alarmPreviewList.value = _obj;
    total.value = response.total;
    loading.value = false;
  });
}
function getAlarmRouter(){
	getAlarmType().then((result)=>{
		if(result.code == 200&&result.data.length){
			let _iic = result.data;
			let _type = [{
					"name":"行为告警",
					"show":true,
					"child":[]
				},{
					"name":"物品检测",
					"show":false,
					"child":[],
				}];
			_iic.forEach(item => {
				let dki = switchKey(item.algorithm_configuration_name);
				item.label = dki[0];
				item.value = item.algorithm_configuration_name;
				_type[dki[1]].child.push({
					type: item.algorithm_configuration_name,
					name: dki[0]
				})
			});
			_iic.unshift({
				label: "告警总览",
				value: "all"
			});
			alramRouter.value = _iic;
			typeList.value = _type;
		}else{
			alramRouter.value = [];
			typeList.value = [];
		}
	})
}
getList();
getAlarmRouter()
</script>

<style lang="scss" scoped>
	.ul-menu{
		border-right: solid 1px var(--el-menu-border-color);
		list-style: none;
		position: relative;
		margin: 0;
		padding-left: 0;
		background-color: var(--el-menu-bg-color);
		box-sizing: border-box;
		min-height: 100%;
	}
	.ui-menu{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--el-menu-item-height);
		line-height: var(--el-menu-item-height);
		font-size: var(--el-menu-item-font-size);
		color: var(--el-menu-text-color);
		padding: 0 var(--el-menu-base-level-padding);
		list-style: none;
		cursor: pointer;
		position: relative;
		transition: border-color var(--el-transition-duration),background-color var(--el-transition-duration),color var(--el-transition-duration);
		box-sizing: border-box;
		white-space: nowrap;
	}
	.ui-menu .el-icon{
		transition: all 300ms ease-in;
	}
	.ui-menu .el-icon.act{
		transform: rotate(180deg);
	}
	.ui-menu-item{
		display: flex;
		align-items: center;
		height: var(--el-menu-sub-item-height);
		line-height: var(--el-menu-sub-item-height);
		min-width: 200px;
		font-size: var(--el-menu-item-font-size);
		color: var(--el-menu-text-color);
		padding: 0 var(--el-menu-base-level-padding);
		list-style: none;
		cursor: pointer;
		position: relative;
		transition: border-color var(--el-transition-duration),background-color var(--el-transition-duration),color var(--el-transition-duration);
		box-sizing: border-box;
		white-space: nowrap;
		padding-left: calc(var(--el-menu-base-level-padding) +  var(--el-menu-level)*var(--el-menu-level-padding));
	}
	.ui-menu-item.nochild{
		padding-left: var(--el-menu-base-level-padding);
	}
	.ui-menu-item.is-active {
	    color: var(--el-menu-active-color);
	}
</style>