<template>
  <view class="area-picker">
    <picker 
      mode="multiSelector" 
      :range="newProvinceDataList" 
      range-key="name" 
      @change="changeArea" 
      @columnchange="pickerColumnchange"
      :value="multiIndex"
    >
      <!-- 使用插槽，允许父组件自定义显示样式 -->
      <slot 
        :selectedText="selectedText"
        :placeholder="placeholder"
        :provinceData="newProvinceDataList[0]"
        :cityData="newProvinceDataList[1]"
        :areaData="newProvinceDataList[2]"
        :multiIndex="multiIndex"
        :currentSelection="getCurrentSelection()"
      >
        <!-- 默认显示样式 -->
        <view class="picker-display">
          <text class="picker-text" :class="{ 'placeholder': !selectedText }">{{ selectedText || placeholder }}</text>
          <image
            class="dropdown-icon"
            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNiA2TDExIDEiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
            mode="heightFix"
          ></image>
        </view>
      </slot>
    </picker>
  </view>
</template>

<script>
export default {
  name: 'AreaPicker',
  props: {
    // 占位符文本
    placeholder: {
      type: String,
      default: '请选择地区'
    },
    // 默认选中的省市区ID
    defaultValue: {
      type: Object,
      default: () => ({
        provinceId: null,
        cityId: null,
        areaId: null
      })
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      // 省市区数据
      columns: [],
      newProvinceDataList: [[], [], []],
      multiIndex: [0, 0, 0],
      provinceId: null,
      cityId: null,
      areaId: null,
      ready: false,
	  selectedText: '',
    }
  },
  mounted() {
    this.getSeldCityList()
  },
  watch: {
    defaultValue: {
      handler(newVal) {
		  console.log('----有值回显')
        if (newVal && newVal.provinceId && this.ready) {
          this.setDefaultValue(newVal)
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 获取省市区数据
    getSeldCityList() {
      // 尝试多种方式获取数据
      let requestMethod = null;
      
      // 1. 尝试使用父组件的 Post 方法
      if (this.$parent && this.$parent.Post) {
        requestMethod = this.$parent.Post;
      }
      // 2. 尝试使用全局的 Post 方法（如果通过 mixin 引入）
      else if (this.Post) {
        requestMethod = this.Post;
      }
      // 3. 尝试使用 uni.request
      else {
        this.requestWithUni();
        return;
      }
      
      requestMethod({}, '/api/areas/getAll').then(res => {
        if (res) {
          this.processAreaData(res.data)
        }
      }).catch(err => {
        console.warn('省市区数据获取失败:', err)
        // 可以在这里设置一些默认数据或提示用户
      })
    },
    
    // 使用 uni.request 获取数据的备用方法
    requestWithUni() {
      uni.request({
        url: '/api/areas/getAll', // 这里需要根据实际的完整URL调整
        method: 'POST',
        data: {},
        success: (res) => {
          if (res.data) {
            this.processAreaData(res.data.data || res.data)
          }
        },
        fail: (err) => {
          console.warn('省市区数据获取失败:', err)
          // 可以提供一些默认的省市区数据或提示用户
          uni.showToast({
            title: '地区数据加载失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 处理省市区数据
    processAreaData(data) {
      var result = {}
      for (var i = 0; i < data.length; i++) {
        var item = data[i]
        if (item.parent_id == 0) {
          continue
        }
        // 获取省
        if (item.parent_id == "1") {
          result[item.id.toString()] = {}
          result[item.id.toString()].children = []
          result[item.id.toString()].name = item.name
          result[item.id.toString()].id = item.id
        } else if (result[item.parent_id.toString()]) {
          // 填充市
          var t = {
            id: item.id,
            name: item.name,
            children: []
          }
          result[item.parent_id.toString()].children.push(t)
        } else {
          // 填充区
          var k = {
            id: item.id,
            name: item.name
          }
          for (var j = 0; j < result[item.parent_id.toString().substr(0, 2) + "0000"].children.length; j++) {
            if (result[item.parent_id.toString().substr(0, 2) + "0000"].children[j].id == item.parent_id) {
              result[item.parent_id.toString().substr(0, 2) + "0000"].children[j].children.push(k)
            }
          }
        }
      }
      
      var r = []
      // 将Object转为Array
      for (var i in result) {
        r.push(result[i])
      }
      
      this.columns = r
      this.initPickerData()
      this.ready = true
      
      // 如果有默认值，设置默认选中
      if (this.defaultValue && this.defaultValue.provinceId) {
        this.setDefaultValue(this.defaultValue)
      }
    },
    
    // 初始化picker数据
    initPickerData() {
      if (this.columns.length === 0) return
      
      // 初始化省份数据
      this.newProvinceDataList[0] = this.columns.map(item => ({
        name: item.name,
        id: item.id
      }))
      
      // 初始化城市数据（默认第一个省份的城市）
      if (this.columns[0] && this.columns[0].children) {
        this.newProvinceDataList[1] = this.columns[0].children.map(item => ({
          name: item.name,
          id: item.id
        }))
      }
      
      // 初始化区县数据（默认第一个城市的区县）
      if (this.columns[0] && this.columns[0].children[0] && this.columns[0].children[0].children) {
        this.newProvinceDataList[2] = this.columns[0].children[0].children.map(item => ({
          name: item.name,
          id: item.id
        }))
      }
    },
    
    // 设置默认值
    setDefaultValue(defaultValue) {
      if (!this.ready || !defaultValue) return
      
      // 查找省份索引
      const provinceIndex = this.newProvinceDataList[0].findIndex(item => item.id == defaultValue.provinceId)
      if (provinceIndex === -1) return
      
      this.multiIndex[0] = provinceIndex
      
      // 更新城市数据
      this.newProvinceDataList[1] = this.columns[provinceIndex].children.map(item => ({
        name: item.name,
        id: item.id
      }))
      
      // 查找城市索引
      const cityIndex = this.newProvinceDataList[1].findIndex(item => item.id == defaultValue.cityId)
      if (cityIndex !== -1) {
        this.multiIndex[1] = cityIndex
        
        // 更新区县数据
        this.newProvinceDataList[2] = this.columns[provinceIndex].children[cityIndex].children.map(item => ({
          name: item.name,
          id: item.id
        }))
        
        // 查找区县索引
        const areaIndex = this.newProvinceDataList[2].findIndex(item => item.id == defaultValue.areaId)
        if (areaIndex !== -1) {
          this.multiIndex[2] = areaIndex
        }
      }
      
      this.updateSelectedText()
    },
    
    // 选择完成事件
    changeArea(e) {
      this.multiIndex = e.detail.value
      this.updateSelectedText()
      this.emitChange()
    },
    
    // 列滑动事件
    pickerColumnchange(e) {
      const column = e.detail.column
      const value = e.detail.value
      
      if (column === 0) {
        // 第一列滑动（省份）
        this.multiIndex[0] = value
        
        // 更新城市数据
        this.newProvinceDataList[1] = this.columns[this.multiIndex[0]].children.map(item => ({
          name: item.name,
          id: item.id
        }))
        
        // 更新区县数据
        if (this.columns[this.multiIndex[0]].children.length === 1) {
          this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[0].children.map(item => ({
            name: item.name,
            id: item.id
          }))
        } else {
          this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map(item => ({
            name: item.name,
            id: item.id
          }))
        }
        
        // 重置城市和区县索引
        this.multiIndex.splice(1, 1, 0)
        this.multiIndex.splice(2, 1, 0)
      } else if (column === 1) {
        // 第二列滑动（城市）
        this.multiIndex[1] = value
        
        // 更新区县数据
        this.newProvinceDataList[2] = this.columns[this.multiIndex[0]].children[this.multiIndex[1]].children.map(item => ({
          name: item.name,
          id: item.id
        }))
        
        // 重置区县索引
        this.multiIndex.splice(2, 1, 0)
      } else if (column === 2) {
        // 第三列滑动（区县）
        this.multiIndex[2] = value
      }
    },
    
    // 更新选中的省市区ID和显示文本
    updateSelectedText() {
      if (this.newProvinceDataList[0][this.multiIndex[0]] && 
          this.newProvinceDataList[1][this.multiIndex[1]] && 
          this.newProvinceDataList[2][this.multiIndex[2]]) {
        
        this.selectedText = 
                           this.newProvinceDataList[1][this.multiIndex[1]].name 
        
        this.provinceId = this.newProvinceDataList[0][this.multiIndex[0]].id
        this.cityId = this.newProvinceDataList[1][this.multiIndex[1]].id
        this.areaId = this.newProvinceDataList[2][this.multiIndex[2]].id
      }
    },
    
    // 触发change事件
    emitChange() {
      const selectedText = this.newProvinceDataList[0][this.multiIndex[0]].name + 
                          this.newProvinceDataList[1][this.multiIndex[1]].name + 
                          this.newProvinceDataList[2][this.multiIndex[2]].name
      
      const result = {
        provinceId: this.provinceId,
        cityId: this.cityId,
        areaId: this.areaId,
        province: this.newProvinceDataList[0][this.multiIndex[0]]?.name || '',
        city: this.newProvinceDataList[1][this.multiIndex[1]]?.name || '',
        area: this.newProvinceDataList[2][this.multiIndex[2]]?.name || '',
        fullText: selectedText
      }
      
      this.$emit('change', result)
    },
    
    // 获取当前选中值
    getValue() {
      const selectedText = this.newProvinceDataList[0][this.multiIndex[0]]?.name + 
                          this.newProvinceDataList[1][this.multiIndex[1]]?.name + 
                          this.newProvinceDataList[2][this.multiIndex[2]]?.name
      
      return {
        provinceId: this.provinceId,
        cityId: this.cityId,
        areaId: this.areaId,
        provinceName: this.newProvinceDataList[0][this.multiIndex[0]]?.name || '',
        cityName: this.newProvinceDataList[1][this.multiIndex[1]]?.name || '',
        areaName: this.newProvinceDataList[2][this.multiIndex[2]]?.name || '',
        fullText: selectedText
      }
    },
    
    // 重置选择
    reset() {
      this.multiIndex = [0, 0, 0]
      this.selectedText = ''
      this.provinceId = null
      this.cityId = null
      this.areaId = null
      this.initPickerData()
    },
    
    // 获取当前选中的详细信息（供插槽使用）
    getCurrentSelection() {
      if (!this.newProvinceDataList[0][this.multiIndex[0]] || 
          !this.newProvinceDataList[1][this.multiIndex[1]] || 
          !this.newProvinceDataList[2][this.multiIndex[2]]) {
        return {
          province: null,
          city: null,
          area: null,
          fullText: ''
        }
      }
      
      return {
        province: this.newProvinceDataList[0][this.multiIndex[0]],
        city: this.newProvinceDataList[1][this.multiIndex[1]],
        area: this.newProvinceDataList[2][this.multiIndex[2]],
        fullText: this.newProvinceDataList[0][this.multiIndex[0]].name + 
                 this.newProvinceDataList[1][this.multiIndex[1]].name + 
                 this.newProvinceDataList[2][this.multiIndex[2]].name
      }
    }
  }
}
</script>

<style scoped lang="scss">
.area-picker {
  width: 100%;
}

.picker-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8rpx 16rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  background-color: #fff;
  min-height: 60rpx;
}

.picker-text {
  font-size: 30rpx;
  color: #333;
  flex: 1;
  
  &.placeholder {
    color: #999;
  }
}

.dropdown-icon {
  width: 24rpx;
  height: 16rpx;
  margin-left: 8rpx;
}
</style>