<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="left_tree">
          <div class="custom-tree-node">
            <span class="title">所有摄像头</span
            ><span
              ><el-button
                type="primary"
                size="mini"
                class="el-icon-circle-plus-outline"
                @click="() => append(null)"
              >
              </el-button
            ></span>
          </div>
          <el-tree
            :data="data"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleClickChange"
            highlight-current
            style="padding-top: 20px"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  v-if="node.level < 3"
                  size="mini"
                  @click="() => append(data)"
                >
                  <span class="el-icon-circle-plus-outline"></span>
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => edit(node, data)"
                >
                  <span class="el-icon-edit"></span>
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
                >
                  <span class="el-icon-delete"></span>
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="right_table">
          <el-row type="flex" :gutter="10">
            <el-col :span="6">
              <el-button
                type="primary"
                plain
                size="mini"
                @click="addCamera"
                :disabled="clickId == null"
              >
                <i class="el-icon-plus el-icon--left"></i>新增摄像头</el-button
              >
            </el-col>
            <el-col :span="6">
              <span></span>
            </el-col>
            <el-col :span="6">
              <el-autocomplete
                v-model="state"
                size="mini"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入内容"
                @select="handleSelect"
                suffix-icon="el-icon-search"
              ></el-autocomplete>
            </el-col>
            <el-col :span="6">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >导出</el-button
              >
            </el-col>
          </el-row>
          <el-table
            :data="tableList"
            style="width: 100%; margin-top: 20px"
            empty-text
          >
            <el-table-column
              prop="name"
              align="center"
              label="名称"
            ></el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="地址"
            ></el-table-column>
            <el-table-column
              prop="videoAdress"
              label="视频地址"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="imageUrl"
              align="center"
              label="图片地址"
            ></el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="tableEdit(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="tableDelete(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="添加摄像头"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        size="mini"
      >
        <el-form-item label="摄像头位置" prop="address">
          <el-input
            :disabled="visibleType !== 'addAddress'"
            v-model="form.address"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="visibleType === 'addCamera'"
          label="摄像头名称"
          prop="name"
        >
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          v-if="visibleType === 'addCamera'"
          label="视频地址"
          prop="videoAdress"
        >
          <el-input v-model="form.videoAdress"></el-input>
        </el-form-item>
        <el-form-item v-if="visibleType === 'addCamera'" label="摄像头封面">
          <ImageUpload />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="conform">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Cameraconfig",
  props: {},
  components: {},
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
              {
                id: 10,
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
      id: 11,
      dialogVisible: false,
      visibleType: "addAddress", // 'addAddress' 或 'addCamera'
      form: {
        address: "",
      },
      rules: {
        address: [
          { required: true, message: "请输入摄像头地址", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入摄像头名称", trigger: "blur" },
        ],
        videoAdress: [
          { required: true, message: "请输入视频地址", trigger: "blur" },
        ],
      },
      selectedData: null, // 新增变量，用于保存当前选中的节点数据
      isEditing: false, // 新增编辑状态变量
      state: "", // 搜索框的值
      clickId: null, // 点击的id
      /**table数据 */
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableList: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /**
     * 树状操作部分
     */
    // 添加摄像头位置
    append(data) {
      this.dialogVisible = true;
      this.selectedData = data; // 保存当前操作的节点数据
    },
    //编辑
    edit(node, data) {
      this.isEditing = true;
      this.dialogVisible = true;
      this.selectedData = data; // 保存当前操作的节点数据
      this.form.address = data.label; // 编辑时填充表单数据
    },
    //删除
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    // 添加节点逻辑统一处理
    handleAddNode(parent, newChild) {
      if (!parent) {
        this.data.push(newChild);
        return;
      }
      if (!parent.children) {
        this.$set(parent, "children", []);
      }
      parent.children.push(newChild);
    },
    // 确认操作拆分
    handleConfirmAdd() {
      const newChild = {
        id: this.id++,
        label: this.form.address,
        children: [],
      };
      this.handleAddNode(this.selectedData, newChild);
    },
    // 弹窗状态重置
    resetForm() {
      this.dialogVisible = false;
      this.form = { address: "" };
      this.selectedData = null;
      this.isEditing = false;
    },
    // 优化后的确认方法
    conform() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        if (this.isEditing) {
          this.$set(this.selectedData, "label", this.form.address);
        } else {
          this.handleConfirmAdd();
        }
        this.resetForm();
      });
    },
    // 保持原有递归方法但简化实现
    updateNodeById(nodes, targetId, newLabel) {
      nodes.some((node) => {
        if (node.id === targetId) return (node.label = newLabel);
        return (
          node.children &&
          this.updateNodeById(node.children, targetId, newLabel)
        );
      });
    },
    //选中的tree数据
    handleClickChange(data, checked, indeterminate) {
      this.clickId = data.id;
    },
    /**
     * 表格操作部分
     */
    // 搜索框
    handleSelect(item) {
      console.log(item);
    },
    // 搜索框数据操作
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    //新增摄像头
    addCamera() {
      this.visibleType = "addCamera";
      this.dialogVisible = true;
    },
    //导出按钮操作
    handleExport() {
      this.download(
        "system/post/export",
        {
          ...this.queryParams,
        },
        `post_${new Date().getTime()}.xlsx`
      );
    },
    //获取表格数据
    getList() {},
    //表格编辑
    tableEdit() {},
    //表格删除
    tableDelete() {},
  },
};
</script>

<style scoped lang="scss">
.left_tree {
  height: calc(100vh - 120px);
  background: #fff;
  padding: 15px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  .title {
    font-weight: bold;
    color: #606266;
    font-size: 18px;
  }
}
.right_table {
  height: calc(100vh - 120px);
  background: #fff;
  padding: 15px;
}
</style>
