<!-- 目录管理 -->
<template>
  <div style="height: 100%; width: 100%; padding: 0; margin: 0">
    <!-- 左边 -->
    <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-head">
          <a-card>
            <a-row>
              <a-col :span="10">
                类型：
                <a-checkbox v-model:checked="checked.checked1" @change="selectType()"
                  >地图</a-checkbox
                >
                <a-checkbox v-model:checked="checked.checked2" @change="selectType()"
                  >场景</a-checkbox
                >
                <a-checkbox v-model:checked="checked.checked3" @change="selectType()"
                  >文件数据</a-checkbox
                >
              </a-col>
              <a-col :span="5">
                坐标系：<a-select ref="select" :value="value1" size="small" style="width: 150px">
                  <a-select-option v-for="item in coordinateData" :key="item.ID" :value="item.ID">{{
                    item.GEOMNAME
                  }}</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="5">
                资源名称：<a-input-search
                  v-model:value="value"
                  placeholder="支持名称搜索"
                  style="width: 150px"
                  size="small"
                  @search="onSearch"
                />
              </a-col>
              <a-col :span="4">
                <a-button type="primary" size="small">查询</a-button>
              </a-col>
            </a-row>
          </a-card>
        </div>
        <div class="right-content">
          <div class="right-content-left">
            <a-card style="height: 100%">
              <div class="right-content-head">
                <a-row>
                  <a-col :span="10"
                    ><span style="font-weight: 700; font-size: 16px">可用资源</span>
                  </a-col>
                </a-row>
              </div>
              <div class="right-content-bottom">
                <a-checkbox-group v-model:value="value">
                  <a-row :gutter="24">
                    <a-col
                      :span="12"
                      v-for="item in usedResourceData"
                      :key="item.serviceid"
                      :value="item.serviceid"
                    >
                      <a-checkbox>{{ item.servicename }}</a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </div>
              <a-pagination size="small" :total="50" :show-total="(total) => 'Total 50 items'" />
            </a-card>
          </div>
          <div class="right-content-middle">
            <a-row>
              <a-col>
                <a-button type="primary">添加关联</a-button>
              </a-col>
              <a-col>
                <a-button type="primary" danger style="margin-top: 20px">移除关联</a-button>
              </a-col>
            </a-row>
          </div>
          <div class="right-content-right">
            <a-card style="height: 100%">
              <div class="right-content-head">
                <a-row>
                  <a-col :span="10"
                    ><span style="font-weight: 700; font-size: 16px">已关联资源</span>
                  </a-col>
                </a-row>
              </div>
              <div class="right-content-bottom"> </div>
            </a-card>
          </div>
        </div>
      </div>
    </div>
    <!-- <a-modal :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" />
            </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, reactive } from 'vue';
  import { getDirectoryTreeList, addTreeNode } from '/@/api/sys/gis';

  export default defineComponent({
    setup() {
      return {
        checked: reactive({
          checked1: true,
          checked2: true,
          checked3: true,
        }),
      };
    },

    data() {
      return {
        // 搜索框数据
        searchCategory: [],
        // 树的搜索值
        treeSearchValue: '',
        // 树形数据
        treeData: [],
        // 头部搜索框的值
        inputSearchValue: '',
        // 坐标系数据
        coordinateData: [],
        //
        value1: '',
        // 可使用资源数据
        usedResourceData: [],
        // 复选框
        // eslint-disable-next-line vue/no-dupe-keys
        checked: {
          checked1: true,
          checked2: true,
          checked3: true,
        },
      };
    },

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

    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) {},

      // 请求坐标系数据
      getcoordinateData() {
        const gisToken = sessionStorage.getItem('gisToken');
        let directoryFormData = new FormData();
        directoryFormData.append(
          'interfaceName',
          'antu.space.provider.geomname.GeomNameCDProvider'
        );
        directoryFormData.append('methodName', 'getGeomNameList');
        directoryFormData.append('args[]', gisToken);
        directoryFormData.append('args[]', '');
        addTreeNode(directoryFormData).then((res) => {
          if (res.status == 0) {
            this.coordinateData = JSON.parse(res.result);
          }
        });
      },

      // 类型选择
      selectType(value1) {
        console.log('canshu' + JSON.stringify(value1));
        this.getUsedResource();
      },

      // 请求可用资源
      getUsedResource() {
        const gisToken = sessionStorage.getItem('gisToken');
        let directoryFormData = new FormData();
        directoryFormData.append(
          'interfaceName',
          'antu.space.provider.sservicebase.SServicebaseProvider'
        );
        directoryFormData.append('methodName', 'pageList');
        directoryFormData.append('args[]', gisToken);
        directoryFormData.append('args[]', '1');
        directoryFormData.append('args[]', '50');
        directoryFormData.append('args[]', '');
        directoryFormData.append('args[]', 'MR,SR,ER,DR,DT');
        directoryFormData.append('args[]', '');
        directoryFormData.append('args[]', '2000坐标系');

        addTreeNode(directoryFormData).then((res) => {
          if (res.status == 0) {
            const data = JSON.parse(res.result);
            this.usedResourceData = data.items;
            console.log('可使用数据' + JSON.stringify(this.usedResourceData));
          }
        });
      },
    },
  });
</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% - 0px);

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

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

      .right-head {
        width: 100%;
        height: 10%;
      }
      .right-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: calc(100% - 0px);
        margin-top: 20px;
        width: 100%;

        .right-content-left {
          width: 45%;
          height: calc(100% - 0px);
        }
        .right-content-middle {
          width: 10%;
          height: calc(100% - 0px);
          padding-left: 25px;
          padding-top: 320px;
        }
        .right-content-right {
          width: 45%;
          height: calc(100% - 0px);
        }
        .right-content-head {
          height: 40px;
        }
        .right-content-bottom {
          height: 600px;
          width: 100%;
          border-style: solid;
          border-width: 1px;
          border-color: #e9e9e9;
          // box-shadow:0 0 10px #ddd;
          padding: 20px;
        }
      }
    }
  }
</style>
