<template>
  <div class="flex-auto">
    <validator name='v'>
      <form novalidate class="form-horizontal select-overspread ">
<!--      <form novalidate class="binary-right">-->
        <ul class="nav nav-tabs">
          <li class="active a-tabs"><a href="#" class="">{{title}}</a></li>
        </ul>
        <div class="binary-right-main">
<!--        <div class="form-group row" style="margin-top: 20px">-->
<!--            <label class="font_normal_body">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像</label>-->
<!--            <div class="col-sm-5" id="f_photo_path" style="text-align: center">-->
<!--              <avatar-upload :img-src.sync="listinfo.img.content" :filename.sync="listinfo.img.filename"></avatar-upload>-->
<!--            </div>-->
<!--            <label class="font_normal_body">二&nbsp;&nbsp;维&nbsp;&nbsp;码</label>-->
<!--            <div class="col-sm-5" id="f_qrcode_path" title="二维码图像由员工编号生成">-->
<!--              <canvas id="msg"></canvas>-->
<!--            </div>-->
<!--        </div>-->
        <div class="form-group">
          <div class="col-sm-5" id="f_user_id">
          <label class="font_normal_body">员工编号</label>
            <input class="input_search"  type="text" v-model="listinfo.f_user_id" style="width: 90px"
                   placeholder="员工编号">
          </div>
          <div class="col-sm-5" id="name">
            <label class="font_normal_body">员工姓名</label>
              <input class="input_search"  type="text" v-model="listinfo.name" style="width: 90px"
                      placeholder="员工姓名">
            </div>
        </div>
        <div class="form-group">
          <div class="col-sm-5" id="ename">
            <label class="font_normal_body">登&nbsp;&nbsp;录&nbsp;&nbsp;名</label>
            <input class="input_search"  type="text" v-model="listinfo.ename" @blur='parentidSave()' :disabled="title == '修改状态'"
                   style="width: 90px"   placeholder="登录名">
          </div>
          <div class="col-sm-7" id="password">
            <label class="font_normal_body">登陆密码</label>
            <input class="input_search"  type="password" v-model="listinfo.password"  v-if="title != '修改状态'"
                   style="width: 90px"    placeholder="登陆密码">
            <button  class="btn btn-primary width-60" @click="editPassword(listinfo)" style="width:150px;margin-left:20px;" v-if="title == '修改状态'">点击还原初始密码</button>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-5">
            <label  class="font_normal_body" >所属部门</label>
            <input type="text" v-model="listinfo.f_department_name"  :disabled="false"
                   style="width: 90px"     class="input_search" placeholder="所属部门" readonly>
            <button  class="button_new" style="margin-left:10px;"  >
              <span class="glyphicon glyphicon-search" @click="openDepModal"></span>
            </button>
          </div>
          <div class="col-sm-5">
            <label  class="font_normal_body">所属角色</label>
            <input type="text" v-model="listinfo.rolenames"
                   style="width: 90px"   class="input_search"   placeholder="所属角色" readonly >
            <button  class="button_new" style="margin-left:10px;"  >
              <span class="glyphicon glyphicon-search" @click="openRoleModal"></span>
            </button>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2">
          <label class="font_normal_body">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
          </div>
          <div class="col-sm-4" id="f_sex">
              <v-select
                v-model="listinfo.f_sex"
                class="select_list select"
                placeholder='请选择'
                :value.sync="listinfo.f_sex"
                :options='getsexs'
                close-on-select>
              </v-select>
            </div>
            </div>
          <div class="form-group">
            <div class="col-sm-5 input-append" id="f_age">
              <label class="font_normal_body">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄</label>
              <input class="input_search" class="span2" type="number" v-model="listinfo.f_age"   style="width:90px"
                      placeholder="年龄">
            </div>
            <div class="col-sm-5" id="f_user_telephone">
              <label class="font_normal_body">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</label>
              <input class="input_search"  type="text" v-model="listinfo.f_user_telephone" style="width: 90px"
                     placeholder="电话">
            </div>
        </div>
        <div class="form-group">
          <div class="col-sm-10" id="f_address">
            <label class="font_normal_body">家庭住址</label>
            <input class="input_search"  type="text" v-model="listinfo.f_address"
                   placeholder="家庭住址">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2">
          <label class="font_normal_body">在职状态</label>
          </div>
          <div class="col-sm-4" id="f_staff_state">
            <v-select
              v-model="listinfo.f_staff_state"
              class="select_list select"
              placeholder='请选择'
              :value.sync="listinfo.f_staff_state"
              :options='getstaffstate'
              close-on-select>
            </v-select>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2">
          <label class="font_normal_body">证件类型</label>
          </div>
          <div class="col-sm-4" id="f_state" >
              <v-select
                        v-model="listinfo.f_credentials"
                        class="select_list select"
                        placeholder='请选择'
                        :value.sync="listinfo.f_credentials"
                        :options='credentials'
                        close-on-select>
              </v-select>
            </div>
            </div>
          <div class="form-group">
            <div class="col-sm-7" id="f_idnumber">
              <label class="font_normal_body">证件号码</label>
              <input class="input_search"  type="text" v-model="listinfo.f_idnumber" style="width: 160px"
                      placeholder="证件号码">
            </div>
        </div>
        <div class="form-group" >
          <div class="col-sm-10" id="f_remark">
            <label class="font_normal_body">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label>
            <textarea class="input_textarea" type="text" v-model="listinfo.f_remark"></textarea>
          </div>
        </div>
        <div style="text-align:right;height:auto;margin-top:30px;margin-right:30px;">
          <button  class="button_clear" @click="clear()" style="width:80px;margin-left:10px;" >清空</button>
          <button type="submit"  :disabled="saveid == 0" class="button_search" @click="confirm()" style="width:80px;margin-left:20px;">保存</button>
        </div>
        </div>
      </form>
    </validator>
    <department-modal :show.sync="depModalShow" @depart="getDepart"></department-modal>
    <role-modal :show.sync="roleModalShow" @roles="getRoles"></role-modal>
  </div>
