<template>
  <div class="page-area">
    <div class="page-title">AreaList 区域选择</div>
    <div class="page-body">
      <div class="container">
        <div class="container-title" @click="show = !show">基础用法</div>
        <div class="area-content">{{areaText}}</div>
        <cl-popup v-model="show" position="bottom">
          <cl-areaselect title="选择区域" :area-list="areaList" @change="areaChange" @cancel="areaCancel"></cl-areaselect>
        </cl-popup>
        
      </div>
      <br>
    </div>
  </div>
</template>
<script>
import AreaListData from '../mock/area2.json'
export default {
  name: '',
  data () {
    return {
      show: false,
      areaList: AreaListData,
      areaText: ''
    }
  },
  beforeCreate () {},
  created () {},
  mounted () {
  },
  computed: {},
  methods: {
    areaConfirm (value) {
      console.log(value)
    },
    areaCancel () {
      console.log('cancel')
      this.show = false
    },
    areaChange (value) {
      if (value.length === 3) {
        this.areaText = value[0].name + value[1].name + value[2].name
        this.show = false
      }
    }
  },
  components: {}
}
</script>
<style>
</style>
