<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="positionId"
            :props="treeProps"
            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="clickData.positionId == null"
              >
                <i class="el-icon-plus el-icon--left"></i>新增摄像头</el-button
              >
              <el-tag
                closable
                type="success"
                @close="closeTag"
                v-if="clickData.positionName"
                style="margin-left: 10px"
              >
                {{ clickData.positionName }}
              </el-tag>
            </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="cameraName"
              align="center"
              label="名称"
            ></el-table-column>
            <el-table-column
              prop="cameraPosition"
              align="center"
              label="地址"
            ></el-table-column>
            <el-table-column
              prop="cameraAddress"
              label="视频地址"
              align="center"
            ></el-table-column>
            <el-table-column prop="cameraImage" align="center" label="图片地址">
              <template slot-scope="scope">
                <image-preview
                  :src="scope.row.cameraImage"
                  :width="100"
                  :height="60"
                />
              </template>
            </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.cameraId)"
                >
                  删除
                </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="cameraPosition">
          <el-input
            :disabled="
              visibleType !== 'addPosition' && visibleType !== 'editPosition'
            "
            v-model="form.cameraPosition"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="visibleType === 'addCamera' || visibleType === 'editCamera'"
          label="摄像头名称"
          prop="cameraName"
        >
          <el-input v-model="form.cameraName"></el-input>
        </el-form-item>
        <el-form-item
          v-if="visibleType === 'addCamera' || visibleType === 'editCamera'"
          label="视频地址"
          prop="cameraAddress"
        >
          <el-input v-model="form.cameraAddress"></el-input>
        </el-form-item>
        <el-form-item
          v-if="visibleType === 'addCamera' || visibleType === 'editCamera'"
          label="摄像头封面"
          prop="cameraImage"
        >
          <image-upload :value="form.cameraImage" @input="getImageUrl" />
        </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>
import {
  getCameraList,
  addCamera,
  updateCamera,
  delCamera,
  getCameraPositionList,
  addCameraPosition,
  updateCameraPosition,
  delCameraPosition,
} from "@/api/business/cameraconfig.js";

export default {
  name: "Cameraconfig",
  props: {},
  components: {},
  data() {
    return {
      data: [],
      treeProps: {
        // tree节点配置
        label: "positionName",
        children: "children",
      },
      id: 11,
      dialogVisible: false,
      /**
       * 新增摄像头 addCamera
       * 新增摄像头位置 addPosition
       * 编辑摄像头 editCamera
       * 编辑摄像头位置 editPosition
       */
      visibleType: "addPosition",
      form: {
        cameraPosition: "",
        cameraImage: "", // 确保初始化为空字符串而不是 null
      },
      rules: {
        cameraPosition: [
          { required: true, message: "请输入摄像头地址", trigger: "blur" },
        ],
        cameraName: [
          { required: true, message: "请输入摄像头名称", trigger: "blur" },
        ],
        cameraAddress: [
          { required: true, message: "请输入视频地址", trigger: "blur" },
        ],
      },
      selectedData: null, // 新增变量，用于保存当前选中的节点数据
      state: "", // 搜索框的值
      clickData: {
        positionId: null, // 点击的id
        positionName: null, // 点击的名称
      }, // 点击的id
      /**table数据 */
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getCameraPositionList();
    this.getList();
  },
  mounted() {},
  methods: {
    /**
     * 树状操作部分
     */
    getCameraPositionList() {
      getCameraPositionList().then((res) => {
        this.data = res.data;
      });
    },
    // 添加摄像头位置
    append(data) {
      this.dialogVisible = true;
      this.selectedData = data; // 保存当前操作的节点数据
      this.visibleType = "addPosition"; // 设置为添加摄像头位置
      this.form.cameraPosition = ""; // 清空表单数据
    },
    //编辑
    edit(node, data) {
      this.dialogVisible = true;
      this.selectedData = data; // 保存当前操作的节点数据
      this.form.cameraPosition = data.positionName; // 编辑时填充表单数据
      this.visibleType = "editPosition"; // 设置为编辑摄像头位置
    },
    //删除
    remove(node, data) {
      delCameraPosition(data.positionId).then((res) => {
        if (res.code === 200) {
          this.getCameraPositionList();
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },
    // 弹窗状态重置
    resetForm() {
      this.dialogVisible = false;
      this.form = { cameraPosition: "" };
      this.selectedData = null;
    },
    // 优化后的确认方法
    conform() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        //新增摄像头信息
        if (this.visibleType === "addCamera") {
          addCamera({ ...this.form }).then((res) => {
            if (res.code === 200) {
              this.$modal.msgSuccess("添加成功");
              this.getList();
            } else {
              this.$modal.msgError(res.msg);
            }
          });
        }
        //编辑摄像头信息
        if (this.visibleType === "editCamera") {
          updateCamera({ ...this.form }).then((res) => {
            if (res.code === 200) {
              this.$modal.msgSuccess("编辑成功");
              this.getList();
            } else {
              this.$modal.msgError(res.msg);
            }
          });
        }

        //新增摄像头位置
        if (this.visibleType === "addPosition") {
          // this.handleConfirmAdd();
          let param = {
            cameraPosition: this.form.cameraPosition,
            parentId: this.clickData.positionId,
          };
          addCameraPosition(param).then((res) => {
            if (res.code === 200) {
              this.getCameraPositionList();
            } else {
              this.$modal.msgError(res.msg);
            }
          });
        }
        //编辑摄像头位置
        if (this.visibleType === "editPosition") {
          let param = {
            cameraPosition: this.form.cameraPosition,
            positionId: this.clickData.positionId,
          };
          updateCameraPosition({ ...param }).then((res) => {
            if (res.code === 200) {
              this.getCameraPositionList();
            } else {
              this.$modal.msgError(res.msg);
            }
          });
        }
        this.resetForm();
      });
    },
    //选中的tree数据
    handleClickChange(data, checked, indeterminate) {
      this.clickData = data;
      this.getList();
    },
    closeTag() {
      this.clickData = {
        positionId: null, // 点击的id
        positionName: null, // 点击的名称
      };
      this.getList();
    },
    getImageUrl(val) {
      this.form.cameraImage = val;
    },
    /**
     * 表格操作部分
     */
    // 搜索框
    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.form.cameraPosition = this.clickData.positionName;
      this.form.positionId = this.clickData.positionId;
      this.dialogVisible = true;
    },
    //导出按钮操作
    handleExport() {
      this.download(
        "/system/cameraConfig/export",
        {
          ...this.queryParams,
        },
        `摄像头列表_${new Date().getTime()}.xlsx`
      );
    },
    //获取表格数据
    getList() {
      getCameraList({
        ...this.queryParams,
        positionId: this.clickData.positionId,
      }).then((res) => {
        this.tableList = res.rows;
        this.total = res.total;
      });
    },
    //表格编辑
    tableEdit(data) {
      this.form = { ...data };
      this.dialogVisible = true;
      this.visibleType = "editCamera";
    },
    //表格删除
    tableDelete(id) {
      delCamera(id).then((res) => {
        if (res.code === 200) {
          this.getList();
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },
  },
};
</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>
