<!-- 目录管理 -->
<template>
  <div style="height: 100%; width: 100%; padding: 0; margin: 0">
    <!-- 头部 -->
    <div class="head">
      <a-card class="box-card" body-style="{height:'100%'}">
        <a-row>
          <a-col :span="10">
            <a-select ref="select" style="width: 220px" :value="inputSearchValue">
              <a-select-option v-for="item in searchCategory" :key="item.id" :value="item.id">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <!-- 左边 -->
    <div class="mains">
      <div class="left">
        <a-card class="box-card" body-style="{height:'100%'}">
          <a-input-search
            :value="TreeSearchValue"
            style="margin-bottom: 8px"
            placeholder="搜索关键字"
          />
          <a-tree :tree-data="treeData" @select="select" />
        </a-card>
      </div>
      <!-- 右边 -->
      <div class="right">
        <div class="right-top">
          <a-card class="box-card" body-style="{height:'100%'}">
            <div
              style="
                border-bottom-style: solid;
                border-bottom-width: 1px;
                border-bottom-color: #ddd;
                height: 40px;
                padding: 10px;
                padding-top: 0px;
                margin-top: 0px;
              "
            >
              <a-row>
                <a-col :span="10"
                  ><span style="font-weight: 700; font-size: 16px">节点编辑</span>
                </a-col>
                <a-col :span="13">
                  <a-row type="flex" justify="end">
                    <a-col :span="4">
                      <a-button @click="addTreeChildNode">添加子节点</a-button>
                    </a-col>
                    <a-col :span="4">
                      <a-button type="primary" @click="addTreeNode">添加节点</a-button>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </div>
            <a-form
              :model="formState"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 15 }"
              style="margin-top: 20px"
              layout="horizontal"
            >
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-item label="名称">
                    <a-input v-model:value="formState.name" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="别名">
                    <a-input v-model:value="formState.alaisename" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="排序">
                    <a-input v-model:value="formState.sortindex" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-item label="描述">
                    <a-textarea v-model:value="formState.remark" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
            <a-row type="flex" justify="center" style="margin-top: 60px">
              <a-col :span="4">
                <a-button type="primary" @click="editNode" :disabled="editBtuState"
                  >保存节点</a-button
                >
              </a-col>
            </a-row>
          </a-card>
        </div>

        <div class="right-bottom">
          <a-card class="box-card" body-style="{height:'100%'}">
            <div
              style="
                border-bottom-style: solid;
                border-bottom-width: 1px;
                border-bottom-color: #ddd;
                height: 40px;
                padding: 10px;
                padding-top: 0px;
              "
            >
              <a-row>
                <a-col :span="10"
                  ><span style="font-weight: 700; font-size: 16px">操作记录</span>
                </a-col>
              </a-row>
            </div>
          </a-card>
        </div>
      </div>
    </div>
    <a-modal v-model:visible="visible" title="添加节点" @ok="handleOk" width="50%">
      <div style="margin: 10px">
        <a-form :model="formState2" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
          <a-row>
            <a-col :span="10">
              <a-form-item label="上级节点">
                <a-input v-model:value="formState2.pName" :disabled="true" />
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item label="名称">
                <a-input v-model:value="formState2.name" />
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item label="别名">
                <a-input v-model:value="formState2.alaisename" />
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item label="分类">
                <a-input v-model:value="formState2.type" :disabled="true" />
              </a-form-item>
            </a-col>
            <a-col :span="20">
              <a-form-item label="描述">
                <a-textarea v-model:value="formState2.remark" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { getDirectoryTreeList, addTreeNode } from '/@/api/sys/gis';
  import Guid from 'guid';

  export default defineComponent({
    setup() {
      const visible = ref(false);
      return {
        visible,
      };
    },

    data() {
      return {
        // 搜索框数据
        searchCategory: [],
        // 树的搜索值
        treeSearchValue: '',
        // 树形数据
        treeData: [],
        // 表单数据
        formState: {
          id: '',
          pid: '',
          pName: '',
          name: '',
          alaisename: '',
          type: '',
          remark: '',
          sortindex: '',
        },
        // 头部搜索框的值
        inputSearchValue: '',
        // 控制新增弹窗显示
        // eslint-disable-next-line vue/no-dupe-keys
        visible: false,
        // 新增弹窗表单
        formState2: {
          pid: '',
          pName: '',
          name: '',
          alaisename: '',
          type: 0,
          remark: '',
          sortindex: '',
        },
        // 节点和子节点新增区别
        type: '',
        // 父级id
        pid: '',
        // 编辑按钮使用状态
        editBtuState: true,
      };
    },

    mounted() {
      this.getTreeList();
    },

    methods: {
      //获取树节点列表
      getTreeList() {
        const gisToken = sessionStorage.getItem('gisToken');
        let directoryFormData = new FormData();
        directoryFormData.append(
          'interfaceName',
          'antu.space.provider.sdatacatlog.SDataCatlogProvider'
        );
        directoryFormData.append('methodName', 'findList');
        directoryFormData.append('args[]', gisToken);
        directoryFormData.append('args[]', '');
        getDirectoryTreeList(directoryFormData).then((res) => {
          if (res.status == 0) {
            const data = JSON.parse(res.result);
            console.log('获取设备列表2:', data);
            // 让每层带上自己的孩子节点、title、key
            data.forEach((item) => {
              item['title'] = item.name;
              item['key'] = item.id;
              data.forEach((item2) => {
                if (item.id == item2.pid) {
                  if (item.children) {
                    item.children.push(item2);
                  } else {
                    item['children'] = [];
                    item.children.push(item2);
                  }
                }
              });
            });
            console.log('11111111111:', data);
            // 找出搜索框数据
            data.forEach((item) => {
              if (item.pid == '') {
                this.searchCategory.push(item);
              }
            });
            this.inputSearchValue = this.searchCategory[0].id;
            // 找出树形数据
            this.searchCategory.forEach((item1) => {
              data.forEach((item2) => {
                if (item1.id == item2.pid) {
                  this.treeData.push(item2);
                }
              });
            });
          }
        });
      },

      // 点击树节点
      select(value1, value2) {
        console.log('树的数据' + JSON.stringify(value2.selectedNodes[0].props));
        this.formState = { ...value2.selectedNodes[0].props };
        // const pid = { ...value2.selectedNodes[0].props };
        this.formState2.pid = value2.selectedNodes[0].props.id;
        console.log('222' + JSON.stringify(value2.selectedNodes[0].props));
        this.editBtuState = false;
      },

      // 添加树节点
      addTreeNode() {
        this.visible = true;
        this.type = 1;
        if (this.inputSearchValue) {
          this.searchCategory.forEach((item) => {
            if (this.inputSearchValue == item.id) {
              this.formState2.pName = item.name;
              this.formState2.pid = item.id;
            }
          });
        } else {
          //没有选择头部分类
        }
      },

      // 添加子节点
      addTreeChildNode() {
        // message.warning('请选择需要添加子节点的父节点！', 5);
        this.visible = true;
        this.type = 2;
      },

      // 新增弹窗提交新增数据
      handleOk() {
        if (this.type == 1) {
          console.log('表单数据' + JSON.stringify(this.formState2));
          const gisToken = sessionStorage.getItem('gisToken');
          this.formState2.id = Guid.raw();
          this.formState2.sortindex = this.treeData.length;
          let directoryFormData = new FormData();
          directoryFormData.append(
            'interfaceName',
            'antu.space.provider.sdatacatlog.SDataCatlogProvider'
          );
          directoryFormData.append('methodName', 'insert');
          directoryFormData.append('args[]', gisToken);
          directoryFormData.append('args[]', JSON.stringify(this.formState2));
          addTreeNode(directoryFormData).then((res) => {
            if (res.status == 0) {
              console.log('新增' + res);
              this.searchCategory = [];
              this.treeData = [];
              this.getTreeList();
              this.visible = false;
            }
          });
          this.type = '';
        } else if (this.type == 2) {
          console.log('表单数据2' + JSON.stringify(this.formState2));
          const gisToken = sessionStorage.getItem('gisToken');
          this.formState2.id = Guid.raw();
          // 排序
          // this.formState2.sortindex = this.treeData.length
          let directoryFormData = new FormData();
          directoryFormData.append(
            'interfaceName',
            'antu.space.provider.sdatacatlog.SDataCatlogProvider'
          );
          directoryFormData.append('methodName', 'insert');
          directoryFormData.append('args[]', gisToken);
          directoryFormData.append('args[]', JSON.stringify(this.formState2));
          addTreeNode(directoryFormData).then((res) => {
            if (res.status == 0) {
              console.log('新增' + res);
              this.searchCategory = [];
              this.treeData = [];
              this.getTreeList();
              this.visible = false;
            }
          });
          this.visible = false;
          this.type = '';
        }
      },
      // 修改节点
      editNode() {
        if (!this.editBtuState) {
          console.log('表单数据3' + JSON.stringify(this.formState));
          const gisToken = sessionStorage.getItem('gisToken');
          let editData = {
            id: this.formState.id,
            pid: this.formState.pid,
            name: this.formState.name,
            alaisename: this.formState.alaisename,
            type: this.formState.type,
            sortindex: this.formState.sortindex,
            remark: this.formState.remark,
          };
          let directoryFormData = new FormData();
          directoryFormData.append(
            'interfaceName',
            'antu.space.provider.sdatacatlog.SDataCatlogProvider'
          );
          directoryFormData.append('methodName', 'update');
          directoryFormData.append('args[]', gisToken);
          directoryFormData.append('args[]', JSON.stringify(editData));
          addTreeNode(directoryFormData).then((res) => {
            if (res.status == 0) {
              console.log('编辑' + res);
              this.searchCategory = [];
              this.treeData = [];
              this.getTreeList();
              this.editBtuState = true;
            }
          });
        }
      },
    },
  });
