<template>
    <div style="height: 100%">
        <h3>组织架构组件：ap-org</h3>
        <api-tittle-2>一、示例:</api-tittle-2>
        <div>
            <div>
                1、部门树[org-tree]：{{ orgTreeValue }}<br>
                <div style="width: 300px">
                    <ap-org :options.sync="orgTree" v-model="orgTreeValue"></ap-org>
                    <api-code>{{ js1 }}</api-code>
                </div>
                2、部门[org-select]：{{ orgSelectValue }}<br>
                <div style="width: 300px">
                    <ap-org :options.sync="orgSelect" v-model="orgSelectValue"></ap-org>
                    <api-code>{{ js2 }}</api-code>
                </div>
                3、人员选择[org-pick]：{{ orgPickValue }}<br>
                <div style="width: 300px">
                    <ap-org :options.sync="orgPick" v-model="orgPickValue"></ap-org>
                    <api-code>{{ js3 }}</api-code>
                </div>
            </div>
        </div>
        <api-tittle-2>二、参数说明:</api-tittle-2>
        1、部门树相关的参数：type -> org-tree
        <api-table :data="attrData1" :columns="attrCols1" style="height:390px;"/>
        2、部门下拉相关的参数：type -> org-select
        <api-table :data="attrData2" :columns="attrCols1" style="height:270px;"/>
        3、人员相关的参数：type -> org-pick
        <api-table :data="attrData3" :columns="attrCols1" style="height:800px;"/>
    </div>
</template>

<script>
import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'

