<template>
  <view class="popup-area">
    <view class="currentList">
      <text
        v-for="(item, index) in areas"
        :key="index"
        class="selectedName"
        :class="currentColumn === index ? 'selectedName--active' : ''"
        @click="viewArea(index)"
        >{{ item.name }}
      </text>
    </view>
    <view class="swiper">
      <view
        v-for="(area, index) in areas"
        :key="index"
        class="area-container"
        :class="{ active: currentColumn === index }"
      >
        <scroll-view :scroll-y="true" class="scroll-area">
          <p
            v-for="item in area.list"
            :key="item.addrName"
            class="areaName"
            :class="item.addrId === area.selectedId ? 'areaName--active' : ''"
            @click="selectArea(item.addrId, item.addrName, index)"
          >
            {{ item.addrName }}
          </p>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import address from "../api/address.api";
export default {
  name: "PopupArea",
  props: {
    resetOnClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      areas: [],
      currentColumn: 0
    };
  },
  computed: {},
  created() {
    this.loadNext();
  },
  methods: {
    async loadNext(id) {
      const [{ addrList: list }] = await address.loadArea(id);
      console.log("Address List===============>", list);
      if (!list.length) {
        this.finish();
        return;
      }
      this.areas.push({
        name: "请选择",
        id,
        selectedId: "",
        list
      });
      return true;
    },
    async selectArea(id, name, index) {
      if (id === this.areas[index].selectedId) return;

      this.areas[index].selectedId = id;
      this.areas[index].name = name;
      this.areas = this.areas.slice(0, index + 1);
      const status = await this.loadNext(id);
      if (status) {
        this.viewArea(index + 1);
      }
    },
    viewArea(index) {
      this.currentColumn = index;
    },
    finish() {
      this.$emit(
        "finish",
        this.areas.map(area => {
          return {
            name: area.name,
            selectedId: area.selectedId
          };
        })
      );
      this.reset();
    },
    reset() {
      if (!this.resetOnClose) return;
      // 参考京东，只保留省份数据
      this.areas = [
        {
          name: "请选择",
          id: "",
          selectedId: "",
          list: this.areas[0].list
        }
      ];
      this.currentColumn = 0;
    }
  }
};
</script>
<style lang="scss" scoped>
// todo: 整理uni.scss后，修改组件样式
.popup-area {
  background-color: $uni-bg-color;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .currentList {
    display: flex;
    flex-direction: row;
    position: relative;
    &:after {
      position: absolute;
      content: "";
      width: 100%;
      left: 0;
      bottom: 0;
      height: 1px;
      background-color: #dcdcdc;
      -webkit-transform: scale(1, 0.5);
      transform: scale(1, 0.5);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
    }
    .selectedName {
      // flex: 1;
      font-size: 30rpx;
      line-height: 50rpx;
      color: $uni-text-color;
      padding: 10rpx 30rpx;
      max-width: 180rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      &--active {
        color: $font-color-search;
        font-weight: bold;
      }
    }
  }

  .swiper {
    height: 400px;
    .area-container {
      display: none;
      &.active {
        display: block;
      }
    }
    .areaName {
      font-size: 26rpx;
      line-height: 36rpx;
      color: $uni-text-color;
      padding: $uni-spacing-col-base 30rpx;
      &--active {
        color: $font-color-search;
        font-weight: bold;
      }
    }
  }
}
.scroll-area {
  height: 400px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
