<template>
  <div class="mainContent">
    <el-select @change="changeCity" :value="Number(area_id) > 0 ? area_id : ''" placeholder="请选择">
      <el-option v-for="(item,index) in list" :key="index" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </div>
</template>

<script>
import {cityDataLst} from "@/api/system";

export default {
  props: {
    pid:{
      type: String|Number,
      default: 0
    },
    area_id: {
      type: String|Number,
      default: 0
    },
  },
  data() {
    return {
      list: {},
    };
  },
  watch: {
    pid: {
      handler: function () {
        // 信息初始化
        this.getCityAreaList(this.pid);
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {},
  methods: {
    // 地区选择器 - 获取地区列表
    getCityAreaList(id) {
      let _this = this;
      cityDataLst(id).then((res) => {
        if(res.status == 200){
          _this.list = res.data || {};
        }
      }).catch((res) => {
        this.$message.error(res.message);
      });
    },
    // 地区选择器 - 地区选中
    changeCity(event){
      // 获取选择的内容
      let list = Object.assign({},this.list);
      let info = {};
      Object.values(list).some((item) => {
        if(item.id == event){
          info = item;
          return true;
        }
      });

      this.$emit('change', info);
    }
  },
};
</script>

<style lang="scss" scoped>

</style>
