<template>
  <div class="auto select-overspread">
    <validator name='v'>
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">员工信息</a></li>
      </ul>
      <form class="form-horizontal" style="margin-top:20px;flex: 1;">
        <div class="row">
          <div class="col-sm-6 form-group form-input-group"  :class="[$v.f_name.required ? 'has-error' : '']">
            <label class="control-label">姓名</label>
            <input type="text"  v-model="model.name" v-validate:f_name='{required: true }' class="form-control" placeholder="姓名" v-next-el="name">
          </div>

          <div class="col-sm-6 form-group form-input-group"   :class="[$v.ename.required ? 'has-error' : '']">
            <label for="f_adjustable_name" class="control-label">登录名</label>
            <input type="text"  v-model="model.ename"
                   v-validate:ename="{required: true }" class="form-control" placeholder="登录名" v-el:name v-next-el="address">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 form-group form-input-group" >
            <label for="f_area" class="control-label">电话</label>
            <input type="text" v-model="model.f_user_telephone" class="form-control" placeholder="电话">
          </div>
          <div class="col-sm-6 form-group form-input-group">
            <label for="f_area" class="control-label">状态</label>
            <v-select :value.sync="model.state"
                      :options='userStates'
                      :value-single="true"
                      placeholder='状态'
                      close-on-select
                      v-model='model.state'></v-select>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 form-group form-input-group"  :class="[$v.f_department_name.required ? 'has-error' : '']">
            <label for="f_area" class="control-label">所属部门</label>
            <input type="text" v-model="model.f_department_name"
                   v-validate:f_department_name="{required: true }" class="form-control" placeholder="所属部门" readonly >
            <button type="button" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-search" @click="openOrgModal"></span>
            </button>
          </div>
          <div class="col-sm-6 form-group form-input-group" :class="[$v.f_role_name.required ? 'has-error' : '']">
            <label for="f_area" class="control-label">所属角色</label>
            <input type="text" v-model="model.f_role_name"
                   v-validate:f_role_name="{required: true }" class="form-control" placeholder="所属角色" readonly >
            <button type="button" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-search" @click="openRoleModal"></span>
            </button>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 form-group form-input-group">
            <label for="f_area" class="control-label">备注</label>
            <textarea class="form-control" rows="3" v-model="model.f_comments" placeholder="备注"></textarea>
          </div>
        </div>
      </form>
      <div style="text-align:right;height:auto;margin-top:6px;">
        <button class="btn btn-success" @click="confirm()" :disabled='!$v.valid'>确认</button>
        <button class="btn btn-default" @click="close()">取消</button>
      </div>
    </validator>

    <organization-modal :show.sync="orgModalShow" @depart="getDepart"></organization-modal>
    <role-modal :show.sync="roleModalShow" @select-role="getRoles"></role-modal>
  </div>
</template>

<script>

  export default {
    title: '添加人员',
    data () {
      return {
        model: {
          loginid: this.$login.f.id,
          id: '',
          name: '',
          ename: '',
          parentid: '',
          state: '在职',
          f_department_name:'', // 用作显示
          f_role_name: '',
          rolelist: [],
          rolestr: '',
          resourcetype: 'user',
          f_description: '',
          f_user_telephone: ''
        },
        // 组织树模态框
        orgModalShow: false,

        // 角色模态框
        roleModalShow: false,
        userStates: [{label:'在职', value: '在职'}, {label:'离职', value: '离职'}]
      }
    },
    props: ['data'],
    ready () {
      this.model = Object.assign({}, this.model, this.data)
    },
    watch: {
      'data' (val) {
        this.model = Object.assign({}, this.model, this.data)
      }
    },
    methods: {
      async confirm () {
        // 保存用户
        try {
          let res = await this.$resetpost('rs/data/save', {data: this.model})
          this.$showAlert('保存成功', 'success', 2000)
        } catch (error) {
          this.$showAlert(`用户保存失败！！错误信息：${e}`, 'error', 0)
        }
        this.$dispatch('refresh')
      },
      close () {
        this.$dispatch('refresh')
      },

      openOrgModal () {
        console.log('打开部门模态框')
        this.orgModalShow = true
      },
      getDepart (val) {
        console.log('获取到所属部门', val)
        this.model.f_department_name = val.name
        this.model.parentid = val.id
      },
      openRoleModal () {
        this.roleModalShow = true
      },
      getRoles (roles) {
        this.model.f_role_name = ''
        this.model.rolelist = []

        roles.forEach((res) => {
          this.model.f_role_name += res.name + ' '
          this.model.rolelist.push({id: res.id})
        })
      }
    }
  }

</script>
