<!-- 数据审核 -->
<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">
    <!-- 使用搜索框和表格封装组件 -->
    <BasicTable
    :rowSelection="{ type: 'checkbox' }" 
    @register="registerTable"
    :clickToRowSelect="false"
    >
    <!-- 表格右上角按钮 -->
    <template #toolbar>
        <Authority :value="authList.verifyAuth">
          <a-button type="primary" @click="batchVerify" >批量审核</a-button>
        </Authority>
        <Authority :value="authList.uploadAuth">
          <Popconfirm
            title="您确定要批量下载数据"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDeleteOrBatchDelete(null)"
          >
            <a-button type="primary" color="error" :disabled="batchUpload"> 批量下载 </a-button>
          </Popconfirm>
        </Authority>
      </template>
      <!-- 表格操作栏 -->
      <template #action="{ record }">
        <TableAction
          :actions="[
                        {
              label: '浏览',
              auth: 'api:yt:role:saveOrUpdateRoleInfoWithMenu:update',
              icon: 'clarity:note-edit-line',//图标
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '查看',
              auth: 'api:yt:role:saveOrUpdateRoleInfoWithMenu:update',
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '审核',
              auth: 'api:yt:role:saveOrUpdateRoleInfoWithMenu:update',
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '下载',
              auth: 'api:yt:role:delete',
              icon: 'ant-design:delete-outlined',
              color: 'error',
              ifShow: true,
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDeleteOrBatchDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    </div>
  </div>
  </div>

</template>
<script>

import { defineComponent, ref, watch, reactive, onMounted, nextTick  } from 'vue';
// 引入封装的table
import { BasicTable, TableAction, useTable } from '/@/components/Table';
// 引入封装的权限识别
import { Authority } from '/@/components/Authority';
// 引入搜索框和表格表头
import { columns, searchFormSchema } from './dataReviewData';
// 引入删除
import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
import { message, Popconfirm } from 'ant-design-vue';
import { getDirectoryTreeList, addTreeNode } from '/@/api/sys/gis';
import { delRole } from '/@/api/system/system';

export default defineComponent({

  components: { BasicTable, Authority, Popconfirm, TableAction, },
  setup() {
    //按钮的权限控制标识
    const bottomAuthority = "api:dataresource:datareview:";
    const authList = {
      verifyAuth: bottomAuthority + "datareviewVerify",//审核权限控制
      uploadAuth: bottomAuthority + "datareviewUpload",//下载权限控制

    addAuth: bottomAuthority + "datareviewView",//浏览权限控制
    deleteAuth: bottomAuthority + "datareviewDetail",//详情权限控制
    editAuth: bottomAuthority + "datareviewVerify",//审核权限控制
    editAuth: bottomAuthority + "datareviewUpload",//下载权限控制
    }

    // 配置下方表格
    const [registerTable, { setProps, reload, setSelectedRowKeys }] = useTable({
      title: '资源审核', 
      // 分页查询请求函数
      // api: getMapListByPage,
      // 表头
      columns,
      // 查询条件框配置
      formConfig: {
        labelWidth: 80,
        schemas: searchFormSchema,
      },
      useSearchForm: true,
      showTableSetting: true,
      bordered: true,
      // 表格控制序号显示
      showIndexColumn: true,
      // 表格操作栏
        actionColumn: {
          width: 200,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },
      });

      // 配置删除
      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } = 
      useBatchDelete(delRole, setProps);

      // ???
      nextTick(() => {
        setProps(selectionOptions);
      });

      // 批量审核
      const batchVerify = () => {
        alert('批量审核')
      }

      // 批量下载
      const batchUpload = () => {
        alert('批量下载')
      }
    let clickTreeNode = ref('')
    // 生命周期函数
    onMounted(() => {
      getTreeList()
    })
    // 获取树的节点列表
    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)
              }
            })
          })
        }
      });
    }

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

    return {
      authList,
      registerTable,
      hasBatchDelete,
      handleDeleteOrBatchDelete,
      batchVerify,
      batchUpload,
      searchCategory,
      treeData,
      treeSearchValue,
      getTreeList,
      select,
    };
  },

});
</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% - 30px);
        width: 15%;
        }

    .right{
      height: 100%; 
      width: 85%; 
      margin-top: 0; 
      padding: 0;
    }

}
</style>
