<template>
  <view class="">
    <view class="search-input-container" @click="toggle">
      <view class="search-input placeholder" readonly>
        {{ placeholder }}
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" background-color="#fff" borderRadius="8px" @change="change">
      <view class="selected-area">
        <view class="dialog-caption" hover-class="none" :hover-stop-propagation="false">
          <view class="title-area">
            <text class="dialog-title">{{ title }}</text>
          </view>
          <view class="dialog-close" @click="handleClose">
            <view class="dialog-close-plus" data-id="close"></view>
            <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
          </view>
        </view>
        <view class="inputView">
          <SearchInput @search="search" :placeholder="placeholder"/>
        </view>
        <view class="content">
          <scroll-view v-if="dataList && dataList.length" class="list" :scroll-y="true">
            <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in dataList" :key="j"
              @click="updateValue(item)">
              <text class="item-text">{{item[map.text]}}</text>
              <!-- 暂无多选需求 -->
              <view class="check" v-if="false"></view>
            </view>
          </scroll-view>
          <view v-else class="content-empty">
            <u-loading-icon v-if="loading" text="加载中" textSize="18"></u-loading-icon>
            <template v-else>
              <view class="empty"></view>
              <view class="empty-text">{{ placeholder }}</view>
            </template>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import SearchInput from './SelectData.vue'
export default {
  props: {
    modelValue: {
      type: String | Number | Array,
      default: ''
    },
    load: {
      type: Function,
      default: () => Promise.resolve([])
    },
    map: {
      type: Object,
      default: ({ text: 'text', value: 'value' })
    },
    title: {
      type: String,
      default: '请选择'
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
  },
  components: { SearchInput },
  data () {
    return {
      dataList: [],
      loading: false,
    }
  },
  methods: {
    search (value) {
      this.loading = true
      this.load(value).then(res => {
        this.dataList = res
      }).finally(() => {
        this.loading = false
      })
    },
    toggle () {
      this.$refs.popup.open()
    },
    handleClose () {
      this.$refs.popup.close()
    },
    change (e) {
      if (e.show) {
        // this.search('')
      } else {
        this.loading = false
        this.dataList = []
      }
    },
    updateValue (item) {
      this.$emit('update:modelValue', item[this.map.value])
      this.$emit('change', item)
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-input-container {
  position: relative;

  .search-input {
    width: 100%;
    height: 35px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 40px 0 12px;
    font-size: 14px;
    color: #333;
    line-height: 35px;

    &.placeholder {
      font-size: 12px;
      color: #808080;
    }
  }

  .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
  }
}

.selected-area {
  height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .title-area {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    /* #ifndef APP-NVUE */
    margin: auto;
    /* #endif */
    padding: 0 10px;
  }

  .dialog-caption {
    position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    /* border-bottom: 1px solid #f0f0f0; */
  }

  .dialog-title {
    /* font-weight: bold; */
    line-height: 44px;
  }

  .dialog-close {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    padding: 0 15px;
  }

  .dialog-close-plus {
    width: 16px;
    height: 2px;
    background-color: #666;
    border-radius: 2px;
    transform: rotate(45deg);
  }

  .dialog-close-rotate {
    position: absolute;
    transform: rotate(-45deg);
  }

  .icon-clear {
    display: flex;
    align-items: center;
  }
  .inputView {
    padding: 0 15px 10px;
    border-bottom: 1px solid #f8f8f8;
    margin: 2px;
  }
  .content {
    overflow: hidden;
    flex: 1;
  }
  .content-empty {
    overflow: hidden;
    margin-top: 10%;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap: 20px;
    color: #999;
  }
  .list {
    width: 100%;
    height: 100%;
  }

  .item {
    padding: 12px 15px;
    /* border-bottom: 1px solid #f0f0f0; */
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
  }

  .is-disabled {
    opacity: .5;
  }

  .item-text {
    /* flex: 1; */
    color: #333333;
  }

  .item-text-overflow {
    width: 280px;
    /* fix nvue */
    overflow: hidden;
    /* #ifndef APP-NVUE */
    width: 20em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* #endif */
  }

	.check {
		margin-right: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}
  .empty {
    margin: 0 auto;
    width: 160px;
    height: 155px;
    background: url("../../../static/images/Empty.png") no-repeat;
    background-size: cover;
  }
}
</style>