<template>
  <div class="store-wrap">
    <div class="el-input">
      <div  @click="showTree" type="text" autocomplete="off" class="el-input__inner">
        <span class="gray" v-show="!checked.label">{{placeholder}}</span>
        <span>{{checked.label}}</span>
        </div>
    </div>
    <transition name="fade">
      <div class="store-dropdown" v-show="treeShow">
        <el-tree class="store-tree" height="200" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        <div class="store-btn-wrap">
          <el-button size="mini" type="primary" @click="submit">确定</el-button>
          <el-button size="mini" @click="close">取消</el-button>
        </div>
      </div>
    </transition>
  </div>
  </template>
<script>
import {storeGroupList} from '@/service/api/commonApi.js'
// import {Table} from 'element-ui';
// import Vue from 'vue'

// const tableComponent = new Vue.extend(Table)
export default {
  props:{
    placeholder:{
      type:String,
      default:'请选择门店'
    }
  },
  data() {
    return {
      defaultProps:{
        children:'chilren',
        label:'label'
      },
      treeData:[],
      treeShow:false,
      checked:{label:''},
      initChecked:{label:''}
    }
  },
  created(){
    this.storeGroupList();
  },
  methods:{
    showTree(){
      this.treeShow = true;
    },
    async storeGroupList() {
      let res = await storeGroupList();
      const result = res.result;
      function _rec(list) {
        list.map(v => {
          v.label = v.storeGroupName;
          v.id = v.storeGroupId;
          if (v.chilren instanceof Array && v.chilren.length>0) {
            _rec(v.chilren);
          }
        })
      }
      _rec(result);
      this.treeData = result;

    },
    handleNodeClick(data,node,comp){
      this.checked = data;
    },
    submit(){
      this.treeShow = false;
    },
    close(){
      this.treeShow = false;
      this.checked = {}
    }
  }
}
</script>
<style lang="scss" scoped>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
  transform: translateY(0px);
  transition: all .3s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(-100px);
}

.store-wrap{
  width: 200px;
  position: relative;
  .store-dropdown{
    position: absolute;
    margin-top:10px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
  }
  .store-tree{
    border-radius: 4px;
    height: 300px;
    overflow-y: auto;
    width: 90%;
    padding: 5%;
  }
  .store-btn-wrap{
    position: relative;
    width: 100%;
    height: 50px;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    &:before{
      content: "";
      width: 80%;
      height: 1px;
      background: #f0f0f0;
      position: absolute;
      top: 0;
      left: 10%;
    }
  }
}
</style>
