<template>
  <div ref='ResCatalog' v-drag='`.resCatalog${splitScreen} .ant-card-head`'
    :class='`resCatalog resCatalog${splitScreen} ol-unselectable`'>
    <a-card v-show='value' title='专题图层' style='box-shadow: 0 0 5px #357ee5;'>
      <a-icon slot='extra' type='close' class='panelClose' @click="$emit('input',false)" />
      <a-collapse style='overflow-y: auto; max-height: 50vh;' v-model="activeKey">
        <a-collapse-panel v-for='(item,index) in this.basicMap.list[ind]' :key='item.id' :header='item.name'>
          <template v-for='(itemA,index) in item.layers'>
            <li style='margin: 15px' v-if='!itemA.layers' :key='itemA.name'>
              <div>
                <!--专题选择-->
                <a-checkbox v-model='itemA.visible' ref='checkbox' @change='layerSwitch(itemA)'>
                  <img v-if="itemA.visible&&itemA.legend&&[itemA.children]==''" :src='`${baseUrl}/${itemA.legend}`' />
                  <span>{{ itemA.alias }}</span>
                </a-checkbox>
                <a-slider style='display: inline-block;' ref='slider' class='slider' :min='0' :max='1' :step='0.01'
                  :default-value='1' :tooltip-visible='false' :disabled='!itemA.visible'
                  @change='changeOpacity($event,itemA)'></a-slider>
                <!-- <template v-if='itemA.servicetype === "DynamicLayer"'>
                                 <a-switch size='small' :defaultChecked='itemA.labelsvisible' :disabled='!itemA.visible'
                                           @change='changeLabelsVisible($event,itemA)' class='labelSwitch'></a-switch>
                                </template> -->
              </div>
              <template v-if="[itemA.categories]!=''&&itemA.visible">
                <p v-for='item in itemA.categories'>
                  <img :src='`${baseUrl}/${item.img}`' />
                  {{ item.name }}
                </p>
              </template>
            </li>
            <a-collapse v-else style='overflow-y: auto; max-height: 90vh;'>
              <a-collapse-panel :key='itemA.name' :header='itemA.name'>
                <ul style='margin: 10px;padding: 0;margin-left: 25px'>
                  <li v-for='(layer,i) in itemA.layers' :key='layer.name'>
                    <div>
                      <a-checkbox v-model='layer.visible' ref='checkbox' @change='layerSwitch(layer)'>
                        <img v-if="layer.visible&&layer.legend&&[layer.children]==''"
                          :src='`${baseUrl}/${layer.legend}`' />
                        <span>{{ layer.alias }}</span>
                      </a-checkbox>
                      <a-slider style='display: inline-block;' ref='slider' class='slider' :min='0' :max='1'
                        :step='0.01' :default-value='1' :tooltip-visible='false' :disabled='!layer.visible'
                        @change='changeOpacity($event,layer)'></a-slider>
                    </div>
                    <template v-if="[layer.categories]!=''&&layer.visible">
                      <p v-for='item in layer.categories'>
                        <img :src='`${baseUrl}/${item.img}`' />
                        {{ item.name }}
                      </p>
                    </template>
                  </li>
                </ul>
              </a-collapse-panel>
            </a-collapse>
          </template>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
  </div>
</template>

<script>
  export default {
    name: 'ResCatalog',
    props: {
      value: {
        type: Boolean,
        default: false,
        required: true
      }
    },
    components: {},
    data: function() {
      return {
        baseUrl: '',
        layerList: [],
        map: {},
        ind: 0,
        list: [],
        activeKey: []
      };
    },
    inject: ['basicMap', 'splitScreen'],
    created() {
      this.baseUrl = window._CONFIG['domianURL'];
    },
    mounted() {
      /*if(this.splitScreen){
        this.layerList=this.basicMap.layerList;
      }else {
        this.layerList=this.basicMap.layerList;
      }*/
      if (this.splitScreen) {
        this.ind = 1;
      } else {
        this.ind = 0;
      }
    },
    watch: {
      value: function(newValue) {
        if (newValue === false) {

        } else {
          if (this.basicMap.list[0]) {
            this.basicMap.list[0].forEach((item) => {
              this.activeKey.push(item.id);
            })
          }
        }
      }
    },
    methods: {
      layerSwitch(layer) {
        let map;
        if (this.splitScreen) {
          map = this.basicMap.esriMap2;
        } else {
          map = this.basicMap.esriMap;
        }
        let checked = layer.visible;
        this.basicMap.changeLayerVisible(layer, checked, map);
      },
      changeOpacity(value, layer) {
        this.basicMap.changeLayerOpacity(layer, value);
        if (this.splitScreen) {
          this.map = this.basicMap.esriMap2;
        } else {
          this.map = this.basicMap.esriMap;
        }
        let m_layer = this.map.findLayerById(layer.id);
        if (!m_layer) {
          return;
        }
        m_layer.opacity = value;
      },
      changeLabelsVisible(checked, layer) {
        let m_layer = this.basicMap.esriMap.findLayerById(layer.id);
        m_layer.findSublayerById(layer.sublayerid).labelsVisible = checked;
      }
    }
  };
</script>

<style scoped>
  .ant-checkbox-wrapper {
    display: flex;
    align-items: center;
    max-width: 140px;
  }

  .resCatalog {
    border-radius: 4px;
    box-shadow: 0 0 5px #357ee5;
    min-width: 300px;
    height: auto;
  }

  #resourceCatalog.resCatalogtrue {
    z-index: 100;
    transform: translateX(-100%);
    top: 210px;
    right: 29%;
    position: fixed;
  }

  .ant-slider {
    margin: 2px 1px 1px;
    width: 40%;
  }

  li>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  p {
    padding-left: 40px;
  }

  img {
    width: 20px;
    /*height: 20px;*/
    display: inline-block;
  }
</style>