<template>
  <div class="sjp-position">
    <Form-item class="sjp-inlineblock" :prop="prop" :label="label" :label-width="80">
      <Select v-model="positionObj.belongProvince" class="item" :style="{'width':width + 'px'}" @on-change="selectProvince">
        <Option :value="item.id" v-for="(item,index) of provinceList" :key="index">{{item.name}}</Option>
      </Select>
      <Select v-model="positionObj.belongCity" class="sjp-position__item" :style="{'width':width + 'px'}" @on-change="selectCity">
        <Option :value="item.id" v-for="(item,index) of cityList" :key="index">{{item.name}}</Option>
      </Select> 
      <Select v-model="positionObj.belongRegion" class="sjp-position__item" :style="{'width':width + 'px'}">
        <Option :value="item.id" v-for="(item,index) of businessArea" :key="index">{{item.name}}</Option>
      </Select>
    </Form-item>
  </div>
</template>

<script>
import http from './../packages/service/shopinfo'

export default {
  name: 'position',
  components: {  },
  props:{
    positionObj:{
      type: Object,
      default:()=>{
        return {}
      }
    },
    label:{
      type: String,
      default: '所在地'
    },
    width:{
      type: String,
      default: '200',
    },
    prop:{
      type: String,
    }
  },
  data() {
    return {
      provinceList:[],
      cityList:[],
      businessArea:[],
    }
  },
  created() {
    // 默认显示北京市 110000 ，北京 110100 ， 北京世纪金源商圈 1
    // 如果没有数据传来，就增加默认参数
    this.positionObj.belongProvince = this.positionObj.belongProvince || 110000
    this.positionObj.belongCity = this.positionObj.belongCity || 110100
    this.positionObj.belongRegion = this.positionObj.belongRegion || 1
   
    this.init()
    
  },
  methods:{
    init(){
      // 获取所有的省份
      http.getAllProvince()
      .then((res) => {
        this.provinceList = res.data || []
      })
      // 获取商圈
      http.getAllData({})
        .then((res) => {
          this.businessArea = res.data || []
        })
        // 获取城市
        if(this.positionObj.belongProvince){
           http.getCityByPid({parentId:this.positionObj.belongProvince})
          .then((res) => {
            this.cityList = res.data || []
          })
        }
     
    },
    selectProvince(value){
      http.getCityByPid({parentId:value})
      .then((res) => {
        this.cityList = res.data || []
        this.positionObj.belongCity = ''
        this.positionObj.belongRegion = ''
      })
    },
    selectCity(value){
       http.getAllData({cityCode:value})
      .then((res) => {
        this.businessArea = res.data || []
        this.positionObj.belongRegion = ''
      })
    },
  },
  mounted(){
   
  }
}
</script>

<style lang="less" scoped>
.sjp-position__item{
  margin-left: 10px;
}
</style>
