<template>
    <div :class="b()">



        <div :class="b('body')">

            <div class="category-container eye-scroll">
                <eye-renderer :visible.sync="currentVisible"
                              :dataProviderLoader="categoryDataProviderLoader"
                              :defaultSelected="0"
                              itemClass="item"
                              labelField="name"
                              valueField="id"
                              v-model="selectCategory">
                </eye-renderer>
            </div>
            <div class="category-item-container eye-scroll">
                <eye-renderer :visible.sync="currentVisible"
                              :dataProviderLoader="categoryItemsDataProviderLoader"
                              v-model="selectBreeds"
                              :params="selectCategory"
                              labelField="name"
                              valueField="id"
                              :cols="3"
                              @itemChange="onItemChange">
                </eye-renderer>
            </div>
        </div>

        <BreedPopup v-if="supportBreed"
                    :position="position"
                    :cateId="cateId"
                    :showBreedPopup="showBreedPopup"
                    :supportUnit="supportUnit"
                    @loaded="onBreedLoad"
                    @select="onCategorySelectChange"></BreedPopup>

    </div>

</template>

<script type="text/babel">

  import  { Component,Core,Field }  from 'eye-core';
  import CategoryService from 'eye-com/src/services/common/CategoryService';
  import BreedPopup from './BreedPopup';

  export default Component({

    name: 'category',

    mixins:[ Field ],

    services: [ CategoryService ],

    components:{
        BreedPopup
    },

    props: {
        supportBreed: {  // 是否支持品种
            type: Boolean,
            default: false
        },
        showBreedPopup: {  // 是否支持品种
            type: Boolean,
            default: false
        },
        supportUnit: {  // 是否支持单位
            type: Boolean,
            default: false
        },
        specList:Array,
        breedList:Array,
        unitList:Array
    },

    data() {
      return {
        cateId:0,
        categoryList: null,
        selectedIndex: 0,
        selectCategory: {},
        selectBreeds:{},

        currentBreedList:this.breedList,
        currentSpecList:this.specList,
        currentUnitList:this.unitList
      };
    },


    methods: {

        currentValueChange(val) {
            if(Core._.isObject(val)) {
                this.selectCategory = val.category || {};
                this.selectBreeds = val.breeds || {};
                this.cateId = this.selectBreeds.id;
                this.onCreateComplete(val);
            }
        },

        dataProviderChange() {
            //debugger
            this.currentValueChange(this.currentValue);
        },

        categoryDataProviderLoader() {
            return this.initCategory();
        },

        categoryItemsDataProviderLoader(params) {
            return this.initCategoryItems(params.id)
        },


        formatterLabel(data,field) {
            if(Core._.isObject(data)) {
                let labels = [data.category ? data.category.name : '',
                              data.breeds ? data.breeds.name : '']
                return labels.join('') || ''
            }
        },

        initCategory() {
            return this.$service.category.find();
        },

        initCategoryItems(code) {
            return code ? this.$service.category.find(code) : [];
        },



        onBreedLoad(e) {
            let { breeds,specifications,showBreed,units} = e || {};

            if(this.showBreedPopup) {
                !showBreed && this.onCategorySelectChange();
            } else {
                this.onCategorySelectChange()
            }

            // this.$emit('update:breedList', breeds);
            // this.$emit('update:specList', specifications);
            // this.$emit('update:unitList', units);

            this.$emit('update:breedList', breeds);
            this.$emit('update:specList', specifications);
            this.$emit('update:unitList', units);

            this.$emit('breedLoad', e);
        },


        onItemChange(row) {
            this.showBreed(row.id)
        },

        showBreed(cateId) {

            if(this.supportBreed) {
                if(this.cateId == cateId) this.cateId = 0;
                this.$nextTick(() => { this.cateId = cateId })
            }
            else {
                this.onCategorySelectChange()
            }
        },

        onCategorySelectChange(breeds) {
            breeds = breeds ? breeds : this.selectBreeds;
            let category = this.selectCategory;

            if(!breeds.cateName)
                breeds.cateName = this.selectBreeds.name;


            //debugger
            this.onSelectChange({ category, breeds })
        }


    }
  });
</script>

