<template>

    <div :class="b()">

        <div :class="[b('body'),'eye-scroll']">


            <eye-renderer :dataProvider="dataProvider">




                <template slot-scope="{row,index}">
                    <eye-renderer-group v-model="selectValue[row.specificId]"
                                        :title="row.specificName"
                                        :dataProvider="row.details"
                                        :cols="3"
                                        labelField="field"
                                        valueField="id"
                                        switch-selection>
                    </eye-renderer-group>

                    <!--{{row.details}}-->
                    <!--<div v-for="d in row.details">-->
                        <!--<span>{{formatterLabel(d)}}</span>-->
                    <!--</div>-->
                </template>
            </eye-renderer>
        </div>

        <div :class="b('footer')">
            <eye-button
                    size="large"
                    :class="b('cancel')"
                    @click="handleCancel"
            >取消</eye-button>
            <eye-button
                    size="large"
                    :class="[b('confirm')]"
                    @click="handlerSubmit"
            >确定</eye-button>
        </div>

    </div>


</template>



<script type="text/babel">

  import  { Component,Field,Core }  from 'eye-core';

  export default Component({

    name: 'spec',

    mixins:[ Field ],

    props: {
        labelField:{
            type:String,
            default:'field'
        },
    },

    data() {
        return {
            selectValue : {}
        }
    },

    methods: {

        currentValueChange(val) {
            if(Core._.isObject(val)) {
                this.selectValue = val
                this.onCreateComplete(val);
            }
        },

        // dataProviderChange() {
        //     debugger
        //     this.clearCurrnetValue();
        // },

        resetCurrentValue() {
            this.selectValue = {}
        },

        initCurrentValue(val) {
            return val ? val : {};
        },

        formatterLabel(data,field) {
            if(Core._.isObject(data)) {
                let labels = Object.keys(data).map(f => { return data[f] ? data[f].field : '' })
                return labels.join('') || ''
            }
        },

        handlerSubmit() {
            this.onSelectChange(this.selectValue)
            this.handleCancel();
        },

        handleCancel() {
            this.setParentVisible(false)
        },


    }
  })


</script>

