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

        <Search ref="Search"
                :visible.sync="currentVisible"
                v-model="selectCategory"
                @itemClick="onItemClick"
                @dataProviderChange="onDataProviderChange">
        </Search>

        <div v-if="showBody" :class="b('body')">
            <div>手动选择</div>
            <eye-button size="small"
                        round
                        @click="onShowCategoryClick">选择分类<i class="eye-icon eye-icon-right" />
            </eye-button>
            <slot name="hot"></slot>
        </div>


        <eye-page-popup :visible.sync="showCategory"
                        title="选择货品"
                        position="right">

            <Category :visible.sync="showCategory"
                      :supportBreed="supportBreed"
                      :showBreedPopup="showBreedPopup"
                      :supportUnit="supportUnit"
                      @breedLoad="onBreedLoad"
                      @select="onItemCategoryChange"></Category>

        </eye-page-popup>


        <eye-page-popup v-if="supportBreed"
                        :visible.sync="currentShowBreedPopup"
                        :title="breedTitle"
                        position="right">

            <Breed :dataProvider="currentBreedList"
                   @select="onItemCategoryHandler"></Breed>

        </eye-page-popup>

    </div>

</template>

<script type="text/babel">

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

  export default Component({

    name: 'category-search',

    mixins:[ Field ],

    services: [ CategoryService ],

    components:{
        BreedPopup,
        "Breed": Breed,
        "Search":Search,
        "Category":Category
    },

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

        showBreedPopup: {  // 是否支持品种
            type: Boolean,
            default: false
        },


        /**
         * 打开后是否初始化查询条件
         */
        openToInit: {
            type: Boolean,
            default: false
        },

        specList:Array,
        breedList:Array,
        unitList:Array
    },

    data() {
      return {
          cateId:0,
          showBody:true,
          showCategory:false,
          selectCategory: {},
          selectBreeds:{},

          currentShowBreedPopup:false,
          breedTitle:'',
          currentBreedList: []
      }
    },

    methods: {


        changeVisible(visible) {
            if(!visible) {
                this.cateId = 0;
            } else {
                this.openToInit && this.$refs.Search.onReset();
            }
        },

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

        onKeywordHandler(e) {
            this.clearTimeDelay && clearTimeout(this.clearTimeDelay)
            this.clearTimeDelay = setTimeout(() => {
                this.form = {
                    keyword : e
                }
            },50)
        },


        keywordDataProviderLoader(e) {
            return this.$service.category.findKeyword(e.keyword)
        },

        onItemClick(e,f) {
            let { type,level,cate1Id,cate1Name,cateId,bindName,value } = e;
            let breeds;
            let category = {
                id:cate1Id,
                name:cate1Name,
                cate3Id:cateId,
                cate3Name:bindName
            };
            if(level >= 9 && type === 'breed') {
                breeds = {
                    id:value,
                    name:bindName,
                }
            }
            f && (this.selectCategory = category);
            this.findSpecList(cateId,category,breeds);
        },

        onBreedLoad(e) {
            let { breeds,specifications,units } = e || {};
            this.$emit('update:breedList', breeds);
            this.$emit('update:specList', specifications);
            this.$emit('update:unitList', units);

            // console.log('specList',specifications)
            // console.log('unitList',units)
        },


        findSpecList(cateId,selectCategory,selectBreed) {

            this.$service.category.findBreedSpecOrUnitList(cateId,this.supportUnit).then(res => {
                let { showBreed,cateName,breeds } = res || {};

                this.onBreedLoad(res);
                this.currentBreedList = breeds;


                if(this.showBreedPopup && showBreed && !selectBreed) {

                    this.breedTitle = `选择${cateName}品种`
                    this.currentShowBreedPopup = true;
                } else {

                    let breeds = selectBreed;
                    if(!breeds) {
                        breeds = {
                            id:selectCategory.cate3Id,
                            name:selectCategory.cate3Name,
                        }
                    }
                    this.onSelectChange({ category : selectCategory, breeds })
                }
            })

        },


        onShowCategoryClick(e) {
            this.showCategory = true
        },

        onDataProviderChange(e) {
            let show = e && !!e.length;
            this.showBody = !show
        },

        onItemCategoryChange(e) {
            this.onSelectChange(e)
        },

        onItemCategoryHandler(breeds) {

            let category = this.selectCategory;

            if(!breeds) {
                breeds = {
                    id:category.cateId,
                    name:category.bindName,
                }
            }

            if(!category.id) {
                category.id = category.cate1Id;
                category.name = category.cate1Name;
            }

            if(!breeds.cateName)
                breeds.cateName = category.bindName;

            this.showCategory = false;
            this.currentShowBreedPopup = false;
            this.onSelectChange({ category, breeds })
        }

    }

  });
</script>

