<template>
	<van-area v-once :areaList="areaList" @confirm="areaConfirm" @cancel="areaCanccel" />
</template>


<script>
import areaList from './area.json';
import { Area } from 'vant';

export default {
  name: 'popup-area',

  data() {
    return {
      areaList
    };
  },

  methods: {
    areaCanccel() {
      this.$emit('cancel');
    },
    areaConfirm(areaData) {
      if (areaData.every(area => area.code != -1)) {
        this.$emit('confirm', this.analyArea(areaData));
        this.$emit('cancel');
      } else {
        this.$toast('请选择完整地区');
      }
    },
    analyArea(areaData) {
      const province = areaData[0] || {};
      const city = areaData[1] || {};
      const district = areaData[2] || {};

      return {
        id: null,
        area_name: `${province.name}  ${city.name}  ${district.name} `,
        district: district.code,
        city: city.code,
        province: province.code
      };
    }
  },

  components: {
    [Area.name]: Area
  }
};
</script>