</script>

<style lang="scss" scoped>
  .head {
    padding: 10px;
    height: 74px;
    margin-right: 30px;
    margin-left: 10px;
  }
  .mains {
    .box-card {
      height: calc(100% - 0px);
    }

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    height: calc(100% - 74px);

    .left {
      height: calc(100% - 0px);
      width: 20%;
    }

    .right {
      display: flex;
      flex-direction: column; //设置主轴为y轴
      justify-content: flex-start; //子元素排列方式，
      align-items: center; //设置侧轴上子元素对齐方式
      padding: 20px;
      padding-top: 0;
      padding-bottom: 0;
      height: calc(100% - 0px);
      width: 100%;
      // height: 50%;
      // width: 78%;
      // margin-left: 1%;
      // margin-right: 1%;
      // border: 1px red solid;

      .right-top {
        height: 50%;
        width: 100%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 2%;

        .right-top-item {
          border-style: solid;
          border-width: 1px;
          border-color: #ddd;
          box-shadow: 0 0 10px #ddd;
          height: 250px;
          margin-top: 10px;
          padding: 10px;
        }
      }

      .right-bottom {
        height: 50%;
        width: 100%;
        margin-left: 1%;
        margin-right: 1%;

        .right-bottom-item {
          border-style: solid;
          border-width: 1px;
          border-color: #ddd;
          box-shadow: 0 0 10px #ddd;
          height: 250px;
          margin-top: 10px;
          padding: 10px;
        }
      }
    }
  }
</style>
