<template>
  <view>
    <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
			
          <view  @click="cancelSelection">取消</view>
          <view  @click="confirmSelection">确定</view>
        </view>
		<view class="" style="margin: 0 auto;">
			<picker-view :value="pickerValue" @change="bindChange" style="height: 420rpx;">
			  <picker-view-column>
			    <view v-for="(item, index) in provinces" :key="index">{{ item.label }}</view>
			  </picker-view-column>
			  <picker-view-column>
			    <view v-for="(item, index) in cities" :key="index">{{ item.label }}</view>
			  </picker-view-column>
			  <picker-view-column>
			    <view v-for="(item, index) in areas" :key="index">{{ item.label }}</view>
			  </picker-view-column>
			</picker-view>
		</view>
        
      </view>
    </uni-popup>
  </view>
</template>

<script>
import areaData from '@/common/area-data-min.js'; // 确保路径正确

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pickerValue: [0, 0, 0],
      provinces: [],
      cities: [],
      areas: [],
      selectedProvince: null,
      selectedCity: null,
      selectedArea: null
    };
  },
  created() {
    this.provinces = areaData;
    this.cities = this.provinces[0].children;
    this.areas = this.cities[0].children;
  },
  methods: {
    bindChange(e) {
      const val = e.detail.value;
      this.pickerValue = val;
      this.cities = this.provinces[val[0]].children;
      this.areas = this.cities[val[1]].children;

      this.selectedProvince = this.provinces[val[0]];
      this.selectedCity = this.cities[val[1]];
      this.selectedArea = this.areas[val[2]];
    },
    cancelSelection() {
      this.$emit('update:show', false);
    },
    confirmSelection() {
      this.$emit('selected', this.selectedProvince, this.selectedCity, this.selectedArea);
      this.$emit('update:show', false);
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.$refs.popup.open();
        });
      } else {
        this.$refs.popup.close();
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
.popup-content {
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
  
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.cancel-button, .confirm-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: #fff;
  background-color: #007aff;
}

.cancel-button {
  background-color: #ccc;
}

picker-view {
  height: 300px;
}
</style>
