<template>
    <div>
        <ap-search-pick ref="orgPick" :options.sync="opts" :param="param" :afterConfirm="afterConfirm"></ap-search-pick>
    </div>
</template>

<script>

import OrgBase from "./OrgBase";
import ApSearchPick from 'ap-frame/frame/components/ApSearchPick';
import {handleDefaultParams} from "ap-util/util/ObjectUtil";

export default {
    name: "OrgPick",
    components: {ApSearchPick},
    extends: OrgBase,
    props: {
        options: {
            type: Object,
            required: true
        },
        orgValue: {
            type: String | Number,
            required: false,
            default: ''
        },
        afterConfirm: {
            type: Function,
            required: false
        },
        param: {
            type: Object,
            required: false
        }
    },
    data() {
        return {
            opts: {},
            dataKey: "fdName"
        }
    },
    watch: {
        orgValue(value) {
            this.opts.searchPickValue = this.orgValue;
            if (this.$refs.orgPick) {
                this.$refs.orgPick.initText(this.orgValue);
            }
        }
    },
    created() {
        let searchPickTreeOptions = handleDefaultParams(this.options.searchPickTreeOptions, {
            searchTreeUrl: "/apm/open/org/getOrgList",
            searchTreeSelectMultiple: true,
            searchTreeExpandAll: false,
            searchTreeCheckStrictly: false,
        });
        let searchPickTableOptions = handleDefaultParams(this.options.searchPickTableOptions, {
            initData: false,
            dataUrl: "/apm/open/org/getPersonGridList",
            title: "人员列表",
            params: {},
            columns: [
                {
                    prop: 'fdName',
                    label: '名称',
                    type: 'input',
                    width: '120px'
                }, {
                    prop: 'fdNo',
                    label: '工号',
                    type: 'input',
                    width: '100px'
                }, {
                    prop: 'fdEmail',
                    label: '邮箱',
                    type: 'input'
                }, {
                    prop: 'fdDeptName',
                    label: '部门名称',
                    type: 'input'
                }],
            multiSelect: true,
        });
        // 默认参数设定
        this.opts = handleDefaultParams(this.options, {
            searchPickText: "请选择人员",
            searchPickValue: this.orgValue,
            searchPickTitle: "人员选择",
            searchPickWidth: "1000px",
            searchPickTableParamKey: {selectedKey: "deptIds", filterKey: "likeStr"},
            searchPickTextUrl: "/apm/open/org/getPersonNameByIds",
            searchPickConfirm: (selectData) => {
                // 多选
                if (Array.isArray(selectData)) {
                    let labelArr = selectData.map(item => item.fdName);
                    let valueArr = selectData.map(item => item.fdId);
                    this.opts.searchPickText = labelArr.join(',');
                    this.opts.searchPickValue = valueArr.join(',');
                } else {
                    // 单选
                    if (selectData) {
                        this.opts.searchPickText = selectData.fdName;
                        this.opts.searchPickValue = selectData.fdId;
                    } else {
                        this.opts.searchPickText = ''
                        this.opts.searchPickValue = ''
                    }
                }
                this.setOrgValue(this.opts.searchPickValue);
                return true;
            },
            searchPickClear: () => {
                this.opts.searchPickText = "";
                this.opts.searchPickValue = "";
                this.setOrgValue("");
                return true;
            }
        });
        this.opts.searchPickTreeOptions = searchPickTreeOptions;
        this.opts.searchPickTableOptions = searchPickTableOptions;

    },
    mounted: function () {

    },
    methods: {}
}
</script>

<style scoped>
</style>
