<template style="height: 650px;overflow-y: auto;">
  <div class="form-group">
    <label  class="col-sm-4">用户编号:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" v-model="content.f_userinfo_code" readonly="true">
    </div>
  </div>
  <div class="form-group">
    <label  class="col-sm-4">用户姓名:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" v-model="content.f_user_name" readonly="true">
    </div>
  </div>
  <div class="form-group">
    <label  class="col-sm-4">用户电话:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" v-model="content.f_user_phone" readonly="true">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4">地址类型:</label>
    <div class="rightipt" style="display: flex;justify-content: space-around;margin-top: 5px">
      <div><input type="radio" v-model="addressType" value="普通地址" name="addressType" @change="changeAddressType" id="phone_addressType1"/><label for="phone_addressType1" style="font-weight: normal;padding-left: 2px">普通地址</label></div>
      <div><input type="radio" v-model="addressType" value="特殊地址" name="addressType" @change="changeAddressType" id="phone_addressType2"/><label for="phone_addressType2" style="font-weight: normal;padding-left: 2px">特殊地址</label></div>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4">地址类型:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" v-model="content.f_iscity" readonly="true">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4">省&ensp;市&ensp;区:</label>
    <div class="col-sm-6">
      <v-select :value.sync="selectPcd" class="input-font"
                v-model="selectPcd"
                width="100%"
                :disabled="readonly"
                :options='pcds' placeholder='请选择省市区' close-on-select clear-button value-single
                @change="pcd_change()"></v-select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4">所在街道:</label>
    <div class="col-sm-6">
      <v-select :value.sync="selectStreet" class="input-font"
                width="100%"
                :disabled="readonly"
                v-model="selectStreet"
                :options='streets' placeholder='请选择街道' close-on-select clear-button value-single @change="street_change()"></v-select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4">小区名称:</label>
    <div class="col-sm-6">
      <v-select :value.sync="selectArea" class="input-font"
                width="100%"
                v-model="selectArea"
                :timeout="500"
                :disabled="readonly"
                @select-search="select_search"
                :options='area' placeholder='请选择集收单位'  close-on-select clear-button value-single @change="area_change()"></v-select>
    </div>
  </div>
  <div class="form-group" v-show="addressType=='普通地址'">
    <label class="col-sm-4">用户楼号:</label>
    <div class="col-sm-6"> <input :readonly="readonly" type="text" class="form-control" @change="changeNewAddress" v-model="content.f_building"></div>
  </div>
  <div class="form-group" v-show="addressType=='普通地址'">
    <label class="col-sm-4">用户单元:</label>
    <div class="col-sm-6"> <input :readonly="readonly" type="text" class="form-control" @change="changeNewAddress" v-model="content.f_unit"></div>
  </div>
  <div class="form-group" v-show="addressType=='普通地址'">
    <label class="col-sm-4">用户楼层:</label>
    <div class="col-sm-6"> <input :readonly="readonly" type="text" class="form-control" @change="changeNewAddress" v-model="content.f_floor"></div>
  </div>
  <div class="form-group" v-show="addressType=='普通地址'">
    <label  class="col-sm-4">用户门牌:</label>
    <div class="col-sm-6"> <input :readonly="readonly" type="text" class="form-control" @change="changeNewAddress" v-model="content.f_room"></div>
  </div>
  <div class="form-group" style="height: 80px !important;">
    <label class="col-sm-4">详细住址:</label>
    <div class="col-sm-6">
      <textarea :readonly="readonly || addressType=='普通地址'" class="form-control rightipt" :style="{height: '80px'}" v-model="content.f_address"></textarea>
    </div>
  </div>
  <div class="form-group" v-if="content.f_meternumber">
    <label class="col-sm-4">表&ensp;&ensp;&ensp;&ensp;号:</label>
    <div class="col-sm-6"><input type="text" class="form-control" v-model="content.f_meternumber" readonly="true"></div>
  </div>
  <div class="row" v-if="content.f_meterno_path">
    <label class="col-sm-4">表号照片:</label>
    <div class="col-sm-6">
      <img-self-safe  :src="'/rs/image/file/'+content.f_meterno_path" style="float: left" width="200" height="200"></img-self-safe>
    </div>
  </div>
  <div class="form-group" v-if="content.f_remark">
    <label class="col-sm-4">备&ensp;&ensp;&ensp;&ensp;注:</label>
    <div class="col-sm-6"> <textarea  type="text-area" class="form-control" v-model="content.f_remark" readonly="true"></textarea></div>
  </div>
