<template>
  <view class="wrapper" v-show="isShowMask">
    <transition name="content">
      <view class="content_view" v-show="isShow">
        <view class="title_view">
          <view class="title">请选择所在地区</view>
          <view class="close_view" @click="hidden">
            <icon class="close_icon" :type="'clear'" size="26" />
          </view>
        </view>
        <view class="select_top">
          <view class="select_top_item" ref="select_top_item" v-for="(item,index) in dataList" :key="index"
            @click="select_top_item_click(index)">
            <text class="address_value">{{item.name || '请选择'}}</text>
            <view :class="index === currentIndex?'indicator':'no-indicator'" ref="indicator"></view>
          </view>
        </view>
        <swiper class="swiper" :current="currentIndex" @change="swiperChange">
          <swiper-item v-for="(swiper_item,swiper_index) in dataList" :key="swiper_index">
            <view class="swiper-item">
              <scroll-view class="scroll-view-item" scroll-y="true">
                <view class="address_item" v-for="(item,index) in cityAreaArray[swiper_index]" :key="index"
                  @click="address_item_click(swiper_index,index)">
                  {{item.name}}
                  <uni-icons class="address_item_icon" v-if="selectIndexArr[swiper_index] === index"
                    type="checkmarkempty" color="#009b69"></uni-icons>
                </view>
              </scroll-view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </transition>
    <view class="mask" @click="hidden" v-show="isShowMask"></view>
  </view>
</template>

<script>
  import cityData from '../../static/yixuan-selectAddress/city.json'
  export default {
    data() {
      return {
        isShow: false,
        isShowMask: false,
        dataList: ['请选择'],
        currentIndex: 0,
        cityData: {}, // 省市区对象
        cityAreaArray: [], // 省市区数组
        selectIndexArr: [], // 省市区index
        indicatorStyleLeft: 16
      };
    },
    props: {
      addressIdList: {
        type: Array
      }
    },
    methods: {
      show() {
        this.isShow = true
        this.isShowMask = true
      },
      hidden() {
        this.isShow = false
        setTimeout(() => {
          this.isShowMask = false
        }, 500);
      },
      select_top_item_click(index) {
        console.log('select_top_item_click')
        this.currentIndex = index
        this.$nextTick(() => {
          this.changeIndicator(index)
        })

      },
      swiperChange(event) {
        let index = event.detail.current
        this.currentIndex = index

        this.changeIndicator(index)
      },
      changeIndicator(index) {
        let indicatorWidth = 30
        const query = uni.createSelectorQuery().in(this);
        let arr = query.selectAll('.select_top_item .address_value')
        arr.fields({
          size: true,
          scrollOffset: false
        }, data => {
          let itemWidth = data[index]["width"] > 80 ? 70 : data[index]["width"]
          let itemCenterX = 10 + index * 80 + itemWidth / 2
          let left = itemCenterX - indicatorWidth / 2
          // console.log('changeIndicator',itemWidth,index)
          this.indicatorStyleLeft = left

        }).exec();


      },
      address_item_click(swiper_index, index) {
        this.selectIndexArr.splice(swiper_index, 5, index)
        //判断当前是否为最下一级
        if (swiper_index === 0) { //第一级
          let currentObj = this.cityData[index]
          let city = {
            name: currentObj.name,
            id: currentObj.region_id
          }
          console.log(city)
          this.dataList.splice(swiper_index, 5, city)
          this.dataList.splice(swiper_index + 1, 0, '请选择')
          this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["city"])
          console.log(this.cityAreaArray)
          setTimeout(() => {
            this.currentIndex = 1
            this.changeIndicator(1)
          }, 50);
        } else {
          let currentAreaArray = this.cityAreaArray[swiper_index]
          let currentObj = currentAreaArray[index]
          let area = currentObj["area"]
          console.log(currentAreaArray)
          if (area !== undefined) {
            let city = {
              name: currentObj.name,
              id: currentObj.region_id
            }
            this.dataList.splice(swiper_index, 5, city)
            this.dataList.splice(swiper_index + 1, 0, '请选择')
            this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["area"])
            setTimeout(() => {
              this.currentIndex = swiper_index + 1
              this.changeIndicator(swiper_index + 1)
            }, 50);

          } else { //是最下一级
            let city = {
              name: currentObj.name,
              id: currentObj.region_id
            }
            this.dataList.splice(swiper_index, 1, city)
            //选择成功返回数据
            this.$emit("selectAddress", this.dataList)
            this.$nextTick(() => {
              this.changeIndicator(swiper_index)
            })
            setTimeout(() => {
              this.isShow = false
            }, 100);
            setTimeout(() => {
              this.isShowMask = false
            }, 500);
          }
        }
      }
    },
    created() {
      this.cityData = cityData
      this.cityAreaArray.push(cityData)
      if (this.addressIdList.length > 0) {
        const privinceId = this.addressIdList[0] // 省份id请求接口返回
        const cityId = this.addressIdList[1] // 城市id请求接口返回
        const areaId = this.addressIdList[2] // 区域id请求接口返回
        const privince = cityData // 省份数组
        let city = [] // 城市数组
        let area = [] // 区域数组
        let cityAreaArray = []
        let selectIndexArr = []
        let dataList = []
        let pIndex = privince.findIndex((item) => item.region_id === privinceId) // 省份的id
        cityAreaArray.push(privince)
        selectIndexArr.push(pIndex)
        dataList.push(privince[pIndex])
        city = privince[pIndex].city
        let cIndex = city.findIndex((item) => item.region_id === cityId) // 城市的id
        cityAreaArray.push(city)
        selectIndexArr.push(cIndex)
        dataList.push(city[cIndex])
        area = city[cIndex].area
        let aIndex = area.findIndex((item) => item.region_id === areaId) // 城市的id
        cityAreaArray.push(area)
        selectIndexArr.push(aIndex)
        dataList.push(area[aIndex])
        this.cityAreaArray = cityAreaArray
        this.selectIndexArr = selectIndexArr
        this.dataList = dataList
        this.$emit("selectAddress", this.dataList)
      }
    }
  }
