<template>
  <div class="address">
    <el-form :rules="rules" :model="from" :label-width="'130px'" style="width: 670px;text-align: right;">
      <el-form-item label="机构地址:" prop="province" style="float: left;width: 300px;margin-right: 8px;position: relative">
        <el-select
          v-model="from.province"
          placeholder="请选择"
          style="width:167px;"
          @change="choseProvince"
        >
          <el-option
            v-for="item in provinceArray"
            :key="item.provinceID"
            :label="item.name"
            :value="item.provinceID"
          />
        </el-select>
        <span v-show="isAddress" class="span-tip">机构地址不能为空</span>
      </el-form-item>
      <el-form-item prop="city" style="float: left;margin-left: 0;margin-right: 8px;">
        <el-select
          v-model="from.city"
          placeholder="请选择"
          style="width:167px;margin-left: 0;"
          @change="choseCity"
        >
          <el-option
            v-for="item in cityArray"
            :key="item.cityID"
            :label="item.name"
            :value="item.cityID"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="town" style="float: left;margin-left:0;margin-right: 8px;">
        <el-select
          v-model="from.town"
          placeholder="请选择"
          style="width:167px;margin-left: 0;"
          @change="choseBlock"
        >
          <el-option
            v-for="item in townArray"
            :key="item.townID"
            :label="item.name"
            :value="item.townID"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getProvince, getCtiy, getTown } from '@/api/address'
export default {
  name: 'Ctiy',
  props: {
    addressData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    isAddress: {
      type: Boolean,
      default: function() {
        return false
      }
    }
  },
  data() {
    return {
      provinceArray: [],
      cityArray: [],
      townArray: [],
      from: {
        province: '',
        city: '',
        town: ''
      },
      rules: {
        province: [{ required: true, message: '请选择省份', trigger: 'blur' }],
        city: [{ required: true, message: '请选择市', trigger: 'blur' }],
        town: [{ required: true, message: '请选择区县', trigger: 'blur' }]
      }
    }
  },
  created: function() {
    console.log(this.addressData)
    this.from.province = this.addressData.province
    this.from.city = this.addressData.city
    this.from.town = this.addressData.town
    this.getCityData()
  },
  methods: {
    // 加载省份
    getCityData: function() {
      getProvince().then(response => {
        this.provinceArray = response.data
      })
    },
    // 选省
    choseProvince: function(e) {
      this.from.province = e
      this.townArray = []
      this.cityArray = []
      this.from.town = ''
      for (var i in this.provinceArray) {
        if (e === this.provinceArray[i].provinceID) {
          const provinceid = { provinceid: this.provinceArray[i].provinceID }
          getCtiy(provinceid).then(response => {
            this.cityArray = response.data
            this.from.city = this.cityArray[0].name
          })
        }
      }
    },
    // 选市
    choseCity: function(e) {
      this.city = e
      for (var j in this.cityArray) {
        if (e === this.cityArray[j].cityID) {
          const cityID = { cityid: this.cityArray[j].cityID }
          getTown(cityID).then(response => {
            this.townArray = response.data
          })
        }
      }
    },
    // 选区
    choseBlock: function(e) {
      this.from.town = e
      const addData = { provinceid: this.from.province, cityid: this.from.city, townid: this.from.town }
      this.$emit('addlist', addData)
    }
  }
}
</script>
<style lang="scss" scoped>
  .address .el-form-item__content{
    margin-left: 0 !important;
  }
</style>
