<template>
  <div class="address" id="address">
    <div class="addressboxbg" @click="cancel"></div>
    <div class="addressbox">
      <p style="padding:15px 0;text-align:center;color:#333333;font-size:16px;margin:0;border-bottom:1px solid #eee">选择省/城市</p>
      <div class="addressSelect" >
        <div class="selectbox"></div>
        <ul @touchstart="touchStart($event,'province')"  @touchmove="touchMove($event,'province')"  @touchend="touchEnd($event,'province')" :style="provinceStyle" :class="[{'selectAni':addSelect}]">
          <li v-for="(item,index) in list" :class="[{'addSelectActive':index == provinceIndex}]" :key="index">{{item.name}}</li>
        </ul>
        <ul @touchstart="touchStart($event,'city')" @touchmove="touchMove($event,'city')" @touchend="touchEnd($event,'city')" :style="cityStyle" :class="[{'selectAni':addSelect}]">
          <li v-for="(item,index) in list2" :class="[{'addSelectActive':index == cityIndex}]" :key="index">{{item.name}}</li>
        </ul>
        <!-- <ul @touchstart="touchStart($event,'district')" @touchmove="touchMove($event,'district')" @touchend="touchEnd($event,'district')" :style="districtStyle" :class="[{'selectAni':addSelect}]">
          <li v-for="(item,index) in list3" :class="[{'addSelectActive':index == districtIndex}]" :key="index" >{{item.name}}</li>
        </ul> -->
        
      </div>
      <p class="text_btn" @click="complete">确 定</p>
    </div>
  </div>
</template>

