<template>
  <div class="app-container home">
    <TabTitle :text="nowText" />
    <el-row :gutter="10">
      <el-col :xs="0" :sm="2" :md="3" :lg="4">
        <el-card class="left-list">
          <div class="head-container">
            <el-input
              v-model="deptName"
              placeholder="请输入部门名称"
              clearable
              prefix-icon="Search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="{ label: 'label', children: 'children' }"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="deptTreeRef"
              node-key="id"
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="16" :md="16" :lg="14">
        <el-scrollbar height="700px">
          <el-card class="right-list">
            <template v-slot:header>
              <div class="cleartitle" style="justify-content: flex-start">
                <img src="@/assets/images/logo_video.png" width="25px" alt />
                <span>视频预览</span>
              </div>
            </template>
            <!-- <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain @click="handleUpdate">一分屏</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="primary" plain @click="handleUpdate">四分屏</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="primary" plain @click="handleDelete">六分屏</el-button>
              </el-col>
            </el-row> -->
            <div class="alg-list">
              <el-card
                class="alg-item"
                shadow="hover"
              >
                <template v-slot:default>
                  <!-- <img src="@/assets/images/picStream.png" style="width: 100%" /> -->
                  <canvas id="video" style="width: 100%" ></canvas>
                </template>
              </el-card>
            </div>
          </el-card>
        </el-scrollbar>
      </el-col>
      <el-col :xs="0" :sm="2" :md="3" :lg="6">
        <el-scrollbar height="700px">
        <el-card class="danger-list">
          <template v-slot:header>
            <div class="cleartitle" style="justify-content: flex-start">
              <img src="@/assets/images/logo_video.png" width="25px" alt />
              <span>实时预警</span>
            </div>
          </template>
          <div class="alg-list">
              <el-card
                v-for="item in algorithmList"
                :key="item.name"
                class="alg-item"
                shadow="hover"
              >
              <template v-slot:default>
                <img src="@/assets/images/default.png" style="width: 100%" />
                <el-form :model="form" label-width="100px">
                  <el-form-item label="预警设备：">{{ form.title }} </el-form-item>
                  <el-form-item label="登录信息：">{{ form.title }}</el-form-item>
                  <el-form-item label="预警区域：">{{ form.title }}</el-form-item>
                  <el-form-item label="预警类型：">{{ form.title }}</el-form-item>
                  <el-form-item label="预警时间：">{{ form.title }}</el-form-item>
                  <el-form-item label="预警等级："><el-tag :type="'danger'" effect="dark">{{ '一级预警'}} </el-tag></el-form-item>
               </el-form>
              </template>
              </el-card>
            </div>
        </el-card>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>
  
<script setup name="Index">
import { ArrowDown } from "@element-plus/icons-vue";
import { Search } from "@element-plus/icons-vue";
import '@/utils/jsmpeg.min'
import { listAiRegionManage } from "@/api/videoControl/videoPreview";
import { onMounted, reactive, ref, } from "vue";
const { proxy } = getCurrentInstance();
const algFormRef = ref(null);
const nowText = ref("视频预览");
const deptName = ref("");
const deptOptions = ref(undefined);
const algorithmList = reactive([
  {
    name: "我的算法",
    value: 1,
  },
  {
    name: "最新算法",
    value: 2,
  },
  {
    name: "基础算法",
    value: 3,
  },
  {
    name: "智慧煤矿",
    value: 4,
  },
  {
    name: "智慧能源",
    value: 5,
  },
  {
    name: "智慧校园",
    value: 6,
  },
  {
    name: "智慧港口",
    value: 7,
  },
  {
    name: "智慧煤矿",
    value: 8,
  },
  {
    name: "智慧能源",
    value: 9,
  },
  {
    name: "智慧校园",
    value: 10,
  },
]);
const data = reactive({
  form: {
    title:'测试测试测试'
  },
  queryParams: {
    postCode: undefined,
    searchValue: "",
    status: undefined,
  },
  rules: {
    postName: [
      { required: true, message: "岗位名称不能为空", trigger: "blur" },
    ],
    postCode: [
      { required: true, message: "岗位编码不能为空", trigger: "blur" },
    ],
    postSort: [
      { required: true, message: "岗位顺序不能为空", trigger: "blur" },
    ],
  },
});
const { queryParams, form, rules } = toRefs(data);
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
function getTreeData() {
  listAiRegionManage().then((res) => {
      deptOptions.value=res.data
  })
}
getTreeData()

function getVideos(){
    let canvas = document.getElementById('video')
    let url = 'rtsp://192.168.20.211:554/av0_0'
    let player = new JSMpeg.Player("ws://192.168.4.232:9999/rtsp?url="+btoa(url), {canvas: canvas})
}
onMounted(() => {
  getVideos()
})

// function closeNow(){
//     const routerArr=useTagsViewStore().visitedViews
//     const nowPath=location.pathname
//     return routerArr.filter(item=>{return item.path==nowPath })[0]
// }
// setTimeout(() => {
//   nowText=closeNow()awdasa
// }, 500);
// function goTarget(url) {
//   window.open(url, '__blank')
// }

function handleNodeClick(row) {
  
}

function handAdd(row) {
  algFormRef.value.handleAdd();
}

function handleSetSize(row) {
  console.log(
    "%c [ row ]-170",
    "font-size:13px; background:pink; color:#bf2c9f;",
    row
  );
  // reset();
  // const postId = row.postId || ids.value;
  // getPost(postId).then(response => {
  //   form.value = response.data;
  //   open.value = true;
  //   title.value = "修改岗位";
  // });
}
function handleUpdate(row) {
  // reset();
  // const postId = row.postId || ids.value;
  // getPost(postId).then(response => {
  //   form.value = response.data;
  //   open.value = true;
  //   title.value = "修改岗位";
  // });
}

/** 删除按钮操作 */
function handleDelete(row) {
  // const postIds = row.postId || ids.value;
  // proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
  //   return delPost(postIds);
  // }).then(() => {
  //   getList();
  //   proxy.$modal.msgSuccess("删除成功");
  // }).catch(() => {});
}
</script>
  
<style scoped lang="scss">
.left-list {
  min-height: 700px;
}
.right-list {
  min-height: 700px;
  .alg-list {
    display: grid;
    // grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    .el-card {
      border: 1px soild #ff6700;
    }
    .alg-item {
      width: 100%;
      // min-height: 350px;
      cursor: pointer;
      position: relative;
    }
  }
}
.danger-list{
  min-height: 700px;
  .alg-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    .el-card {
      border: 1px soild #ff6700;
    }
    .alg-item {
      width: 100%;
      // min-height: 350px;
      cursor: pointer;
      position: relative;
    }
    .el-form-item--default,.el-form-item {
      font-size: 12px;
      margin-bottom: 0px;
    }
  }
}

.cleartitle {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
  
  