# 使用

```
import React, { useState } from 'react'
import { Button, Table } from 'fish'
import { PlatformResourceSelector } from '@x-edu/platform-resource-selector'
import { uc } from '@/util/auth/func'
import authConfig from '@/config/env'

const config = {
  uc, //uc实例
  sdpAppId: authConfig.app.appid, //sdp-app-id
  env: authConfig.env, // 环境变量
  preview: true,
  width: 800,
  height: 900,
  limit: 1
}

export default function Demo() {
  const [selection, setSelection] = useState([])
  const [visible, setVisible] = useState(false)

  const handleClick = () => {
    setVisible(true)
  }

  const handleComplete = (_selection) => {
    console.info('[DEV]选中的资源为', _selection)
    setSelection(_selection)
    setVisible(false)
  }

  const handleCancel = () => {
    setVisible(false)
  }

  const handleDelete = (item) => {
    alert(`delete ${item.name}`)
  }

  return (
    <div>
      <Button
        type="primary"
        // eslint-disable-next-line
        style={{ marginRight: 8 }}
        onClick={handleClick}
      >
        从共享资源库选择
      </Button>
      <span>
        允许添加
        {config.limit}
        {' '}
        个资源
      </span>
      {
        selection.length > 0 && (
          <Table
            indexKey="id"
            style={{
              marginTop: 8
            }}
            minHeight={140}
            columns={[{
              title: '资源名称',
              dataIndex: 'title',
              key: 'title',
              width: 120
            }, {
              title: '资源类型',
              dataIndex: 'content_type',
              key: 'content_type',
              width: 120
            }, {
              title: '资源来源',
              dataIndex: 'source_type',
              key: 'source_type',
              width: 120
            }, {
              title: '操作',
              width: 120,
              key: 'action',
              render: (row) => (
                <>
                  <Button type="text">预览</Button>
                  <Button type="text" onClick={() => handleDelete(row)}>删除</Button>
                </>
              )
            }]}
            dataSource={selection}
            showIndex
            pagination={false}
          />
        )
      }
      <PlatformResourceSelector
        config={config}
        visible={visible}
        onComplete={handleComplete}
        onCancel={handleCancel}
      />
    </div>
  )
}

```

# API
| 属性 | 说明                      | 类型 | 默认值 |
| -----|-------------------------| -- | ---- |
| config | 配置 | configVo | - |
| visible | 是否显示                  | Boolean | - |
| onComplete | 确认选择 | ()=>  selectionInfo[]       | - |
| onCancel | 取消 | Function            | - |
| selection | 选中的资源 | selectionInfo[]            | - |

## onComplete(selectionInfo[])
https://zxxedu.yuque.com/xv0o5a/dxkbyq/pbbrpga7mvnmx9ng?singleDoc# 《区域后台资源选择器》 密码：eg5s

## configVo
```
{
  uc, //uc实例
  sdpAppId: authConfig.app.appid, //sdp-app-id
  sdpOrgId:'',
  env: authConfig.env, // 环境变量
  preview: true,
  width: 800,
  height: 900,
  limit: 1
}
```

## selectionInfo
```
const selectionInfo = {
    editInfo: {
      name: string,
      id: string,
      libraryId: string,
      platform: string,
      contentType: string,
      cover: string
    },
    selectInfo: {
      name: string,
      id: string,
      libraryId: string,
      platformHost: string,
      platformZoneCode: string,
      contentType: string,
      cover: string,
      platformId: string // 区域平台id
    }
  }
```

# 开发

## 安装依赖

```
npm install @x-edu/platform-resource-selector -S
```

## 开发调试

```
npm run dev:doc
```

## 本地构建

```
npm run build
```