<template>
  <div>
    <!--<el-col :span="6" >-->
    <el-select v-model="provinceValue" placeholder="请选择省" filterable @change="chooseProvince" :size="size"
               style="margin-right:15px;width:120px">
      <el-option
        v-for="item in provinceData"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <!--</el-col>
    <el-col :span="6" >  -->
    <el-select v-model="cityValue" placeholder="请选择市" filterable @change="chooseCity" :size="size"
               style="margin-right:15px;width:120px">
      <el-option
        v-for="item in cityData"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <!--</el-col>
    <el-col :span="6" >  -->
    <el-select v-model="areaValue" @change="chooseArea" filterable placeholder="请选择区、县" :size="size"
               style="margin-right:15px;width:120px">
      <el-option
        v-for="item in areaData"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <!--</el-col>
   <el-col :span="6" >  -->
    <el-select v-model="schoolValue" @change="chooseSchool" v-if="schoolShow" filterable placeholder="请选择学校" :size="size"
               style="margin-right:15px;width:120px">
      <el-option
        v-for="item in schoolData"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <!--</el-col>-->
  </div>
</template>
<script>
  import * as resources from '@/api/webApi/resources'
  import area from './area.json'
  import axios from 'axios';

  export default {
    props: {
      schoolShow:{
        type: Boolean,
        default: true
      },
      size: {
        type: String,
        default: 'mini'
      },
    },
    data() {
      return {
        provinceValue: '',
        cityValue: '',
        areaValue: '',
        schoolValue: '',
        provinceData: [],
        cityData: [],
        areaData: [],
        schoolData: [{code: 1, name: '学校一'}, {code: 2, name: '学校二'}]

      }
    },
    created() {
      // this.provinceData = area;

      this.getProvinceData()
    },
    methods: {
    	resetFields(){
    		this.cityValue = '';
        this.areaValue = '';
        this.schoolValue = '';
        this.provinceValue= ''
          this.cityData = [];
        this.areaData = [];
        this.schoolData = [];
    	},
      getProvinceData() {
        let _this = this
        let editionParam = {level: 1}
        resources.getLocationsList(editionParam).then(response => {
          _this.provinceData = response.data
        })
      },
      chooseProvince(value) {
        this.cityValue = '';
        this.areaValue = '';
        this.schoolValue = '';
        this.cityData = [];
        this.areaData = [];
        this.schoolData = [];
        this.$emit('change',{ provinceValue: this.provinceValue,   cityValue: this.cityValue,  areaValue: this.areaValue,schoolValue: this.schoolValue })
        let _this = this
        let editionParam = {level: 2, parentId: value}
        resources.getLocationsList(editionParam).then(response => {
          _this.cityData = response.data
        })

        // this.provinceData.map(e => {//遍历数据
        //   if (value == e.code) {
        //     this.cityData = e.cityList;
        //     return;
        //   }
        // })
      },
      chooseCity(value) {
        this.areaValue = '';
        this.schoolValue = '';
        this.schoolData = [];
        this.$emit('change',{ provinceValue: this.provinceValue,   cityValue: this.cityValue,  areaValue: this.areaValue,schoolValue: this.schoolValue })
        let _this = this
        let editionParam = {level: 3, parentId: value}
        resources.getLocationsList(editionParam).then(response => {
          _this.areaData = response.data
        })
      },
      chooseArea() {
      this.$emit('change',{ provinceValue: this.provinceValue,   cityValue: this.cityValue,  areaValue: this.areaValue,schoolValue: this.schoolValue })
        if(!this.schoolShow){
          return
        }
        this.schoolValue = '';
        let _this = this
        let editionParam = {pro: this.provinceValue, city: this.cityValue, area: this.areaValue,pageSize:1000,isAgent: 1}
        resources.schoolList(editionParam).then(response => {
          _this.schoolData = response.rows
        })

      },
      chooseSchool(value) {
        this.$emit('change',{ provinceValue: this.provinceValue,   cityValue: this.cityValue,  areaValue: this.areaValue,schoolValue: this.schoolValue })
      },
      getData() { //返回省市区学校编码
        return [this.provinceValue, this.cityValue, this.areaValue, this.schoolValue]
      }
    }
  }
</script>
<style>

</style>
