<template>
  <view>
    <view class="flex-center h-44px text-white">
      <view class="flex-center flex-1" @click="openCity">
        <view>{{ selected.area_text }}</view>
        <uv-icon
          color="white"
          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
          color="white"
          class="ml-10rpx"
          size="20rpx"
          name="arrow-down-fill"
        ></uv-icon>
      </view>
    </view>
    <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>