</template>
<script>
  // import QRCode from 'qrcode'
  import co from 'co'
  let saveGen = function * (self) {
    self.$http.post('rs/data/save', {data: self.listinfo}).then((msg) => {
      if (Number.isNaN(Number(msg.bodyText))) {
        self.$showMessage(msg.bodyText)
      } else {
        self.$showMessage('添加成功')
      }
      self.refersh()
      self.$back('refresh')
    })
  }
  export default {
    data () {
      return {
        imgSrc: '',
        f_user_id: '',
        saveid: 0,
        // 组织树模态框
        depModalShow: false,

        // 角色模态框
        roleModalShow: false
      }
    },
    props: {
      listinfo: {
        type: Object
      },
      title: {
        type: String
      }
    },
    methods: {
      confirm () {
        let data = {
          loginid: this.$login.f.id,
          id: '',
          ename: this.listinfo.ename,
          password: this.listinfo.password,
          f_staff_state: this.listinfo.f_staff_state,
          f_sex: this.listinfo.f_sex,
          f_age: this.listinfo.f_age,
          f_address: this.listinfo.f_address,
          f_user_telephone: this.listinfo.f_user_telephone,
          f_credentials: this.listinfo.f_credentials,
          f_idnumber: this.listinfo.f_idnumber,
          f_department_name: this.listinfo.f_department_name, // 用作显示
          rolenames: this.listinfo.rolenames,
          rolelist: [],
          roles: this.listinfo.roles,
          resourcetype: 'user',
          f_description: '',
          selfid: '',
          tablename: 't_user',
          entitytype: 't_user',
          position: '5',
          f_remark: this.listinfo.f_remark,
          name: this.listinfo.name,
          parentid: this.listinfo.parentid,
          f_create_date: this.$login.toStandardTimeString(),
          f_operator_date: this.$login.toStandardTimeString(),
          f_operator: this.$login.f.name,
          f_filiale: this.$login.f.f_fengongsi,
          f_outlets: this.$login.f.f_parentname,
          f_orgstr: this.$login.f.orgpathstr,
          f_filialeids: this.$login.f.f_orgids
        }
        if (this.title === '修改状态') {
          data.id = this.listinfo.id
        }
        if (data.name.replace(/\s*/g, '').length == 0) {
          this.$showMessage('员工姓名不能为空')
          return
        }
        if (data.ename.replace(/\s*/g, '').length == 0) {
          this.$showMessage('登录名不能为空')
          return
        }
        if (data.password.replace(/\s*/g, '').length == 0) {
          data.password = '1'
        }
        this.listinfo = data
        console.log('data', data)
        let gen = saveGen(this)
        return co(gen)
      },
      openDepModal () {
        console.log('打开部门模态框')
        this.depModalShow = true
      },
      editPassword () {
        this.listinfo.password = '1'
        let gen = saveGen(this)
        return co(gen)
      },
      getDepart (val) {
        console.log('获取到所属部门', val)
        this.listinfo.f_department_name = val.name
        this.listinfo.parentid = val.id
      },
      openRoleModal () {
        this.roleModalShow = true
      },
      getRoles (val) {
        console.log('获取到角色', val)
        this.listinfo.rolenames = val.name
        this.listinfo.roles = val.id
      },
      parentidSave () {
        this.$resetpost('api/af-revenue/sql/staffQuery', {data: {condition: "f_staff_name = '" + this.listinfo.ename + "'"}}).then((res) => {
          if (res.data.length > 0) {
            this.saveid = 0
            this.$showAlert('此登录名已存在，请核实后重新输入！！', 'warning', 5000)
          } else {
            this.saveid = 1
            this.ename = this.listinfo.ename
          }
        }).catch((error) => {
          if (error.status) {
            this.$warn(`加载数据出错, ${JSON.stringify(error)}`)
            return
          }
        })
      },
      clear () {
        if (this.title !== '修改状态') {
          this.listinfo.ename = null
        }
        this.listinfo.name = null
        this.listinfo.f_user_telephone = null
        this.listinfo.f_sex = null
        this.listinfo.f_age = null
        this.listinfo.f_job = null
        this.listinfo.f_address = null
        this.listinfo.f_credentials = null
        this.listinfo.f_idnumber = null
        this.listinfo.f_remark = null
        this.listinfo.f_parentname = null
      }
    },
    watch: {
      // 通过监听获取数据
      f_user_id (val) {
        // 获取页面的canvas
        var msg = document.getElementById('msg')
        // 将获取到的数据（val）画到msg（canvas）上
        // QRCode.toCanvas(msg, val, function (error) {
        //   console.log(error)
        // })
      },
      listinfo (val) {
        if (this.title === '修改状态') {
          this.saveid = 1
        }
        // 获取页面的canvas
        var msg = document.getElementById('msg')
        // 将获取到的数据（val）画到msg（canvas）上
        // QRCode.toCanvas(msg, val.f_user_id, function (error) {
        //   console.log(error)
        // })
      }
    },
    computed: {
      credentials () {
        return this.$appdata.getParam('证件类型')
      },
      getstaffstate () {
        return this.$appdata.getParam('在职状态')
      },
      getsexs () {
        return this.$appdata.getParam('性别')
      },
      getjobs () {
        return this.$appdata.getParam('职务')
      }
    }
  }
</script>
<style>

</style>