export default {
    name: 'ApiApOrg',
    components: {
        ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
    },
    data() {
        const attrCols1 = [
            {label: '名称', prop: 'name', width: '180px'},
            {label: '类型', prop: 'type', width: '100px'},
            {label: '默认值', prop: 'default', width: '80px'},
            {label: '描述', prop: 'memo', minWidth: '100px'},
            {label: '示例代码', prop: 'code', minWidth: '100px'}]

        const attrData1 = [
            {
                name: 'type',
                type: '类型',
                default: '',
                memo: 'type: "org-tree"<br>组织部门树',
            }, {
                name: 'params',
                type: '对象',
                default: '见描述',
                memo: '默认参数{companyId: "登录用户公司别", disabled:"0"}<br>' +
                    '参数说明：<br>companyId: 公司别过滤：默认登录用户公司；ALL表示全部 ' +
                    '<br>disabled：是否失效过滤：0有效(默认)；1失效；all表示全部'
            }, {
                name: 'multiSelect',
                type: '布尔',
                default: 'false',
                memo: '是否多选。默认false单选，true多选。'
            }, {
                name: 'fullName',
                type: '布尔',
                default: 'false',
                memo: '是否显示全称。默认false简称，true全称(带父部门)。'
            }, {
                name: 'clear',
                type: '方法',
                default: '',
                memo: '点击清空回调方法：返回true关闭弹框，false不关闭弹框',
                code: `<div class="api-code">clear: () => {return true;}</div>`
            }, {
                name: 'confirm',
                type: '方法',
                default: '',
                memo: '点击确定回调方法：返回true关闭弹框，false不关闭弹框',
                code: `<div class="api-code">confirm: (selectedRows) => {return true;}</div>`
            }, {
                name: '其他参数',
                type: '',
                default: '',
                memo: '参考【ap-search-tree】组件'
            }
        ]

        const attrData2 = [
            {
                name: 'type',
                type: '类型',
                default: '',
                memo: 'type: "org-select"<br>组织部门下拉<br>注：数据源是组织分组的数据',
            }, {
                name: 'params',
                type: '对象',
                default: '见描述',
                memo: '默认参数{code: "组织分组编码", companyId:"登录用户公司别"}<br>' +
                    '参数说明：<br>companyId: 公司别过滤：默认登录用户公司；ALL表示全部 ' +
                    '<br>code：[必填]组织分组编码'
            }, {
                name: 'addOptions',
                type: '数组',
                default: 'false',
                memo: '添加的下拉选项，见示例',
                code: `<div class="api-code">addOptions:[{label: "全部", value: "all"},{label: "无", value: ""}]</div>`
            }
        ]

        const attrData3 = [
            {
                name: 'type',
                type: '类型',
                default: '',
                memo: 'type: "org-pick"<br>组织人员选择',
            }, {
                name: '常用参数',
                type: '',
                default: '',
                memo: '见示例代码',
                code: `// 配置表格单选
                searchPickTableOptions: {
                    multiSelect: false,
                }`
            }, {
                name: 'searchPickConfirm',
                type: '方法',
                default: '省略',
                memo: '默认更新v-mode的值，可自定义',
                code: `// 自定义确认方法
                 searchPickConfirm: (selectData) => {}`
            }, {
                name: 'afterSearchPickConfirm',
                type: '方法',
                default: '省略',
                memo: '确认方法执行后回调',
                code: `// searchPickConfirm返回true时才调用
                 afterSearchPickConfirm: () => {}`
            }, {
                name: 'searchPickClear',
                type: '方法',
                default: '省略',
                memo: '默认清空v-mode的值，可自定义',
                code: `// 自定义取消方法
                 searchPickClear: () => {}`
            }, {
                name: 'afterSearchPickClear',
                type: '方法',
                default: '省略',
                memo: '清空方法执行后回调义',
                code: `// searchPickClear返回true时才调用
                 afterSearchPickClear: () => {}`
            }, {
                name: '其他参数',
                type: '',
                default: '',
                memo: '参考【ap-search-pick】组件'
            }, {
                name: ':param  :afterConfirm',
                type: '',
                default: '',
                memo: `适用于类似表格，动态加载参数场景。
                param: 传到afterConfirm方法的参数
                afterConfirm: 确认选择afterSearchPickConfirm执行完后执行。带两个参数，param和弹出框选择行`,
                code: `&lt;ap-table :options.sync="xxx"&gt;<br>
                    &lt;template #person="slotProps"&gt;<br>
                        &lt;ap-search-pick ref="orgPick" :options.sync="opts" :param="slotProps.rowData" :afterConfirm="afterSelectPerson"&gt;&lt;/ap-search-pick&gt;<br>
                    &lt;/template&gt;<br>
                &lt;/ap-table&gt;<br>
                <br>
                afterSelectPerson(param, info) {<br>
                    param.xxx = info.xxx; // 表格行赋值<br>
                    param.changeArr.push("xxx")<br>
                }<br>`
            }
        ]

        const js1 = `// 1、部门树选择组件：
<ap-org :options.sync="orgTree" v-model="orgTreeValue"></ap-org>

// 2、data参数：
orgTreeValue: "",
orgTree: {
    type: "org-tree",
    multiSelect: true,
    fullName: true
}`;
        const js2 = `// 1、部门下拉组件：
<ap-org :options.sync="orgSelect" v-model="orgSelectValue"></ap-org>

// 2、data参数：
orgSelectValue: "",
orgSelect: {
    type: "org-select",
    multiSelect: false,
    addOptions: [{label: "无", value: ""}],
    params: () => {
        return {
            code: "ap-default-company",
            companyId: "ALL"
        }
    }
}`
        const js3 = `// 1、人员选择组件：
<ap-org :options.sync="orgPick" v-model="orgPickValue"></ap-org>

// 2、data参数：
orgPickValue: "",
orgPick: {
    type: "org-pick",
    searchPickValue: ""
}`
        return {
            attrCols1,
            attrData1,
            attrData2,
            attrData3,
            js1,
            js2,
            js3,
            orgTreeValue: "",
            orgTree: {
                type: "org-tree",
                multiSelect: true,
                fullName: true
            },
            orgSelect: {
                type: "org-select",
                multiSelect: false,
                addOptions: [{label: "无", value: ""}],
                params: () => {
                    return {
                        code: "ap-default-company",
                        companyId: "ALL"
                    }
                }
            },
            orgSelectValue: "",
            // orgSelectValue: [ "93f1d90583ea4588b561bcc6f1a7f349" ]
            orgPickValue: "",
            orgPick: {
                type: "org-pick",
                searchPickValue: ""
            },

        }
    },
    methods: {}
}
</script>

<style scoped>
</style>
