<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.userid.required ? 'has-error' : '']">
            <label class="control-label">员工编号</label>
            <input type="text"  v-model="model.userid" v-validate:userid='{required: true }' class="form-control" placeholder="员工编号" v-next-el="name">
          </div>
          <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>
        <div class="row">
          <div class="col-sm-6 form-group form-input-group"   :class="[$v.ename.required ? 'has-error' : '']">
            <label class="control-label">登录名</label>
            <input type="text"  v-model="model.ename"
                   v-validate:ename="{required: true }" class="form-control" placeholder="登录名">
          </div>
          <div class="col-sm-6 form-group form-input-group" :class="[$v.password.required ? 'has-error' : '']">
            <label  class="control-label">登录密码</label>
            <input type="text" v-model="model.password"
                   v-validate:password="{required: true }" class="form-control" placeholder="登录密码">

          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 form-group form-input-group" >
            <label  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  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  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  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-6 form-group form-input-group" >
            <label class="control-label">性别</label>
            <v-select
              v-model="model.f_sex"
              placeholder='请选择'
              :value.sync="model.f_sex"
              :value-single="true"
              :options='getsexs'
              close-on-select>
            </v-select>
          </div>
          <div class="col-sm-6 form-group form-input-group" >
            <label class="control-label">年龄</label>
            <input type="text" v-model="model.f_age" class="form-control" placeholder="年龄">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 form-group form-input-group" >
            <label class="control-label">身份证号</label>
            <input type="text" v-model="model.f_idnumber" class="form-control" placeholder="身份证号">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 form-group form-input-group">
            <label  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-danger" @click="deleteStaff()" v-if="model.id">删除</button>
        <button class="btn btn-default" @click="close()">取消</button>
      </div>
    </validator>

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

<script>

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

        // 角色模态框
        roleModalShow: false,
        userStates: [{label:'在职', value: '在职'}, {label:'离职', value: '离职'}],
        getsexs: [{label:'男', value: '男'}, {label:'女', value: '女'}]
      }
    },
    props: ['data'],
    ready () {
      this.initModel()
    },
    watch: {
      'data' (val) {
        this.initModel()
      }
    },
    methods: {
      initModel() {
        this.model = Object.assign({}, this.model, this.data)
        // 处理角色默认数据
        if (this.model.roles) {
          this.model.rolelist.push({id: this.model.roles})
        }
        if (!this.model.state) {
          this.model.state = '在职'
        }

      },
      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')
      },
      async deleteStaff () {
        let res = await this.$showMessage(`确认要删除员工: ${this.model.name} 吗？`, ['confirm', 'cancel'])
        if (res === 'confirm') {
          let param = []
          param.push(this.model)
          try {
            await this.$resetpost('rs/data/delete', {data: param}, {resolveMsg: '删除成功！！', rejectMsg: null})
          } catch (error) {
            this.$showAlert(error.data, 'danger', 0)
          }
          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 = roles.name
        this.model.rolelist = []
        this.model.rolelist.push({id: roles.id})
      }
    }
  }

</script>
