<!--
 * @Description: 图层选择下拉
 * @Author: 王晓颖
 * @Date: 2021-03-08 11:31:58
 -->
<template>
  <div class="layer-choose-div">
    <div class="right-card">
      <el-button icon="el-icon-copy-document" style="width: 110px;" @click="cardShow=!cardShow">
        图层 <i :class="{'el-icon-arrow-up':cardShow,'el-icon-arrow-down':!cardShow}" class="el-icon--right"/>
      </el-button>
    </div>
    <el-collapse-transition>
      <div v-show="cardShow" class="layers-card">
        <el-tree
          ref="layerTree"
          :data="layers"
          :default-checked-keys="selectLayers"
          :props="treeProps"
          show-checkbox
          node-key="id"
          @check="nodeCheck"
          @check-change="checkChange"/>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'LayerChoose',
  props: {
    layers: {
      type: Array,
      default: () => [
        { id: 0, name: '底图', type: 'map', domain: [] },
        { id: 1, name: '网格', type: 'layer', domain: [] },
        { id: 2, name: '商户', type: 'layer', domain: [] },
        { id: 3, name: '视频监控点', type: 'layer', domain: [35] },
        { id: 4, name: '路灯杆和灯箱', type: 'layer', domain: [1, 3, 4, 22, 25, 34] },
        { id: 5, name: '雨水井盖', type: 'layer', domain: [14] },
        { id: 6, name: '污水井盖', type: 'layer', domain: [37] },
        { id: 7, name: '公共厕所', type: 'layer', domain: [12, 13] },
        { id: 8, name: '垃圾箱', type: 'layer', domain: [24] },
        { id: 9, name: '其他部件', type: 'layer', domain: [2, 5, 6, 7, 8, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 38, 39, 40] }
      ]
    },
    selectLayers: {
      type: Array,
      default: () => {
        return [0, 1, 2, 3, 4, 5, 6, 7, 8]
      }
    },
    treeProps: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'name'
        }
      }
    }
  },
  data() {
    return {
      cardShow: true // 是否显示图层卡片
    }
  },
  methods: {
    nodeCheck(node, checked) {
      this.$emit('check', node, checked)
    },
    checkChange(node, checked) {
      this.$emit('choose', node, checked)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $width:200px;
  .layer-choose-div{
    //width: $width;
    /*position: absolute;*/
    /*right:50px;*/
    /*top:20px;*/
    /*z-index:10000;*/
    .right-card{
      margin-left: 10px;
      height: auto;
      display: flex;
      justify-content: flex-end;
      align-items: end;
      .el-button{
        -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
        box-shadow: 0px 1px 3px #d9d9d9;
      }
    }
    .layers-card{
      position: absolute;
      top:50px;
      right:0px;
      z-index:10000;
      width: $width;
      background-color: #fff;
      overflow: auto;
      margin:10px 0px;
      border: 1px solid #DCDFE6;
      border-radius:3px;
      padding:20px 8px 20px 5px;
      -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */
      box-shadow: 0px 1px 3px #d9d9d9;
    }
  }

</style>