<!-- 目录管理 -->
<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-tree>
     </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="(e)=>{selectType(e)}">地图MR</a-checkbox>
              <a-checkbox v-model:checked="checked.checked2" @change="(e)=>{selectType(e)}">场景ER</a-checkbox>
              <a-checkbox v-model:checked="checked.checked3" @change="(e)=>{selectType(e)}">文件数据DR</a-checkbox> -->
              <a-checkbox-group v-model:value="checked" name="checkboxgroup" :options="plainOptions" @change="(checkedValue) => {selectType(checkedValue)}"/>
            </a-col>
            <a-col :span="5">
              坐标系：<a-select
                ref="select"
                :value="coordinateSearchvalue"
                size="small"
                style="width: 150px"
                @change="handleChange"
              >
              <a-select-option v-for="item in coordinateData" :key="item.ID" :value="item.GEOMNAME">{{ 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> -->
              <a-checkbox-group v-model:value="useValue" name="checkboxgroup" :options="usedResourceData" @change="(checkedValue1) => {selectUsedData(checkedValue1)}">
                <a-row :gutter="24">
                  <a-col :span="12" v-for="item in usedResourceData" :key="item.serviceid" :value="item.serviceid">
                    <a-checkbox></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" @click="addAssociateData">添加关联</a-button>
            </a-col>
            <a-col>
              <a-button type="primary" danger style="margin-top: 20px;" @click="cancelAssociateData">移除关联</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">
              <!-- <a-checkbox-group v-model:value="associatedValue">
                <a-row :gutter="24">
                  <a-col :span="12" v-for="item in associatedData" :key="item.serviceid" :value="item.serviceid">
                    <a-checkbox>{{ item.servicename }}</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group> -->
              <a-checkbox-group v-model:value="cancleUseValue" name="checkboxgroup" :options="associatedData" @change="(checkedValue) => {cancleUsedData(checkedValue)}">
                <a-row :gutter="24">
                  <a-col :span="12" v-for="item in associatedData" :key="item.serviceid" :value="item.serviceid">
                    <a-checkbox></a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </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, ref, watch, reactive, onMounted  } from 'vue';
import { message } from 'ant-design-vue';
import { getDirectoryTreeList, addTreeNode } from '/@/api/sys/gis';
import Guid from 'guid'

export default defineComponent({

  setup() {
    let coordinateChangeValue = ref('2000坐标系4490')
    let typeChangeValue = ref('MR,SR,ER,DR,DT')
    let clickTreeNode = ref('')
    // 生命周期函数
    onMounted(() => {
      getTreeList()
      getcoordinateData()
      getUsedResource(coordinateChangeValue.value, typeChangeValue.value)
    })
    // 获取树的节点列表
    let searchCategory = ref([])  // 搜索框数据
    let treeData = ref([]) // 树的数据
    let treeSearchValue = ref('') // 树的搜索值
    let inputSearchValue = ref('') // 头部搜索框的数据
    const 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 == '') {
              searchCategory.value.push(item)
            }
          })
          inputSearchValue = searchCategory.value[0].id
          // 找出树形数据
          searchCategory.value.forEach((item1) => {
            data.forEach((item2) => {
              if (item1.id == item2.pid) {
                treeData.value.push(item2)
              }
            })
          })
        }
      });
    }

    // 请求坐标系数据
    let coordinateData = ref([]) // 坐标系数据
    let coordinateSearchvalue = ref('2000坐标系4490')
    const 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) {
          coordinateData.value = JSON.parse(res.result)
        }
      })
    }

    // 坐标系下拉框处理函数
    const handleChange = value1 => {
      coordinateChangeValue.value = value1
      getUsedResource(coordinateChangeValue.value, typeChangeValue.value)
      getAssociatedData(clickTreeNode.value, coordinateChangeValue.value)
    }

    // 请求可用资源
    let usedResourceData = ref([]) // 可使用资源数据
    const getUsedResource = (value1, value2) => {
      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[]', value2)
      directoryFormData.append('args[]', '')
      directoryFormData.append('args[]', value1)
      console.log("参数"+JSON.stringify(directoryFormData))
      addTreeNode(directoryFormData).then((res) => {
        if (res.status == 0) {
          const data = JSON.parse(res.result)
          console.log("可使用数据" + JSON.stringify(data))
          usedResourceData.value = data.items
          usedResourceData.value.forEach((item) => {
            item['label'] = item.servicename
            item['value'] = item.serviceid
          })
          console.log("可使用数据@@@@@@@" + JSON.stringify(usedResourceData))
        }
      })
    }

    // 选择可用数据
    let useValue = ref([])
    const selectUsedData = (value) => {
      console.log("可使用数据"+JSON.stringify(value))
      useValue.value = value
    }

    // 顶部复选框处理函数
    let checked = ref(['MR','DR','ER']) // 复选框
    const plainOptions = ref([{
      label: '地图MR',
      value: 'MR',
    },{
      label: '场景DR',
      value: 'DR',
    },{
      label: '文件数据ER',
      value: 'ER',
    }])
    const selectType = (e) => {
      let typeValue = e.toString()
      typeChangeValue.value = typeValue
      getUsedResource(coordinateChangeValue.value, typeChangeValue.value)
    }

    // 点击树节点函数
    const select = (selectedKeys, e) => {
      console.log("点击树的数据" + JSON.stringify(selectedKeys))
      console.log("点击树的数据e" + e)
      clickTreeNode.value = selectedKeys
      getAssociatedData(clickTreeNode.value, coordinateChangeValue.value)
    }

    // 得到已经关联的数据
    let associatedData = ref([]) //已关联数据
    const getAssociatedData = ( value1, value2) => {
      const gisToken = sessionStorage.getItem('gisToken')
      let directoryFormData = new FormData()
      directoryFormData.append('interfaceName', 'antu.space.provider.sservicebase.SServicebaseProvider')
      directoryFormData.append('methodName', 'getByDids')
      directoryFormData.append('args[]', gisToken)
      directoryFormData.append('args[]', value1)
      directoryFormData.append('args[]', value2)
      addTreeNode(directoryFormData).then((res) => {
        if (res.status == 0) {
          console.log('%%%%' + JSON.stringify(res))
          let data = JSON.parse(res.result)
          associatedData.value = data
          associatedData.value.forEach((item) => {
            item['label'] = item.servicename
            item['value'] = item.serviceid
          })
        }
      })
    }

    // 添加关联数据
    const addAssociateData = () => {
      const gisToken = sessionStorage.getItem('gisToken')
      let associatedValueArr = []
      useValue.value.forEach((item) => {
        let associatedValue = {
          id: Guid.raw(),
          serviceid: item,
          servicename: '',
          did: clickTreeNode.value[0],
          dname: '',
        }
        associatedValueArr.push(associatedValue)
      })
      console.log("参数"+JSON.stringify(associatedValueArr))
      let directoryFormData = new FormData()
      directoryFormData.append('interfaceName', 'antu.space.provider.sbdc.SBDCProvider')
      directoryFormData.append('methodName', 'insertList')
      directoryFormData.append('args[]', gisToken)
      directoryFormData.append('args[]', JSON.stringify(associatedValueArr))
      console.log("参数"+JSON.stringify(directoryFormData))
      addTreeNode(directoryFormData).then((res) => {
        if (res.status == 0) {
          console.log('%%%%' + JSON.stringify(res))
          // let data = JSON.parse(res.result)
          // associatedData.value = data
        }
      })
    }

    // 选择取消关联的数据
    let cancleUseValue = ref([])
    const cancleUsedData = (value) => {
      console.log("取消可使用数据"+JSON.stringify(value))
    }

    // 取消关联数据
    const cancelAssociateData = () => {
      const gisToken = sessionStorage.getItem('gisToken')
      let directoryFormData = new FormData()
      directoryFormData.append('interfaceName', 'antu.space.provider.sbdc.SBDCProvider')
      directoryFormData.append('methodName', 'deleteByDidAndServiceIds')
      directoryFormData.append('args[]', gisToken)
      directoryFormData.append('args[]', clickTreeNode.value)
      directoryFormData.append('args[]', cancleUseValue.value.toString())
      console.log("参数" + JSON.stringify(directoryFormData))
      addTreeNode(directoryFormData).then((res) => {
        if (res.status == 0) {
          console.log('666666' + JSON.stringify(res))
          // let data = JSON.parse(res.result)
          // associatedData.value = data
        }
      })
    }

    return {
      coordinateChangeValue,
      typeChangeValue,
      searchCategory,
      treeData,
      treeSearchValue,
      inputSearchValue,
      handleChange,
      getTreeList,
      coordinateData,
      coordinateSearchvalue,
      getcoordinateData,
      usedResourceData,
      getUsedResource,
      checked,
      plainOptions,
      selectType,
      select,
      associatedData,
      getAssociatedData,
      useValue,
      selectUsedData,
      addAssociateData,
      cancleUseValue,
      cancleUsedData,
      cancelAssociateData,
    };
  },

});
</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>
