<template>
  <van-popup v-model="showPopup" position="bottom" round>
    <div class="area-select-popup">
      <div class="header flex-default">
        <div class="title">请选择所在地区</div>
        <m-icon icon="icon-close-square" :size="16" @click="handleClose" />
      </div>
      <div class="area-select flex-default">
        <div
          class="item"
          v-for="(item, index) of selectArea"
          :class="selectIndex == index ? ['active', 'item'] : ['item']"
          :key="`area-item-${index}`"
          @click="changeIndex(index)"
        >
          <div class="name">{{ item.name }}</div>
          <div class="line" />
        </div>
      </div>

      <van-swipe ref="areaSwiper" class="area-swiper" :show-indicators="false" :loop="false">
        <van-swipe-item v-for="(item, i) of areaList" :key="'areaObj-item-' + i">
          <div class="area-list">
            <div
              v-for="(iitem, ii) of item"
              :key="`area-${i}-${ii}`"
              class="area-name"
              @click="changeSubIndex(iitem, i, ii)"
            >
              {{ iitem.name }}
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </van-popup>
</template>

<script>
import { deepCopy } from "@/utils/common";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value(val) {
      this.showPopup = val;
    },
    showPopup(val) {
      this.$emit("input", val);
    },
    selectIndex(val){
      this.$refs.areaSwiper.swipeTo(val)
    }
  },
  data() {
    return {
      showPopup: false,
      selectArea: [
        {
          name: "请选择",
          code: null,
        },
      ],
      areaList: [],
      selectIndex: 0,
      defaultArea: null,
      areaListCache: null,
    };
  },
  methods: {
    popupChange(val) {
      let { show } = val;
      this.$emit("input", show);
      if (show && this.defaultArea) {
        this.selectArea = deepCopy(this.defaultArea);
        this.areaList = deepCopy(this.areaListCache);
      }
      if (!show && (!this.selectArea[3] || !this.selectArea[3].code)) {
      }
      if (!show) {
        setTimeout(() => {
          this.selectIndex = 0;
        }, 50);
      }
    },
    handleClose() {
      this.$refs.areaPopup.close();
    },
    changeIndex(index) {
      this.selectIndex = index;
    },
    changeSubIndex(item, i, ii) {
      if (this.selectArea[i].code === item.code) {
        this.selectIndex++;
        return;
      }

      let apiName = "";
      let { code, name } = item;
      this.$set(this.selectArea, i, {
        code,
        name,
      });
      if (i == 3) {
        this.handleConfirm();
        return;
      }

      if (i == 0) {
        apiName = "getCityList";
      } else if (i == 1) {
        apiName = "getCountyList";
      } else if (i == 2) {
        apiName = "getStreetList";
      }

      this.requestArea(apiName, code, i);
    },
    swiperChange(e) {
      this.selectIndex = e.target.current || e.detail.current;
    },
    requestArea(apiName, code, i) {
      this.$api({
        apiName,
        postData: code,
        success: (res) => {
          if (!res || res.length == 0) {
            this.handleConfirm();
            return;
          }
          if (this.selectArea[i + 1]) {
            this.selectArea.splice(i + 1);
            this.areaList.splice(i + 1);
          }
          this.selectArea.push({
            name: "请选择",
            code: null,
          });
          this.areaList.push(res);

          setTimeout(() => {
            this.selectIndex = i + 1;
          }, 50);
        },
      });
    },
    handleConfirm() {
      this.showPopup = false
      this.$emit("confirm", deepCopy(this.selectArea));
      this.defaultArea = deepCopy(this.selectArea);
      this.areaListCache = deepCopy(this.areaList);
    },
  },
  mounted() {
    this.$api({
      apiName: "getProvinceList",
      success: (res) => {
        this.$set(this.areaList, 0, res);
      },
    });
  },
};
</script>

<style lang="less">
.area-select-popup {
  background: #ffffff;
  border-radius: 14px 14px 0px 0px;

  .header {
    padding: 14px 16px 10px 16px;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 17px;
      color: #140603;
      font-weight: bold;
      line-height: 30px;
    }
  }

  .area-select {
    padding: 10px 16px 0 16px;
    border-bottom: 1px solid #f1f1f1;

    .item {
      color: #140603;
      font-size: 12px;
      margin-right: 15px;

      .name {
        text-align: center;
        margin-bottom: 5px;
      }

      .line {
        margin: 0 auto;
        height: 2px;
        width: 100%;
        border-radius: 1px;
        background: transparent;
      }
    }

    .active {
      .name {
        color: #dd2e41;
      }

      .line {
        background: #dd2e41;
      }
    }
  }

  .area-swiper {
    height: 410px;
  }

  .area-list {
    height: 100%;
    overflow-y: auto;

    .area-name {
      font-size: 12px;
      padding: 10px 25px;
      color: #2b2b3a;
    }
  }
}
</style>
