<template>
  <div class="city-picker">
    <div :class="['city-picker-item', { hide: pullDownlistShowState }]">
      <!--hide显示隐藏下拉列表   false显示 true隐藏-->
      <input
        type="text"
        :placeholder="defaultData.name"
        :value="defaultData.name"
        readonly
        unselectable="on"
        @click.stop="showList"
      />
      <input type="hidden" name="hidden" value="hidden" />
      <ul class="city-picker-list">
        <li
          v-for="(item,index) in showData"
          :key="index"
          :class="['caller', {active: item.active}]"
          @click="selectListData(index)"
        >{{item.name}}</li>
        <!--active当前选中  true选中 false不选中-->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pullDownComponents',
  // 传入参数介绍
  props: {
    // 下拉列表所有需要显示的数据
    pullDowmData: {
      type: Array, // 数组对象格式[{name:'名字1',extendData:'扩展数据可以是任意格式'}]
      required: true
    },
    // 初始化数据时，默认选中的数据
    initDefaultSelect: {
      type: Object, // 对象数据格式{name:'默认选中姓名',activeIndex:0} index为默认选中的下标
      required: true
    }
  },
  watch: {
    initDefaultSelect: {
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.defaultData = newVal
        }
      },
      immediate: true,
      deep: true
    },
    pullDowmData: {
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.showData = newVal.map((item, index) => {
            /* eslint-disable */
            return {
              name: item.name, extendData: item.extendData, active: this.defaultData.activeIndex === index ? true : false
            }
          })
          // 将选中的值回调给父组件
          this.$emit('callBackVal', this.showData[this.defaultData.activeIndex])
        }
      },
      immediate: true,
      deep: true
    },
    // 展开关闭
    pullDownlistShowState(valNew, oldVal) {
      if (valNew) {//false开true关
        // 关闭回调
        this.$emit('callBackValClose', false)
      } else {
        // 展开回调
        this.$emit('callBackValOpen', true)
      }
    }
  },
  data() {
    return {
      // 展示数据
      showData: [
        { name: '名字1', extendData: '扩展数据可以是任意格式', active: true },
        { name: '名字2', extendData: '扩展数据可以是任意格式', active: false }
      ],
      // 默认显示选中数据
      defaultData: {
        name: '',
        activeIndex: 0
      },
      // 下拉列表显示状态   true不显示   false显示
      pullDownlistShowState: true
    }
  },
  methods: {
    // 点击展开隐藏列表
    showList() {
      this.pullDownlistShowState = !this.pullDownlistShowState
    },
    // 选中列表中的某一个
    selectListData(activeIndex) {
      this.showData.forEach((item, index) => {
        /* eslint-disable */
        activeIndex === index ? (item.active = true, this.defaultData = { name: item.name, activeIndex: index }) : (item.active = false)
      })
      // 关闭下拉框
      this.pullDownlistShowState = true
      // 将选中的值回调给父组件
      this.$emit('callBackVal',this.showData[activeIndex])
    },
    // 改变窗口状态
    changeWinState() {
      this.pullDownlistShowState = true
    }
  },
  mounted() {
    let that = this
    // 点击其他地方关闭窗口
    document.addEventListener('click', function (e) {
      /* eslint-disable */
      console.log(that, '12569')
      if (e.target.className !== 'city-picker') {
        if (!that.pullDownlistShowState) {
          that.pullDownlistShowState = true
        }
      }
    })
  }
}
</script>

<style scoped lang="scss">
input::-webkit-input-placeholder {
  color: #606266 !important;
}
input::-moz-input-placeholder {
  color: #606266 !important;
}
input::-ms-input-placeholder {
  color: #606266 !important;
}
input::-o-input-placeholder {
  color: #606266 !important;
}

.city-picker {
  font-size: 0;
}

.city-picker-item {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  margin-left: 10px;
  position: relative;
  &:first-child {
    margin-left: 0;
  }
  &:after {
    content: "";
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 6px solid #ccc;
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 15px;
    right: 5px;
    -webkit-transition-duration: 400ms;
    -moz-transition-duration: 400ms;
    -o-transition-duration: 400ms;
    transition-duration: 400ms;
  }
  &.hide {
    .city-picker-list {
      -webkit-transform: translateY(-2%);
      -moz-transform: translateY(-2%);
      -ms-transform: translateY(-2%);
      -o-transform: translateY(-2%);
      transform: translateY(-2%);
      opacity: 0;
      visibility: hidden;
    }
    &:after {
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    color: #606266;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    width: 100%;
    height: 35px;
    text-indent: 5px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    &:focus {
      outline: none;
    }
    &:hover {
      background-color: #fbfbfb;
    }
    &:disabled {
      background-color: #eef1f6;
      cursor: not-allowed;
      color: #666;
    }
  }
}

.city-picker-list {
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 2px #f3f3f3;
  max-height: 104px; //默认150
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  margin: 0;
  padding: 0;
  -webkit-transition-duration: 400ms;
  -moz-transition-duration: 400ms;
  -o-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  position: absolute;
  top: 120%;
  left: 0;
  right: 0;
  z-index: 1;
  .caller {
    cursor: pointer;
    font-size: 14px;
    list-style: none;
    padding: 8px;
    -webkit-transition-duration: 400ms;
    -moz-transition-duration: 400ms;
    -o-transition-duration: 400ms;
    transition-duration: 400ms;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:hover {
      background-color: #f9f9f9;
    }
    &.active {
      position: relative;
      text-indent: 10px;
      &:after {
        content: "";
        background: #67bfdc;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        display: block;
        position: absolute;
        top: 50%;
        right: 5px;
        bottom: 10px;
        margin-top: -4px;
      }
    }
  }
}
</style>
