<template>
  <div class="auto">
    <modal width="30%" :show.sync="show" v-ref:modal title="备用电话管理" large backdrop="false" class="">
      <article slot="modal-body" class="modal-body">
        <div class="text-center">
          <div v-for="row in userphonelist">
            <validator name='v'>
              <form class="form-horizontal  select-overspread">
                <div class="row" v-if="row.f_state==='有效'">
                  <div class="col-sm-10 form-group">
                    <label for="f_rent_phone" class="font_normal_body">&emsp;&emsp;&emsp;&emsp;&emsp;备用电话&emsp;&emsp;</label>
                    <input class="input_search"
                           style="width:50%"
                           type="text"
                           v-model="row.f_rent_phone"
                           :value.sync="row.f_rent_phone"
                           placeholder="备用电话">
                  </div>
                  <div class="col-sm-2 form-group">
                    <button type="button" class="glyphicon glyphicon-minus btn-danger" @click.stop="delphone($index,row)"></button>
                  </div>
                </div>
              </form>
            </validator>
          </div>
          <div class="panel panel-default auto text-center" @click="addphone()" style="cursor: pointer;">
            <span class="glyphicon glyphicon-plus"></span>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-success" @click='close()'>确认</button>
      </footer>
    </modal>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    title: '备用电话管理',
    data () {
      return {
      }
    },
    props: {
      userphonelist: {
        type: Array
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    ready () {
      console.log('备用电话管理:',JSON.stringify(this.userphonelist))
    },
    methods: {
      addphone () {
        this.userphonelist.push({
          f_userinfo_id: this.f_userinfo_id?this.f_userinfo_id:'',
          f_rent_phone:'',
          f_state: '有效',
          f_operator: Vue.$login.f.name,
          f_operatorid: Vue.$login.f.id,
          f_orgid: Vue.$login.f.orgid,
          f_orgname: Vue.$login.f.orgs,
          f_depid: Vue.$login.f.depids,
          f_depname: Vue.$login.f.deps
        })
      },
      delphone (index,row) {
        this.$showMessage('是否确定要删除此条数据？', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            if (row.id) {
              this.userphonelist[index].f_state = '无效'
            } else {
              this.userphonelist.splice(index, 1)
            }
          }
        })
      },
      close(){
        this.show = false
      }
    },
    computed: {

    }
  }
</script>

<style lang="less">
</style>
