<style scoped>
  .address-select {
    margin-bottom: 10px
  }
  .address-readonly {
    color: #606f7a;
    background: rgba(96,111,122,.1);
  }
  .address-select span {
    display: inline-block;
    width: 70px;
  }
  .address-select span:first-child {
    margin-left: 10px;
  }
  select {
    width: 70px;
    border: 0 none;
    color: #373737;
  }
</style>
<template>
  <div class="address-select address-readonly" v-if="readonly">
    <span>{{province}}省</span>
    <span>{{city}}市</span>
    <span>{{area}}</span>
  </div>
  <div class="address-select" v-else>
    <select v-model="province">
      <option v-for="item in areaMap.provinceArray" :value="item">{{item}}</option>
    </select>
    省
    <select v-model="city">
      <option v-for="item in cityArray.sub" :value="item.name">{{item.name}}</option>
    </select>
    市
    <select v-model="area">
      <option v-for="item in areaArray.sub" :value="item.name">{{item.name}}</option>
    </select>
    区
  </div>
</template>
<script>
  module.exports = {
    props: {
      province: {
        type: String,
        twoWay: true,
        default: '请选择'
      },
      city: {
        type: String,
        twoWay: true,
        default: '请选择'
      },
      area: {
        type: String,
        twoWay: true,
        default: '请选择'
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    data: function () {
      return {
        firstProvinceModified: true,
        firstCityModified: true
      };
    },
    computed: {
      areaMap: function () {
        return this.$store.state.area;
      },
      cityArray: function () {
        if (this.province === '请选择' || !this.province) {
          return {
            sub: []
          };
        }
        return this.areaMap.map[this.province];
      },
      areaArray: function () {
        if (this.province === '请选择' || this.city === '请选择' || !this.province || !this.city) {
          return {
            sub: []
          };
        }
        if (!this.cityArray[this.city]) {
          return {
            sub: []
          };
        }
        return this.cityArray[this.city];
      }
    },
    watch: {
      province: function () {
        if (this.firstProvinceModified) {
          this.firstProvinceModified = false;
        } else {
          this.city = '请选择';
          this.area = '请选择';
        }
      },
      city: function () {
        if (this.firstCityModified) {
          this.firstCityModified = false;
        } else {
          this.area = '请选择';
        }
      }
    }
  };
</script>