<template>
  <div class="dropdown_list">
    <div v-show="showList" class="bg" @click="onControl(false)"></div>
    <div class="show_value text_overflow" @click="onControl(!showList)">
      {{ currentItem.name }}
    </div>
    <ul v-show="showList" v-if="listData.length">
      <li
        @click="onSelectChange(item)"
        v-for="(item, index) in listData"
        :key="index"
        :class="{ active: currentItem.name == item.name }"
        class="text_overflow"
      >
        {{ item.name }}
      </li>
    </ul>
    <ul v-show="showList" v-else @click="onControl(!showList)">
      <li>暂无</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "DropdownList",
  components: {},
  data() {
    return {
      showList: false, // 是否展示下拉列表
    };
  },
  props: {
    // 列表
    listData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 当前选中的值
    currentItem: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 搜索框内容发生改变的时候执行的函数
    onSelectChange(options) {
      this.$emit("onSelectChange", options);
      this.onControl(false);
    },

    // 关闭显示下拉列表
    onControl(showList) {
      this.showList = showList;
    },
  },
};
</script>

<style lang="less">
.dropdown_list {
  width: 100%;
  position: relative;
  text-align: center;
  cursor: pointer;

  .bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .show_value {
    height: 70 / @rem;
    line-height: 68 / @rem;
    border: 2px solid #e2e2e2;
    border-radius: 8 / @rem;
    box-sizing: border-box;
  }

  ul {
    width: 100%;
    max-height: 350 / @rem;
    line-height: 70 / @rem;
    position: absolute;
    top: 70 / @rem;
    background-color: #fff;
    border: 2px solid #e6e6e6;
    border-bottom: 0;
    border-radius: 8 / @rem;
    box-sizing: border-box;
    overflow-y: auto;

    li {
      border-bottom: 1 / @rem solid #e6e6e6;

      &:last-child {
        border-bottom: 0;
      }

      &.active {
        background-color: #e6e6e6;
      }
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/only screen and (min-device-width: 768px) and (min-device-height: 768px) and (orientation: portrait) {
  .dropdown_list {
    .show_value {
      height: 35 / @rem;
      line-height: 34 / @rem;
      border-radius: 4 / @rem;
    }

    ul {
      max-height: 230 / @rem;
      line-height: 35 / @rem;
      top: 35 / @rem;
      border-radius: 4 / @rem;
    }
  }
}
</style>
