<style scoped>
  .address-select {
    margin-bottom: 10px;width:504px;
  }
  .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: 130px;
    border: 0 none;
    color: #373737; 
    height: 30px;
    line-height: 34px;
  }
</style>
<template>
  <div class="address-select address-readonly" :style="styles" v-if="readonly">
    <span :id='id' style="margin-left:80px;">{{province}}省</span>
    <span>{{city}}市</span>
    <span>{{area}}</span>
  </div>
  <div class="address-select" v-else :style="styles">
    <select v-model="province" class="ml-80 t-center hover-none" style='width:25%;' :id='id'>
      <option v-for="item in areaMap.provinceArray" :value="item">{{item}}</option>
    </select>
    省
    <select v-model="city" class="t-center hover-none" style='width:25%;'>
      <option v-for="item in cityArray.sub" :value="item.name">{{item.name}}</option>
    </select>
    市
    <select v-model="area" class="t-center hover-none" style='width:25%;'>
      <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
      },
      styles:{
        type:String,
        default:''
      },
      id:{
        type:String
      }
    },
    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>