<template>
  <view >
    <picker class="pickerList" mode="multiSelector"
            :range="newCategotyDataList"
            :value="multiIndex"
            range-key="name"
            @change="bindPickerChange"
            @columnchange="pickerColumnchange">
<!--      <view>{{newCategotyDataList[0][0].name}}&#45;&#45;{{newCategotyDataList[1][0]}}&#45;&#45;{{newCategotyDataList[0].childList[0].childList[0].name}}</view>-->
      <view class="">{{select}}</view>
    </picker>
  </view>


</template>


<script>
import { getAreaListAll } from '@/api/index'
export default {
  data() {
    return {
      multiIndex:[0,0,0],
      newCategotyDataList:[[],[],[]],
      categoryArr: {},
      select:"請選擇地區",
    }
  },
  onLoad:function(e) {

    this.getAddressList()


  },
  methods: {
    getAddressList(){
      this.$api.getAreaListAll({parentId:'320500'}).then((res) => {
        if(res.code===200){
          this.categoryArr=res.data
          for(let i=0; i<this.categoryArr.length; i++){
            // console.log(this.categoryArr[i].name);
            this.newCategotyDataList[0].push(this.categoryArr[i])
          }
          for(let i=0; i<this.categoryArr[0].childList.length; i++){
            // console.log(this.categoryArr[0].city[i].name)
            this.newCategotyDataList[1].push(this.categoryArr[0].childList[i])
          }
          for(let i=0; i<this.categoryArr[0].childList[0].childList.length; i++){
            // console.log(this.categoryArr[0].city[0].area)
            this.newCategotyDataList[2].push(this.categoryArr[0].childList[0].childList[i])
          }
          console.log(this.newCategotyDataList,this.categoryArr[0].name)
        }
      })
    },
    pickerColumnchange(e){
      // 第幾列滑動
      // console.log(e.detail.column);
      // 第幾列滑動的下標
      // console.log(e.detail.value)
      // 第一列滑動
      if(e.detail.column === 0){
        this.multiIndex[0] =  e.detail.value
        // console.log('第一列滑動');
        // this.newCategotyDataList[1] = [];
        this.newCategotyDataList[1] = this.categoryArr[this.multiIndex[0]].childList.map((item,index)=>{
           console.log( item.name)
          return item.name
        })
        // console.log(this.multiIndex)
        if(this.categoryArr[this.multiIndex[0]].childList.length === 1){
          this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].childList[0].childList.map((item,index)=>{
            // console.log(item)
            return item
          })
        }else{
          this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].childList[this.multiIndex[1]].childList.map((item,index)=>{
            // console.log(item)
            return item
          })
        }
        // 第一列滑動  第二列 和第三列 都變為第一個
        this.multiIndex.splice(1, 1, 0)
        this.multiIndex.splice(2, 1, 0)
      }
      // 第二列滑動
      if(e.detail.column === 1){
        this.multiIndex[1] =  e.detail.value
        // console.log('第二列滑動');
        // console.log(this.multiIndex)
        this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].childList[this.multiIndex[1]].childList.map((item,index)=>{
          // console.log(item)
          return item
        })
        // 第二列 滑動 第三列 變成第一個
        this.multiIndex.splice(2, 1, 0)
      }
      // 第三列滑動
      if(e.detail.column === 2){
        this.multiIndex[2] =  e.detail.value
        // console.log('第三列滑動')
        // console.log(this.multiIndex)
      }
    },
    bindPickerChange(e){
      this.multiIndex = e.detail.value;
      // 陣列內的下標
      // console.log(this.multiIndex);
      // 獲取一級類目
       console.log(this.newCategotyDataList[0][this.multiIndex[0]])
      // 獲取二級類目
      // console.log(this.newCategotyDataList[1][this.multiIndex[1]])
      // 獲取三級類目
      // console.log(this.newCategotyDataList[2][this.multiIndex[2]])
      this.select = `${this.newCategotyDataList[0][this.multiIndex[0]].name+this.newCategotyDataList[1][this.multiIndex[1]].name+this.newCategotyDataList[2][this.multiIndex[2]].name}`;
     // this.selectObj=this.newCategotyDataList[2][this.multiIndex[2]];
    },

  }
}
</script>

<style>
.scroll{
  overflow: auto;
}
.item{
  height: 50px;
  background: pink;
  border: 1px solid #ddd;
}
.bottom{
  height: 40px;
  line-height: 40px;
}
</style>