<template>
  <div class="app-container home">
    <TabTitle :text="nowText" />
    <div class="add-but">
        <el-button type="primary" icon="Plus" @click="handeAdd" plain>新增点位</el-button>
    </div>
    <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="20">
        <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>{{ nowText }}</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> -->
              <el-table v-loading="loading" :data="pointList">
                <el-table-column label="实况图" align="center" prop="postId" />
                <el-table-column label="摄像头名称" align="center" prop="postCode" />
                <el-table-column label="所属区域" align="center" prop="postName" />
                <el-table-column label="推理间隔（秒）" align="center" prop="postSort" />
                <el-table-column label="关联算法" align="center" prop="postSort" />
                <el-table-column label="时段配置" align="center" prop="postSort" />
                <el-table-column label="运行状态" align="center" prop="postSort" />
                <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                      <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
                      <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
                    </template>
                </el-table-column>
              </el-table>
          </el-card>
        </el-scrollbar>
      </el-col>
    </el-row>
    <drawPoint ref="drawPointRef" />
  </div>
</template>
  
<script setup name="Index">
import drawPoint from './components/drawPoint.vue'
import { ArrowDown } from "@element-plus/icons-vue";
import { Search } from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance();
const drawPointRef = ref(null);
const nowText = ref("点位管理");
const deptName = ref("");
const pointList = ref([]);
const loading = ref(false);
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 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 handeAdd(row) {
  drawPointRef.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;
}
.add-but{
  position: absolute;
  display: flex;
  top: 30px;
  right: 30px;
}
.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;
      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>
  
  