<!--
 * @Author: Wzh
 * @Date: 2020-01-23 10:48:49
 * @LastEditors: Wzh
 * @LastEditTime: 2020-02-19 15:10:29
 * @Description: 地图左下列表
 -->
<template>
    <div
      ref="customOverlay"
      class="map-list-container"
      v-show="isShow"
    >
      <div class="header">
          <p class="list-name inline-block" v-text="title"></p>
          <p class="list-count inline-block right" v-text="extra"></p>
      </div>
      <vueSeamless
        :data="list"
        :class-option="optionScroll"
        class="map-scroll"
      >
        <div v-for="(info, index) in list" :key="index" class="list">
          <p class="list-name inline-block" v-text="info.label"></p>
          <p class="list-count inline-block right" v-text="info.content"></p>
        </div>
      </vueSeamless>
      <!-- <WcScrollList :list="list" class="list">
          <template v-slot:default="{ info }">
          <p class="list-name inline-block" v-text="info.label"></p>
          <p class="list-count inline-block right" v-text="info.content"></p>
          </template>
      </WcScrollList> -->
    </div>
</template>

<script>
// import WcScrollList from '_c/wc-scroll-list/wc-scroll-list.vue'
import vueSeamless from "vue-seamless-scroll"

export default {
  components: {
    vueSeamless
    // WcScrollList
  },
  name: 'MapList',
  props: {
    title: {
      default: '省份'
    },
    extra: {
      default: '数量'
    },
    list: {
      default: function () {
        return [
          {
            label: '',
            content: ''
          }
        ]
      }
    },
    /**
     * 相对父元素左上角的绝对位置
     */
    position: {
      default: function () {
        return {
          top: 0,
          left: 0
        }
      }
    },
    isShow: {
      default: true
    }
  },
  data() {
    return {
      mapData: [
        {
          label: '海南省',
          content: '100'
        },
        {
          label: '湖北省',
          content: '100'
        },
        {
          label: '湖南省',
          content: '100'
        },
        {
          label: '广东省',
          content: '100'
        },
        {
          label: '广西省',
          content: '100'
        },
        {
          label: '江西省',
          content: '100'
        },
        {
          label: '江苏省',
          content: '100'
        },
        {
          label: '浙江省',
          content: '100'
        },
        {
          label: '福建省',
          content: '100'
        },
        {
          label: '河南省',
          content: '100'
        },
        {
          label: '河北省',
          content: '100'
        },
        {
          label: '河南省',
          content: '100'
        },
        {
          label: '河北省',
          content: '100'
        }
      ]
    }
  },
  computed: {
    optionScroll() {
        return {
          step: 0.5,
        }
      },
  },
  watch: {
    position: {
      handler () {
        this.draw()
      },
      deep: true
    }
  },
  mounted () {
    this.draw()
  },
  methods: {
    draw () {
      if (this.$refs.customOverlay) {
        let el = this.$refs.customOverlay
        for (const key in this.position) {
          if (this.position.hasOwnProperty(key)) {
            el.style[key] = this.position[key] + 'px'
          }
        }
      }
    }
  },
  mounted () {
    this.draw()
  }
}
</script>

<style lang="scss">
  @import "@/assets/css/theme.scss";
  @import "@/assets/css/mixin.scss";
.map-list-container {
  position: absolute;
  width: 50%;
  height: 50%;
  // height: halfH(482);
  // width: halfW(330);
  border-radius: 6px;
  background:rgba(10,25,43,0.6);
  border:1px solid rgba(19,51,88,1);
  overflow: hidden;

  .inline-block {
    display: inline-block;
  }

  .right {
    float: right;
  }

  .header {
    // height:halfH(50%);
    padding: halfH(12) halfW(20);
    // line-height:halfH(58);
    background:rgba(34,127,233,0.6);
    font-size: halfH(18);
    font-family:Hiragino Sans GB;
    font-weight:bold;
    color:rgba(255,255,255,1);
  }
  .map-scroll {
    overflow: auto;
  }
  .list {
    padding: halfH(12) halfW(20);
    // top: halfH(58);
    font-size: halfH(16);
    font-family:Hiragino Sans GB;
    font-weight:normal;
    color:rgba(255,255,255,1);

    .list-name {
      // height: halfH(30);
      width: 70%;
      @include text-ellipsis;
    }
    .list-count {
      text-align: right;
      width: 30%;
      white-space: nowrap;
    }
  }

}
</style>
