<template>
  <view>
    <view class="xd-select" >
      <view class="xd-select__title">请选择所在区域</view>
      <view class="xd-select__body">
        <view class="xd-select__body-warper">
          <view
            class="xd-select__body-item"
            v-for="(item,index) in getTitle"
            :key="index"
          >
            <view
              class="xd-select__body-item-text"
              @click="reSelectCity(index)"
            >{{city_name[index]||item}}</view>
            <view
              class="xd-select__body-item-icon"
              :style="{
                borderColor : styleMainColor,
                background: (level < index? '#fff': styleMainColor)
              }"
            ></view>
          </view>
        </view>
        <view class="xd-select__body-line" :style="{background:styleMainColor}"></view>
      </view>
      <view class="xd-select__list" v-if="cityList.length > 0">
        <view
          class="xd-select__list-item"
          v-for="(item,index) in cityList"
          :key="index"
        ><text @click="selectCity(item)">{{item.label}}</text></view>
      </view>
    </view>
  </view>
</template>

<script>
  import XdSwitch from "@/components/XdSwitch/XdSwitch";
  import XdButton from "@/components/XdButton/XdButton";
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';

  export default {
    name: "XdAddressSelect",
    components:{
      XdSwitch,
      XdButton,
      XdFontIcon
    },
    props:{
      maxLevel: {
        type: Number,
        default: 4,
      }

    },
    data(){
      return {
        //选择城市
        level: -1, //-1 表示未选择任何城市 备注：0=>省份/区域  1=>城市  2=> 区/县   3=>街道
        maxStatus: false, //是否已到最大级别
        cityList: [],
        city_name: [], //城市名称
        city_code: [], //城市代码
        city_selected_data: [],  //选择城市详情信息
        city_title: ['省份/区域','城市','区/县', '街道'],
        
        //使用全局主样式
        styleMainColor: '',
      }
    },

    computed:{
      getTitle(){
        return this.$xdUniHelper.cloneDeep(this.city_title).splice(0, this.maxLevel);
      },
    },
  
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor')
      
      if(this.level === -1) {
        this.getCity(0);
      }
    },


    methods:{

      /**
       * @description 重新选择城市
       */
      reSelectCity(level){
        //选择隔空城市不操作
        if(level - this.level > 1) {
          return;
        }
        this.city_code = this.city_code.splice(0, level);
        this.city_name = this.city_name.splice(0, level);
        this.city_selected_data = this.city_selected_data.splice(0, level);
        this.level = level - 1;

        //获取城市信息
        if(this.level === -1) {
          this.getCity(0);
        }else {
          this.getCity(this.city_code[this.level]);
        }
      },

      selectCity(item){
        if(this.level < (this.maxLevel - 1)){
          this.level++;
        }

        //保存信息
        this.$set(this.city_name, this.level, item.label);
        this.$set(this.city_code, this.level, item.value);
        this.$set(this.city_selected_data, this.level, item);

        //是否启动获取城市列表
        if(this.level < (this.maxLevel - 1)) {
          this.getCity(item.value);
        }
        //选择完成操作
        else{
          this.$emit('onSelect', {
            city_name: this.city_name,
            city_code: this.city_code,
            city: this.city_selected_data,
          })
        }
      },

      /**
       * @description 获取城市数据接口
       * @param parentId
       * @example 城市数据格式 [{label: '北京市'，value: 1},{label: '广东省'，value: 2}]
       */
      getCity(parentId){
        this.cityList = [];
        this.$emit('getCity', {parentId, level: this.level + 1} , (cityList)=>{
          if(!this.$xdUniHelper.isEmpty(cityList)) {
            if(!cityList[0]['label'] || !cityList[0]['value']){
              this.cityList = [];
              throw new Error(`
                1、当前数据格式错误，
                2、正确格式需包含(label,value)字段。
                例如: [{label: \'北京市\'，value: 1},{label: \'广东省\'，value: 2}]`
              );
            }
            else {
              this.cityList = this.$xdUniHelper.cloneDeep(cityList);
            }
          }
          else{
            //选择完成操作
            //this.isShowAddress = true;
            //this.setReceiptRegionName();
            this.cityList = [];
          }
        })
      },

    }
  }
</script>

<style scoped lang="less">

  .xd-address__body-content {
    line-height: unit(36, rpx) !important;

    & * {
      line-height: unit(36, rpx) !important;
    }

  }

  .xd-select {
    padding: unit(40, rpx);
    font-size: @xd-font-size-base + 1;

    &__title {
      text-align: center;
      line-height: unit(64, rpx);
      margin-bottom: unit(30,rpx);
    }

    &__body {
      position: relative;
      height: unit(60,rpx);

      &-warper {
        height: unit(60,rpx);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      &-item {
        height: 100%;
        width: 25%;
        flex: 1;
        text-align: center;
        position: relative;

        &-text {
          height: 100%;
          line-height: unit(60,rpx);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }

        &-icon {
          position: absolute;
          bottom: unit(-10,rpx);
          left: 50%;
          transform: translateX(-50%);
          height: unit(16,rpx);
          width: unit(16,rpx);
          box-sizing: border-box;
          border-width: 1px;
          border-style: solid;
          border-radius: 50%;
          background: #fff;
        }
      }

      &-line {
        height: 2px;
      }
    }

    &__list {
      margin: unit(20,rpx) 0;
      height: 25vh;
      overflow-y: auto;

      &-item {
        line-height: unit(60,rpx);
        height: unit(60,rpx);
      }
    }
  }
</style>
