<template>
  <work-busy :is-busy="excessive"></work-busy>
  <div style="height: 100%">
    <div class="panel auto">
      <div class="panel-heading" @click="selectVal('地址修改')" style="background-color: #ffffff">
        <span class="spanboder">
          <img src="../../../assets/地址修改.png" style="width: 22px;margin-right: 8px;">地址修改
          <img class="butt3" :src="imgback('地址修改')">
        </span>
      </div>
      <div class="panel-body " id="upuserinfo_sel" v-show="headername=='地址修改'">
        <div class="row auto" style="margin: 5px 0">
          <labe class="righttxt">用户名称:</labe>
          <input type="text" class="form-control rightipt" v-model="userinfo.f_user_name" readonly/>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <labe class="righttxt">地址类型:</labe>
          <div class="rightipt" style="display: flex;justify-content: space-around;margin-top: 5px">
            <div><input type="radio" v-model="addressType" name="addressType"
                        id="phone_addressType1" value="普通地址"/><label style="font-weight: normal;padding-left: 2px"
                                                                         for="phone_addressType1">普通地址</label></div>
            <div><input type="radio" v-model="addressType" name="addressType"
                        id="phone_addressType2" value="特殊地址"/><label style="font-weight: normal;padding-left: 2px"
                                                                         for="phone_addressType2">特殊地址</label></div>
          </div>
        </div>
        <div class="row auto" style="margin: 5px 0" v-show="addressType=='普通地址'">
          <labe class="righttxt">区&ensp;&ensp;&ensp;&ensp;域:</labe>
          <input type="text"
                 class="form-control rightipt"
                 :value.sync="userinfodata.qy"
                 v-model="userinfodata.qy"/>
        </div>
        <div class="row auto" style="margin: 5px 0" v-show="addressType=='普通地址'">
          <labe class="righttxt">小&ensp;&ensp;&ensp;&ensp;区:</labe>
          <input type="text"
                 class="form-control rightipt"
                 :value.sync="userinfodata.xq"
                 v-model="userinfodata.xq "/>
        </div>
        <div class="row auto" style="margin: 5px 0" v-show="addressType=='普通地址'">
          <labe class="righttxt">楼&ensp;&ensp;&ensp;&ensp;栋:</labe>
          <input type="text"
                 class="form-control rightipt"
                 :value.sync="userinfodata.ld"
                 v-model="userinfodata.ld"/>
        </div>
        <div class="row auto" style="margin: 5px 0" v-show="addressType=='普通地址'">
          <labe class="righttxt">单&ensp;&ensp;&ensp;&ensp;元:</labe>
          <input type="text"
                 class="form-control rightipt"
                 :value.sync="userinfodata.dy"
                 v-model="userinfodata.dy"/>
        </div>
        <div class="row auto" style="margin: 5px 0" v-show="addressType=='普通地址'">
          <labe class="righttxt">门&ensp;牌&ensp;号:</labe>
          <input type="text"
                 class="form-control rightipt"
                 :value.sync="userinfodata.mph"
                 v-model="userinfodata.mph"/>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <labe class="righttxt">新&ensp;地&ensp;址:</labe>
          <textarea class="form-control rightipt" : style="height: 80px"
                    :value.sync="dzNew"
                    v-model="dzNew"></textarea>
        </div>
      </div>
    </div>
    <div class="panel auto">
      <div class="panel-body">
        <div style="display: flex;justify-content: center;">
          <button type="button"  class="col-sm-3 btn btn-primary" :disabled="enable" @click="readReslut()">上传
          </button>
          <button type="button"  class="col-sm-3 btn btn-primary"  style="margin-left: 69px;" @click="empty()">清空
          </button>
          <button type="button" class="btn btn-default" style="margin-left: 69px;" @click="cancelUserInfo()">取消
          </button>
        </div>
      </div>
    </div>
  </div>
  <modal :show.sync="showModal1" :backdrop="false">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">
        <img src="../../../assets/喇叭.png"/> 注意事项
      </h4>
    </div>
    <div slot="modal-body" class="modal-body">
      <textarea rows="4" cols="42" style="color: red;font-weight: bold;font-family: 宋体;" readonly>
        安检用户数据来着第三方系统，修改地址成功后安检用户信息不会即可生效，需等待第三方数据推送，谢谢！！！
      </textarea>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <input type="button" class="col-sm-3 btn btn-primary" :class="{inactive: i > 0}" :value="i == 0 ? '我已阅读注意事项' : `已阅读注意事项(${i})`" :disabled="i != 0" @click="editUserInfo()">
    </div>
  </modal>
</template>

<script>
import {PagedList, HttpResetClass} from 'vue-client'
import * as Util from '../../../components/Util'
import Vue from 'vue'
import co from 'co'
import {MessageBox , Indicator  } from 'mint-ui'

