


<template>
  <div class="page">
    <ComNavbar title="测试区域组件" :fixed="false"></ComNavbar>
 <!--areaId 为头部区域对象ID
     areaName为区域对象名称
  queryDataById 为接口回调请求函数
  subAreaList 为请求接口函数后的区域数据 格式为数组 【{areaId:id,areaName:name}】
  selectAreaHandle为点击确定后返回的选择对象 -->
  <top-area-select
      :area-id="areaId"
      :area-name='areaName'
      @queryAreaCallBack="queryDataById"
      :sub-area-list="sonAreaList"
      @selectAreaHandle="selectAreaHandle"
  ></top-area-select>

  </div>
</template>

<script>


import TopAreaSelect from './components/top-area-select.vue'
import CommonHttp from "@/api/common"

export default {
  components: {

      [TopAreaSelect.name]:TopAreaSelect
  },
  data() {
      return {
          areaId:'460000000000',
          areaName:'海南',
          sonAreaList:[]
      }
  },
  created() {


  },

  methods: {




      /**
       * @description: 请求数据
       * @param {*}
       * @return {*}
       */
      queryDataById(targetAreaObj){

          CommonHttp.subPacList(targetAreaObj.areaId, targetAreaObj.pacLevel)
              .then(res => {

                    //  this.sonAreaList = _areaList
                  this.sonAreaList = res.data
              })
              .catch(error => {
                  console.log(error)
              })

      },
      /**
       * @description: 点击确定后的选择数据
       * @param {*}
       * @return {*}
       */
      selectAreaHandle(val){ 

          console.log('pacId-->'+val.pacObjce.areaId)
          console.log('pacName-->'+val.pacObjce.areaName)
          console.log('val-->'+JSON.stringify(val))
          this.initPacname=val.pacObjce.areaName
          this.initPacId=val.pacObjce.areaId
      }
  }
}
</script>

<style lang="scss" scoped>

</style>