</template>

<script>
    import {HttpResetClass} from 'vue-client'
    import Vue from 'vue'

    export default {
        title: "用户信息修改内容",
      props:['content', 'readonly'],
      data(){
          return{
            pcds: [],
            selectPcd:{id:''},
            streets: [],
            selectStreet:{id:''},
            area: [],
            selectArea:{id:''},
            addressType: ''
          }
      },
      async ready(){
        let pcdlist = await new HttpResetClass().load("POST", `/rs/sql/safe_singleTable_OrderBy`, {
          data: {
            items: "*",
            tablename: "t_pcd",
            orderitem: "id",
            condition: `f_orgid = '${this.$login.f.orgid}'`
          }
        }, {resolveMsg: null, rejectMsg: null})
        pcdlist.data.forEach((result) => {
          this.pcds.push({label: result.f_pcd, value: result})
        })
        this.selectPcd.id = Number.parseInt(this.content.f_pcd_id)
        this.selectPcd.f_pcd = this.content.f_pcd
        this.selectStreet.id = Number.parseInt(this.content.f_street_id)
        this.selectStreet.f_street=this.content.f_street
        this.selectArea.id=this.content.f_residential_area_id
        await this.getStreetList()
        await this.getAreaList()
        this.content.f_special = this.content.f_special || 0
        this.addressType = this.content.f_special == 1 ? '特殊地址':'普通地址'
      },
      methods: {
        async pcd_change() {
          if (this.selectPcd.id) {
            //如果省市区改变-重新赋值
            this.content.f_pcd = this.selectPcd.f_pcd
            this.content.f_pcd_id = this.selectPcd.id
            //清空 选中的街道和集收单位
            this.selectStreet = {id: ''}
            this.content.f_street = ''
            this.content.f_street_id = ''
            this.content.f_iscity = ''
            this.selectArea = {id: ''}
            this.content.f_residential_area = ''
            this.content.f_residential_area_id = ''
            this.content.f_slice_area = ''
            this.streets = []
            let pcdText = `and f_pcd_id=${this.selectPcd.id}`
            let streetlist = await new HttpResetClass().load("POST", `/rs/sql/safe_singleTable_OrderBy`, {
              data: {
                items: "*",
                tablename: "t_street",
                orderitem: "id",
                condition: `f_orgid = '${this.$login.f.orgid}' ${pcdText}`
              }
            }, {resolveMsg: null, rejectMsg: null})
            streetlist.data.forEach((result) => {
              this.streets.push({label: result.f_street, value: result})
            })
          } else {
            this.streets = []
          }
          this.changeNewAddress()
        },
        async street_change(){
          if(this.selectStreet.id){
            //如果街道改变--给街道赋值！
            this.content.f_street=this.selectStreet.f_street
            this.content.f_street_id=this.selectStreet.id
            this.content.f_iscity=this.selectStreet.f_iscity
            //清空当前选中小区的值
            this.content.f_residential_area=''
            this.content.f_residential_area_id=''
            this.content.f_slice_area=''
            this.selectArea={id:''}
            this.area=[]
            let pcdText=` and f_street_id=${this.selectStreet.id}`
            let res= await new HttpResetClass().load("POST", `/rs/sql/safe_singleTable_OrderBy`, {data:{items:"*",tablename:"t_area",orderitem:"id",condition:`f_orgid = '${this.$login.f.orgid}' ${pcdText} `}}, {resolveMsg: null, rejectMsg: null})
            ////tag)
            res.data.forEach((result)=>{
              this.area.push({label:result.f_residential_area,value:result})
            })
          }else{
            this.area=[]
          }
          this.changeNewAddress()
        },
        area_change(){
          this.content.f_residential_area=this.selectArea.f_residential_area
          this.content.f_residential_area_id=this.selectArea.id
          this.content.f_slice_area=this.selectArea.f_slice_area
          this.changeNewAddress()
        },
        async getStreetList(){
          if(this.selectPcd.id){
            //tag
            this.streets=[]
            let pcdText=`and f_pcd_id=${this.selectPcd.id}`
            let streetlist= await new HttpResetClass().load("POST", `/rs/sql/safe_singleTable_OrderBy`, {data:{items:"*",tablename:"t_street",orderitem:"id",condition:`f_orgid = '${this.$login.f.orgid}' ${pcdText}`}}, {resolveMsg: null, rejectMsg: null})
            streetlist.data.forEach((result)=>{
              this.streets.push({label:result.f_street,value:result})
            })
          }else{
            this.streets=[]
          }
        },
        async getAreaList(text){
          if(this.selectStreet.id){
            this.area=[]
            let pcdText=text?`and f_street_id=${this.selectStreet.id} and f_residential_area like '%${text}%'`:`and f_street_id=${this.selectStreet.id}`
            let res= await new HttpResetClass().load("POST", `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_OrderBy`, {data:{items:"*",tablename:"t_area",orderitem:"id",condition:`f_orgid = '${this.$login.f.orgid}' ${pcdText}`}}, {resolveMsg: null, rejectMsg: null})
            res.data.forEach((result)=>{
              this.area.push({label:result.f_residential_area,value:result})
            })
            this.area.push({label:this.content.f_residential_area,value:{id:this.content.f_residential_area_id,f_residential_area:this.content.f_residential_area}})
          }else{
            this.area=[]
          }
        },
        select_search(text){
          //tag
          if(this.selectStreet.id){
            let pcdText=text?`and f_street_id=${this.selectStreet.id} and f_residential_area like '%${text}%'`:`and f_street_id=${this.selectStreet.id}`
            new HttpResetClass().load("POST", `/rs/sql/safe_singleTable_OrderBy`, {data:{items:"*",tablename:"t_area",orderitem:"id",condition:`f_orgid = '${this.$login.f.orgid}' ${pcdText} `}}, {resolveMsg: null, rejectMsg: null}).then((res)=>{
              //tag)
              if(res.data.length>0){
                this.area=[]
                res.data.forEach((result)=>{
                  this.area.push({label:result.f_residential_area,value:result})
                })
              }
            })
          }else{
            this.area=[]
          }
        },
        changeNewAddress(){
          this.content.f_address = this.addressType == '普通地址' ? this.getAddress : this.getAddressTS
        },
        changeAddressType (val) {
          //tag
          if(this.addressType=='普通地址'){
            this.content.f_special=0
          }else if(this.addressType=='特殊地址'){
            this.content.f_special=1
            this.content.f_building=''
            this.content.f_unit=''
            this.content.f_floor=''
            this.content.f_room=''
          }
          this.changeNewAddress()
        }
      },
      computed:{
        getAddress(){
          return (this.content.f_pcd?this.content.f_pcd:'')+
            (this.content.f_street?this.content.f_street:'')+
            (this.content.f_residential_area?this.content.f_residential_area:'')+
            (this.content.f_building?this.content.f_building+(this.content.f_building_suffix?this.content.f_building_suffix:'-'):'')+
            (this.content.f_unit?this.content.f_unit+(this.content.f_unit_suffix?this.content.f_unit_suffix:'-'):'')+
            (this.content.f_floor?this.content.f_floor+(this.content.f_floor_suffix?this.content.f_floor_suffix:'-'):'')+
            (this.content.f_room?this.content.f_room+(this.content.f_room_suffix?this.content.f_room_suffix:''):'')
        },
        getAddressTS(){
          return (this.content.f_pcd?this.content.f_pcd:'')+
            (this.content.f_street?this.content.f_street:'')+
            (this.content.f_residential_area?this.content.f_residential_area:'')
        }
      },
    }
</script>