export default {
  title: '信息变更',
  props: ['userinfo'],
  data () {
    return {
      model: [],
      wid: '60%',
      showModal1:false,
      isShow:true,
      read:false,
      headername: '地址修改',
      userinfodata: {
        qy: '',
        xq: '',
        ld: '',
        dy: '',
        mph: '',
        dz: ''
      },
      dzNew: '',
      enable: false,
      excessive: false,
      addressType: '普通地址',
      i: 0,
      inter: null
    }
  },
  computed: {},
  ready () {
    console.log('this.userinfo=', JSON.stringify(this.userinfo))
  },
  methods: {
    empty(){
      if(!this.dzNew){
        MessageBox({title: '失败', message: '所清空信息为空，不需进行此操作！！', confirmButtonHighlight: true})
      }else{
        MessageBox.confirm('确定清空所填写的信息?').then(actions => {
          if (actions === 'confirm') {
            this.userinfodata={}
            this.dzNew=''
            MessageBox({title: '成功', message: '清空成功，请重新填写信息！', confirmButtonHighlight: true})
          }
        })
      }

    },
    readReslut(){
      if(!this.dzNew){
        MessageBox({title: '失败', message: '所需上传信息为空，不可进行此操作，谢谢！！', confirmButtonHighlight: true})
      }else {
        this.showModal1=true
        this.i = 5
        this.inter = setInterval(() => {
          this.i --
          if (this.i == 0){
            clearInterval(this.inter)
          }
        }, 1000)
      }
    },
    editUserInfo() {
      this.showModal1=false
      MessageBox.confirm('确定修改用户地址信息?').then(action => {
        console.log('action2=', JSON.stringify(action))
        if (action === 'confirm') {
          Indicator.open({
            text: '加载中,请稍后...'
          })
          this.userinfodata.dz = this.dzNew
          this.userinfodata.khbh = this.userinfo.f_userinfo_code
          this.userinfodata.yhdj = ''
          if (this.addressType == '特殊地址') {
            this.userinfodata.qy = ''
            this.userinfodata.xq = ''
            this.userinfodata.ld = ''
            this.userinfodata.dy = ''
            this.userinfodata.mph = ''
            this.userinfodata.addressTS = '特殊地址'
          } else {
            this.userinfodata.addressTS = '普通地址'
          }
          new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/UpdateUserAddress`,
            this.userinfodata, {resolveMsg: null, rejectMsg: null}).then((useraddress) => {
            console.log('useraddress=', useraddress)
            if (useraddress.data.Success == true) {
              this.enable = true
              Indicator.close() //关闭加载显示
              this.userinfodata = {}
              this.dzNew = ''
              MessageBox({title: '成功', message: '操作成功', confirmButtonHighlight: true})
              this.$dispatch('confirm')
            } else {
              Indicator.close()
              MessageBox({title: '失败', message: `上传失败,失败原因：${useraddress.data.Msg}`, confirmButtonHighlight: true})
            }
          })
        }
      })
    },
    cancelUserInfo () {
      this.userinfodata = {}
      this.dzNew = ''
      this.$dispatch('confirm')
    },
    imgback (header) {
      if (this.headername == header) {
        return require('../../../assets/xiangxia1.png')
      } else {
        return require('../../../assets/xiangyou1.png')
      }
      this.headername = header
    },
    selectVal (header) {
      if (this.headername == header) {
        this.headername = ''
      } else {
        this.headername = header
      }

    }
  },
  watch: {
    'userinfodata': {
      deep: true,
      handler () {
        this.dzNew = (this.userinfodata.qy ||'') + (this.userinfodata.xq || '') + (this.userinfodata.ld ?this.userinfodata.ld+ '栋':this.userinfodata.ld)  + (this.userinfodata.dy?this.userinfodata.dy+'单元':this.userinfodata.dy)  + (this.userinfodata.mph?this.userinfodata.mph+'室':this.userinfodata.mph)  + (this.userinfodata.dz||'')
      }
    }
  }
}
</script>
<style lang="less" scoped>

.inactive{
  background: gray !important;
  border-color: gray !important;
}

.butt3 {
  float: right;
  width: 12px;
  margin: 1% 2% 0 0;
}

.rightipt {
  width: 60%;
  float: left;
  margin-left: 5%;
}

.righttxt {
  border: none;
  margin-left: 5px;
  /*border-left: 5px solid #A2C2EB;*/
  float: left;
  width: 25%;
  margin-bottom: 3px;
  text-align: left;
  word-wrap: break-word;
  white-space: normal;
}

.tit1 {
  /*background: #ffffff url('../../assets/用户姓名.png') no-repeat fixed center;*/
  background-image: url('../../../assets/用户姓名.png');
  background-repeat: no-repeat;
  background-position: center;
}

.spanboder {
  border-bottom: 2px solid #499edf;
  padding-bottom: 8px
}

#upuserinfo_sel /deep/ ul {
  width: 100% !important;
  left: 0 !important;
}

.btn-photo {
  border: 0;
  border-radius: 7px;
  background-color: #7dc1f4;
  font: 15px PingFang-SC-Bold;
  height: 20%;
}

.panel-self {
  border-radius: 10px;
  border: 1px solid #499EDF;
  background-color: #F8F8F8;
}

.div-photo {
  width: auto;
  height: auto;
  /* margin-top: 10px; */
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>
<style lang="less">
#upuserinfo_sel ul {
  width: 100% !important;
  left: 0 !important;
}
</style>