<script>
import {
    getSonRegionByCodes,
    getRegionByCodes,
} from 'api/base_info/region/';
export default {
    props: ["addressShow"],
  data () {
    return {
      list: [
        {
          name:'全部',
          provinceId:undefined
        }
      ],
      list2: [
         {
          name:'全部',
          cityId:undefined
        }
      ],
      list3: [],
      provinceStyle: {
        WebkitTransform: 'translate3d(0px,0px,0px)'
      },
      cityStyle: {
        WebkitTransform: 'translate3d(0px,0px,0px)'
      },
      districtStyle: {
        WebkitTransform: 'translate3d(0px,0px,0px)'
      },
      startTop: 0,
      provinceIndex: 0,
      cityIndex: 0,
      districtIndex: 0,
      translateY: 0,
      maxScroll: 0,
      addHeight: 0,
      addSelect: false,
      provinceVal: '',
      cityVal: '',
      areaVal: '',
      val: {
        'provinceName': '省',
        'provinceId': undefined,
        'cityName': '市',
        'cityId':undefined
      },
    }
  },
  watch: {
    // addressShow(newValue, oldValue){
    //     if(!newValue){
    //       this.$emit("cancel", false);
    //     }
    // },
    // 监听省滑动
    provinceVal (value) {
      this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
        if (res.code === 1) {
          this.list2 = res.data.length > 1 ? res.data : [{name: '-'}]
          if (res.data.length < 1) {
            this.list3 = [{name: '-'}]
          }
          this.cityVal = this.list2[0].value
        }
      })
    },
    // 监听市滑动
    cityVal (value) {
      if (value) {
        this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
          if (res.code === 1) {
            this.list3 = res.data.length > 1 ? res.data : [{name: '-'}]
          }
        })
      }
    }
  },
  created () {
    // 初始化数据
    // 拿省的数据
    this.list = this.list.concat(getSonRegionByCodes(1));
    // 拿市区的数据
    // this.list2 = this.list2.concat(getSonRegionByCodes(110000));
  },
  methods: {
    // 点击取消
    cancel () {
      this.$emit('cancel', false)
    },
    // 点击完成
    complete () {
      this.$emit('complete', this.val)
    },
    // 滑动开始
    touchStart (e, val) {
      e.preventDefault()
      this.addSelect = false
      this.addHeight = e.currentTarget.children[0].offsetHeight
      this.maxScroll = this.addHeight * e.currentTarget.children.length
      this.startTop = e.targetTouches[0].pageY
      switch (val) {
        case 'province':
          this.translateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(',') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(',')))
          break
        case 'city':
          this.translateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(',') + 1, this.cityStyle.WebkitTransform.lastIndexOf(',')))
          break
        case 'district':
          this.translateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(',') + 1, this.districtStyle.WebkitTransform.lastIndexOf(',')))
          break
        default:
          break
      }
    },
    // 滑动进行中
    touchMove (e, val) {
      e.preventDefault()
      switch (val) {
        case 'province':
          if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
            this.provinceStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
          } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
            this.provinceStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
          } else {
            this.provinceStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
          }
          break
        case 'city':
          if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
            this.cityStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
          } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
            this.cityStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
          } else {
            this.cityStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
          }
          break
        case 'district':
          if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
            this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
          } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
            this.districtStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
          } else {
            this.districtStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
          }
          break
        default:
          break
      }
    },
    // 滑动结束
    touchEnd (e, val) {
      e.preventDefault()
      this.addSelect = true
      switch (val) {
        case 'province':
          let provinceTranslateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(',') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(',')))
          this.provinceIndex = -Math.round(provinceTranslateY / this.addHeight)
          this.provinceStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(provinceTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
          this.cityStyle.WebkitTransform = this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
          this.cityIndex = this.districtIndex = 0
          break
        case 'city':
          let cityTranslateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(',') + 1, this.cityStyle.WebkitTransform.lastIndexOf(',')))
          this.cityIndex = -Math.round(cityTranslateY / this.addHeight)
          this.cityStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(cityTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
          this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
          this.districtIndex = 0
          break
        case 'district':
          let districtTranslateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(',') + 1, this.districtStyle.WebkitTransform.lastIndexOf(',')))
          this.districtIndex = -Math.round(districtTranslateY / this.addHeight)
          this.districtStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(districtTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
          break
        default:
          break
      }
      // 滑动结束后 处理数据
      this.dataProcessing()
    },
    // 数据处理
    dataProcessing () {
      //更新城市数据
      if(this.list[this.provinceIndex].id==undefined){
        this.list2 = [
          {
            name:'全部',
            cityId:undefined
          }
        ]
      }else{
        this.list2 = [
          {
            name:'全部',
            cityId:undefined
          }
        ]
        this.list2 = this.list2.concat(getSonRegionByCodes(this.list[this.provinceIndex].id))
      }
      // 滑动数据传输 数据处理
      this.val.provinceName = this.list[this.provinceIndex].name
      this.val.provinceId = this.list[this.provinceIndex].id
      this.val.cityName = this.list2[this.cityIndex].name
      this.val.cityId = this.list2[this.cityIndex].id
      console.log(this.val)
    }
  }
}
</script>

<style scoped>
.address{
  position:absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.address .addressbox{
  height: 40%;
  position: fixed;
  z-index: 101;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  background: #fff;
  bottom: 0px;
  border-radius: 5px 5px 0 0
}
.address .addressbox .text_btn{
  height: 40px;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  background: #C1A170;
  margin: 0;
  position: absolute;
  width: 100%;
  bottom: 0px;
}
.addressSelect .selectbox{
  width: 100%;
  height: 32px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: 60px;
  background: #F8F8F8;
}
.address .addressboxbg{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
}
.addressSelect{width: 100%;height: 235px;position: relative; background: #fff;overflow: hidden; -webkit-mask-box-image: linear-gradient(0deg,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent); font-size: 14px;}
.addressSelect ul{margin-top: 0;width: 50%; position: absolute; left: 0; top:60px; -webkit-transform-style: preserve-3d; -webkit-backface-visibility:hidden; text-align: center; padding-left: 0;}
.addressSelect ul li{white-space : nowrap;overflow: hidden; text-overflow:ellipsis; color:#666; padding: 5px 0;font-size: 13px}
.addressSelect ul:nth-of-type(2){left: 50%;}
.addressSelect ul:nth-of-type(3){left: 66.666666%;}
.addressSelect ul li.addSelectActive{color:#171413; transform: scale(1.1); transition: 0.5s;font-size: 15px}
.selectAni{transition: 0.8s;}
</style>