<template>
  <div class="auto">
    <validator name='a' @valid="addressValid(true)" @invalid="addressValid(false)">
      <form class="form-horizontal">
        <div class="row">

          <div class="col-sm-3">
            <label for="f_area" class="font_normal_body">&nbsp;省/市/区</label>
              <input type="text" class="input_search" style="width:60%" v-model="addressinfo.f_pcd"   readonly>
          </div>

          <div class="col-sm-3">
            <label class="font_normal_body">&nbsp;&nbsp;&nbsp;片区&nbsp;&nbsp;&nbsp;</label>
            <input type="text" class="input_search" style="width:60%" v-model="addressinfo.f_slice_area" :placeholder="addressinfo.f_slice_area ? addressinfo.f_slice_area : '暂无'"  readonly>
          </div>

          <div class="col-sm-3">
            <label for="f_street" class="font_normal_body">街道名称</label>
            <input type="text" class="input_search" style="width:60%" v-model="addressinfo.f_street" v-validate:f_street='{required: true }'  readonly>
          </div>

          <div class="col-sm-3">
            <label for="f_residential_area" class="font_normal_body">小区名称</label>
            <input type="text" class="input_search" style="width:60%" v-model="addressinfo.f_residential_area" :placeholder="addressinfo.f_residential_area ? addressinfo.f_residential_area : '暂无'"  readonly>
          </div>

        </div>

        <div class="row" v-if="addressinfo.f_special !== 1">
          <div class="col-sm-3" >
            <label for="f_building" class="font_normal_body">&nbsp;&nbsp;&nbsp;楼号&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input type="text" class="input_search" style="width:36%" v-model="addressinfo.f_building"
                   placeholder="楼号" :readonly="!addressinfo.isEdit" v-el:building v-next-el="unit">
            <input type="text" class="input_search" style="width:22%" v-model="addressinfo.f_building_suffix":readonly="!addressinfo.isEdit"
                  />
          </div>

          <div class="col-sm-3">
            <label for="f_unit" class="font_normal_body">&nbsp;&nbsp;&nbsp;单元号</label>
            <input type="text" class="input_search" style="width:36%" v-model="addressinfo.f_unit"
                   placeholder="单元号" :readonly="!addressinfo.isEdit" v-el:unit v-next-el="floor">
            <input type="text" class="input_search" style="width:22%" v-model="addressinfo.f_unit_suffix":disabled="!addressinfo.isEdit"
                  />
          </div>
          <div class="col-sm-3">
            <label for="f_floor" class="font_normal_body">&nbsp;&nbsp;&nbsp;楼层&nbsp;&nbsp;&nbsp;</label>
            <input type="text" class="input_search" style="width:36%" v-model="addressinfo.f_floor"
                    placeholder="楼层" :readonly="!addressinfo.isEdit" v-el:floor v-next-el="room">
            <input type="text" class="input_search" style="width:22%" v-model="addressinfo.f_floor_suffix":readonly="!addressinfo.isEdit"
                  />
          </div>

          <div class="col-sm-3" :class="[$a.f_room.required ? 'has-error' : '']"  v-if="addressinfo.isEdit">
            <label for="f_room" class="font_normal_body">&nbsp;&nbsp;&nbsp;门牌号</label>
            <input type="text" class="input_search" style="width:36%" v-model="addressinfo.f_room"
                    id="f_room" placeholder="门牌号" v-validate:f_room='{required: true }' v-el:f_room>
            <input type="text" class="input_search" style="width:22%" v-model="addressinfo.f_room_suffix" class="input_search" style="width:60%" :readonly="!addressinfo.isEdit"
                  />
          </div>
          <div class="col-sm-3" v-if="!addressinfo.isEdit">
            <label class="font_normal_body">&nbsp;&nbsp;&nbsp;门牌号</label>
            <input type="text" class="input_search" style="width:41%" v-model="addressinfo.f_room"
                   placeholder="门牌号"  readonly>
            <input type="text" class="input_search" style="width:17%" v-model="addressinfo.f_room_suffix"  readonly
                  />
          </div>


        </div>
        <div class="row">
          <div class="col-sm-6">
            <label for="f_address" class="font_normal_body">&nbsp;&nbsp;&nbsp;地址&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input type="text" class="input_search" style="width:60%" v-model="address" class="input_search" style="width:60%"
                   id="f_address" readonly placeholder="详细地址" v-el:address>
          </div>
        </div>
      </form>
    </validator>
  </div>
</template>
<script>

  export default {
    title: '基本信息',
    data () {
      return {
        areas: [],
        streets: [],
        residentials: [],

        oldAddress: {}
      }
    },
    props: ['addressinfo', 'addressvalid'],
    ready () {
      // 若是小区建档，地址里面的楼号-门牌号必填
    },
    methods: {
      addressValid (val) {
        // 手动验证门牌号是否存在
        this.addressvalid = val
      }
    },
    computed: {
      'address' () {
        console.log
        if (this.addressinfo.f_special == '1') {
          return this.addressinfo.f_address
        } else {
          return (this.addressinfo.f_street ? this.addressinfo.f_street : '')
            + (this.addressinfo.f_residential_area ? this.addressinfo.f_residential_area : '')
            + (this.addressinfo.f_building ? this.addressinfo.f_building + (this.addressinfo.f_building_suffix ? this.addressinfo.f_building_suffix : '') : '')
            + (this.addressinfo.f_unit ? this.addressinfo.f_unit + (this.addressinfo.f_unit_suffix ? this.addressinfo.f_unit_suffix : '') : '')
            + (this.addressinfo.f_floor ? this.addressinfo.f_floor + (this.addressinfo.f_floor_suffix ? this.addressinfo.f_floor_suffix : '') : '')
            + (this.addressinfo.f_room ? this.addressinfo.f_room + (this.addressinfo.f_room_suffix ? this.addressinfo.f_room_suffix : '') : '')
        }
      },
      sliceArea () {
        let rs = new Array()
        for (let i = 0; i < this.$login.f.f_allArea.length; i++) {
          let temp = {
            label: this.$login.f.f_allArea[i].label,
            value: this.$login.f.f_allArea[i].label
          }
          rs.push(temp)
        }
        return rs
      }
    }
  }
</script>
