<template>
  <div>
    <el-button size="mini" type="primary" icon="el-icon-plus" @click="drawer = true">新增账号</el-button>
    <el-dialog
      title="创建"
      :visible.sync="drawer"
      width="40%">
      <div>
        <el-row :gutter="10">
          <el-form :model="form" size="mini" label-position="left">
            <el-col class="normal-title" :span="24">
              联系人信息
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人" label-width="80px">
                <el-input v-model="form.name" autocomplete="off" placeholder="输入联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" label-width="80px">
                <el-input v-model="form.phonenumber" autocomplete="off" placeholder="输入联系方式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" label-width="80px">
                <el-input v-model="form.idcard" autocomplete="off" placeholder="输入身份证号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" label-width="80px">
                <!-- <el-input v-model="form.sex" autocomplete="off" placeholder="输入性别"></el-input> -->
                <el-select v-model="form.sex" style="width:100%" placeholder="请选择">
                  <el-option
                    label="女"
                    :value="1">
                  </el-option>
                  <el-option
                    label="男"
                    :value="0">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生日" label-width="80px">
                <!-- <el-input v-model="form.birthday" autocomplete="off" placeholder="输入生日"></el-input> -->
                <el-date-picker
                  style="width:100%"
                  v-model="form.birthday"
                  align="right"
                  type="date"
                  placeholder="选择生日"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" label-width="80px">
                <el-input v-model="form.email" autocomplete="off" placeholder="输入邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" label-width="80px">
                <el-input v-model="form.remarks" autocomplete="off" placeholder="输入备注"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="normal-title" :span="24">
              账号信息
            </el-col>
            <el-col :span="24">
              <el-form-item label="创建账号" label-width="80px">
                <el-input v-model="form.accountno" autocomplete="off" placeholder="输入新建账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="账号密码" label-width="80px">
                <el-input v-model="form.password" type="password" autocomplete="off" placeholder="输入账号密码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否启用" label-width="80px">
                <el-checkbox v-model="form.status" :true-label="1" :false-label="0">{{form.status === 1?'启用':'停用'}}</el-checkbox>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="default" size="small" @click="drawer = false">取 消</el-button>
        <el-button type="primary" size="small" @click="onSubmit">创建账号</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'js-md5'

export default {
  data () {
    return {
      drawer:false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      form:{
        "userid": 0,
        "name": "",
        "sex": 1,
        "phonenumber": "",
        "accountno": "",
        "status": 1,
        "password":"",
        "birthday":"",
        "remarks":"",
        "email":"",
        "idcard":"",
        "departmentid":1
      }
    }
  },
  methods:{
    onSubmit () {
      this.form.password = md5(this.form.password)
      this.$api.requested({
        "classname": "webmanage.users.users",
        "method": "insertormodify_user",
        "content": this.form
      }).then(res=>{
        if (res.code === 1) {
          this.$notify({
            title: '成功',
            message: '账号添加成功',
            type: 'success'
          });
          this.drawer = false
          this.$emit('onSuccess')
        } else {
          this.$notify({
            title: '失败',
            message: res.data,
            type: 'error'
          });
        }
      })
    }
  }
}

</script>
<style>
</style>