<template>
  <view>
    <uv-sticky bgColor="#fff">
      <view class="flex-center h-44px">
        <view class="flex-center flex-1" @click="openCity">
          <view>{{ selected.area_text }}</view>
          <uv-icon
            class="ml-10rpx"
            size="20rpx"
            name="arrow-down-fill"
          ></uv-icon>
        </view>
        <view class="flex-center flex-1" @click="openStore">
          <view>{{ selected.store_text }}</view>
          <uv-icon
            class="ml-10rpx"
            size="20rpx"
            name="arrow-down-fill"
          ></uv-icon>
        </view>
      </view>
    </uv-sticky>
    <uv-picker
      ref="cityRef"
      keyName="name"
      :columns="cityList"
      :loading="cityLoading"
      cancelText="重置"
      @confirm="cityConfirm"
      @change="cityChange"
      @cancel="cityReset"
    />

    <uv-picker
      ref="storeRef"
      keyName="title"
      :columns="storeList"
      :loading="storeLoading"
      @confirm="storeConfirm"
    ></uv-picker>
  </view>
</template>
<script>
import { http } from '@/utils/request'

export default {
  name: 'StoreDropDown',
  data() {
    return {
      cityData: {},
      // 已选择的地区 {province: {code, name}, city: {code, name}, area_text: '全部区域', store: {id, name}, store_text: '全部门店'}
      selected: {
        area_text: '全部区域',
        store_text: '全部门店',
      },
      cityLoading: false,
      cityList: [],
      storeLoading: false,
      storeList: [],
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.cityLoading = true
      http.get('/region').then(res => {
        this.cityLoading = false
        this.cityData = res
        const firstProvince = this.cityData.province[0]
        this.cityList = [
          this.cityData.province,
          this.findCityByProvince(firstProvince.code)
        ]
        this.findStoreList()
      }).catch(error => {
        this.cityLoading = false
      })
    },
    findStoreList() {
      const params = {}
      if (this.selected.province) {
        params.province_code = this.selected.province.code
      }
      if (this.selected.city) {
        params.city_code = this.selected.city.code
      }
      this.storeLoading = true
      http.get('/auth/stores', { params }).then(res => {
        this.storeLoading = false
        res.unshift({title: '全部门店', id: 'all'})
        this.storeList = [res]
      }).catch(error => {
        this.storeLoading = false
      })
    },
    loadData() {
      console.log('加载数据....', this.selected)
      this.$emit('refresh', this.selected)
    },
    openCity() {
      this.$refs.cityRef.open()
    },
    cityReset() {
      this.selected = { area_text: '全部区域', store_text: '全部门店' }
      this.loadData()
    },
    cityConfirm(e) {
      const province = e.value[0]
      const city = e.value[1]
      if (province && city) {
        if (province.code != 'all') {
          this.selected.province = province
        }
        if (city.code != 'all') {
          this.selected.city = city
        }
        this.selected.area_text = city.code == 'all' ? province.name : city.name
        this.storeReset()
        this.findStoreList()
        this.loadData()
      }
    },
    cityChange(e) {
      const { columnIndex , index} = e
      if (columnIndex == 0) {
        const province = this.cityData.province[index]
        this.$refs.cityRef.setColumnValues(1, this.findCityByProvince(province.code))
      }
    },
    openStore() {
      this.$refs.storeRef.open()
    },
    storeConfirm(e) {
      const store = e.value[0]
      if (store) {
        if (store.id != 'all') {
          this.selected.store = store
        }
        this.selected.store_text = store.title
        this.loadData()
      }
    },
    storeReset() {
      this.selected.store_text = '全部门店'
      this.selected.store = null
    },
    findCityByProvince(provinceCode) {
      const cityList = this.cityData.city[provinceCode]
      if (cityList.length > 1 && cityList[0].code != 'all') {
        cityList.unshift({name: '全部', code: 'all'})
      }
      return cityList
    }
  }
}
</script>
