<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="16">
          <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  v-for="item in algorithmList" :key="item.name" class="alg-item" shadow="hover">
                <template v-slot:header>
                  <div class="cleartitle">
                    <span>{{item.name}}</span>
                    <el-tag
                      :type="'success'"
                      effect="dark"
                    >
                      {{ 'success'}}
                    </el-tag>
                  </div>
                </template>
                <template v-slot:default >
                  <img
                    src="@/assets/images/picStream.png"
                    style="width: 100%"
                  />
                  <p style="color: #999999;font-size: 12px;">
                    通过摄像头识别吸烟行为的智能算法
                  </p>
                  <div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(item)" >修改</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(item)">删除</el-button>
                    <el-dropdown trigger="click" @command="handleSetSize">
                      <el-button link type="primary">
                        <el-icon class="el-icon--right">
                        <arrow-down />
                      </el-icon>更多</el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item :command="'卸载'">
                            {{ '卸载' }}
                          </el-dropdown-item>
                          <el-dropdown-item :command="'导入'">
                            {{ '导入' }}
                          </el-dropdown-item>
                          <el-dropdown-item :command="'下载'">
                            {{ '下载' }}
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </template>
              </el-card>
            </div>
          </el-card>
          </el-scrollbar>
        </el-col>
        <el-col :xs="0" :sm="2" :md="3" :lg="4">
          <el-card class="left-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-card>
        </el-col>
      </el-row>
    </div>
</template>
  
<script setup name="Index">
  import { ArrowDown } from '@element-plus/icons-vue'
  import { Search } from '@element-plus/icons-vue'
  const { proxy } = getCurrentInstance();
  const algFormRef = ref(null)
  const nowText=ref('视频预览')
  const deptName = ref("");
  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: {},
    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);
  // function closeNow(){
  //     const routerArr=useTagsViewStore().visitedViews
  //     const nowPath=location.pathname
  //     return routerArr.filter(item=>{return item.path==nowPath })[0]
  // }
  // setTimeout(() => {
  //   nowText=closeNow()
  // }, 500);
  // function goTarget(url) {
  //   window.open(url, '__blank')
  // }
  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;
      .alg-item{
        width: 100%;
        min-height: 350px;
        cursor: pointer;
        position: relative;
      }
    }
   }
   .cleartitle{
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  </style>
  
  