<template>
  <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @maskClick="hiddeDatePicker">
    <view class="date-container">
      <view class="transparent">
        <view class="date-confirm">
          <view @click="hiddeDatePicker" class="pickerCancel">{{ $lang.lang.myInfo.cancel }}</view>
          <!-- 输入框 -->
          <input
            style="width: 70%"
            :placeholder="$lang.lang.myInfo.placeholder"
            :show-action="false"
            v-model="searchValue"
            shape="round"
          />
          <view @click="confirm" class="pickerConfirm">{{ $lang.lang.myInfo.confirm }}</view>
        </view>
        <picker-view
          :immediate-change="true"
          indicator-class="indicator"
          :value="setValues"
          @change="bindChange"
          style="height: 430rpx"
        >
          <picker-view-column>
            <view v-for="item in list" :key="item.id" class="u-column-item"
              >{{ rangeKey == 'zh' ? item.titleZh : item.titleEn }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {
    dataSource: {
      type: Array,
      default() {
        return []
      }
    },
    pickerValues: {
      //picker默认展示的值
      type: String | Number,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    rangeKey() {
      return this.$lang.locale == 'zh' ? 'zh' : 'en'
    }
  },
  data() {
    return {
      searchValue: '', // 搜索值
      setValues: [], // picker 选择值
      form: {
        //要传过去的值
        id: '',
        name: ''
      },
      list: this.dataSource
    }
  },
  onLoad(option) {},
  watch: {
    dataSource: {
      handler(newValue, oldValue) {
        this.list = newValue
      },
      deep: true,
      immediate: true
    },
    value(newValue, oldValue) {
      this.init()
      if (newValue) {
        this.$refs.popup.open('bottom')
      } else {
        this.$refs.popup.close()
      }
    },
    searchValue: {
      handler(newValue, oldValue) {
        this.reset()
        if (!newValue) {
          this.list = this.dataSource
        } else {
          this.list = this.dataSource.filter((item) => {
            const title = this.rangeKey == 'zh' ? item.titleZh : item.titleEn
            return title.includes(this.searchValue)
          })
        }
      }
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        //组件渲染完成后在更新数据
        const index = this.list.findIndex((item) => item.id == this.pickerValues)
        this.setValues = index > 0 ? [index] : [0]
      })
    },
    bindChange(e) {
      let value = e.detail.value.toString()
      this.list.forEach((item, index) => {
        if (value == index) {
          this.form.id = item.id
          this.form.name = this.rangeKey == 'zh' ? item.titleZh : item.titleEn
        }
      })
    },
    hiddeDatePicker() {
      this.searchValue = ''
      this.$emit('input', false)
    },
    confirm(e) {
      if (this.form.id == '' && this.list.length > 0) {
        this.form = {
          id: this.list[0].id,
          name: this.rangeKey == 'zh' ? this.list[0].titleZh : this.list[0].titleEn
        }
      }
      console.log('ocfkfd', this.setValues)
      this.hiddeDatePicker()
      this.$emit('reLoad', this.form)
    },
    // 搜索查询
    searchChange(e) {
      this.reset()
    },
    reset() {
      //重置
      this.form = {
        id: '',
        name: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.date-container {
  width: 100%;
  background: #fff;
}

.date-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  font-size: 34rpx;
  line-height: 100rpx;
  z-index: 2;
  height: 70rpx;
}

::v-deep .indicator {
  height: 100rpx;
}

.pickerCancel {
  font-size: 30rpx;
  color: #606266;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  padding: 0rpx 8rpx;
}

.pickerConfirm {
  font-size: 30rpx;
  color: #2979ff;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  padding: 0rpx 8rpx;
}

.u-column-item {
  line-height: 100rpx;
  text-align: center;
}
</style>