</script>

<style lang="scss">
  // 不换行
  @mixin no-wrap() {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .wrapper {
    z-index: 1999;
    position: absolute;
    top: -44px;
    left: 0;
    bottom: 0;
    right: 0;

    .content_view {
      z-index: 999;
      background: white;
      position: absolute;
      height: 60%;
      left: 0;
      bottom: 0;
      right: 0;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;

      .title_view {
        height: 120rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 $uni-spacing-row-sm;
        position: relative;
        border-bottom: solid 1rpx #f8f8f8;

        .title {
          font-size: uni-font-size-sm;
        }

        .close_view {
          height: 60px;
          width: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          right: 0;
        }
      }

      .select_top {
        height: 8%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 20rpx 0 20rpx;
        position: relative;
        margin: 30rpx 0 50rpx 0;
        box-sizing: border-box;

        .select_top_item {
          max-width: 33.33%;
          float: left;
          font-size: $title-size - 1;
          color: $text-price;
          text-align: left;
          @include no-wrap();
          margin-right: $margin*1;
          // display: flex;
          // flex-direction: column;
          // justify-content: center;
          // align-items: center;
          // box-sizing: border-box;
        }

        .indicator {
          width: 30px;
          height: 2px;
          margin-top: 20rpx;
          background: $text-price;
          transition: left 0.5s ease;
        }

        .no-indicator {
          background: #fff;
          width: 30px;
          height: 2px;
          margin-top: 20rpx;
          transition: left 0.5s ease;
        }
      }

      .swiper {
        height: 70%;
        position: relative;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        .swiper-item {
          height: 100%;

          .scroll-view-item {
            height: 100%;
            padding: 0 10px;

            .address_item {
              padding: $padding*1.5 0;
              border-bottom: solid 0.2rpx #f7f7f7;
              font-size: $title-size - 1;
              display: flex;
              align-items: center;

              .address_item_icon {
                margin-left: 20rpx;
                // width: 20px;
                // height: 20px;
                // margin-right: 10px;
              }
            }
          }
        }
      }
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: $uni-text-color-grey;
      opacity: 0.7;
    }
  }

  .content-enter {
    transform: translateY(100%);
  }

  .content-enter-to {
    transform: translateY(0%);
  }

  .content-enter-active {
    transition: transform 0.5s;
  }

  .content-leave {
    transform: translateY(0%);
  }

  .content-leave-to {
    transform: translateY(100%);
  }

  .content-leave-active {
    transition: transform 0.5s;
  }
</style>
