import ElCheckbox from 'mars-pro/packages/checkbox';
import ElCheckboxGroup from 'mars-pro/packages/checkbox-group';
import ProAction from 'mars-pro/packages/pro-action';
export default {
    name: 'ProSelectCustomerExample',
    componentName: 'ProSelectCustomerExample',
    inheritAttrs: false,
    inject:['proselect'],
    components: {
        ElCheckbox,
        ElCheckboxGroup,
        ProAction
    },
    computed: {
        isOpenModal() { 
            return this.proselect.openModel === 'modal'
        },
        selectDatas() { 
            return this.proselect.selectDatas
        },
        selectValue() { 
            return this.proselect.value
        },
        isLoading() { 
            return this.proselect.isLoading
        }
    },
    watch: {
        //同步值
        selectValue: {
            immediate: true,
            handler: function (v) { 
                this.mvalues = v
            }
        }
    },
    data() {
        return {
            mvalues: null
        }
    },
    methods: {
        handleSelect(v) { 
            this.mvalues = v
        },
        handleCancel() { 
            this.proselect.handleClose()
        },
        handleOk() { 
            this.proselect.$emit('input', this.mvalues)
            this.handleCancel()
        }
    },
    render() { 
        const _datas = {
            props: {
                value: this.mvalues || []
            },
            on: {
                input: this.handleSelect
            }
        }
        return (
            <div style="width: 600px; padding: 10px;">
                <h1>这是一个自定义选择业务面板的例子</h1>
                { this.isLoading ? '数据正在加载....' : null }
                <ElCheckboxGroup {..._datas}>
                    {
                        (this.selectDatas || []).map(r => (
                            <ElCheckbox label={r.value}>{ r.label}</ElCheckbox>
                        ))
                    }
                </ElCheckboxGroup>
                <h1>选择完成后</h1>
                <div><ProAction on-handler={this.handleOk}>确定</ProAction> <ProAction on-handler={this.handleCancel}>取消</ProAction></div>
            </div>
        )

    }
}