<!--
 * @Description: 图层选择窗口
 * @Author: 王晓颖
 * @Date: 2022-05-17
 -->
<template>
  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
    <div v-show="show" class="layer-choose-window">
      <div class="window-title">
        <div>图层</div>
        <i class="el-icon-close close-icon" @click="close" />
      </div>
      <div class="window-body">
        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
        </el-scrollbar>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'LayerChooseWindow',
  props: {
    show: {
      type: Boolean,
      default: false
    }, // 是否显示窗口
    layers: {
      type: Array,
      default: () => []
    }, // 图层列表，树结构，[{id:'',name:'', children:[...]},...]
    checked: {
      type: Array,
      default: () => []
    } // 选中图层，id的列表
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      } // 树结构默认参数
    }
  },
  methods: {
    // 关闭窗口
    close() {
      this.$emit('close')
    },
    // 复选框点击事件，将所有选中id传递给父组件
    clickItem() {
      const checked = this.$refs.tree.getCheckedKeys()
      this.$emit('checked-change', checked)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.layer-choose-window{
  position: absolute;
  right: 10px;
  top: 50px;
  width: 200px;
  background-color: rgba(255,255,255,0.9);
  .window-body{

  }
}
.window-title{
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  .close-icon:hover{
    cursor: pointer;
    color: #36a3f7;
  }
}
</style>