<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialoTitle"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <el-form-item label="所属部门" prop="fullName">
          <el-input disabled  v-model="checkedObj.fullName"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="登录帐号" prop="account">
          <el-input v-model="editForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="accountPwd" v-if="dialoTitle == '新增'">
          <el-input v-model="editForm.accountPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="微信ID" prop="openId">
          <el-input v-model="editForm.openId"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-select v-model="editForm.avatar" placeholder="请选择">
             <el-option label="IT男孩" value="1"></el-option>
             <el-option label="白领青年" value="2"></el-option>
             <el-option label="可爱女孩" value="3"></el-option>
             <el-option label="黄发男孩" value="4"></el-option>
             <el-option label="红发女人" value="5"></el-option>
          </el-select>
          &nbsp;<img :src="require(`@/assets/avatar${editForm.avatar || '1'}.png`)" alt="" height="40" style="vertical-align: bottom;">
        </el-form-item>
        <el-form-item label="微信昵称" prop="wxNickName">
          <el-input v-model="editForm.wxNickName"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker type="date" v-model="editForm.birthday" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="editForm.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="editForm.age" type="number"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobliePhone">
          <el-input v-model="editForm.mobliePhone"></el-input>
        </el-form-item>
        <el-form-item label="座机" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <!-- <el-form-item label="帐号状态" prop="accountStatus">
          <el-radio-group v-model="editForm.accountStatus">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">删除</el-radio>
            <el-radio label="2">锁定</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="editForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
        <el-button @click="$emit('dialogFun')" size="small">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";

@Component({
  components: { }
})
export default class UserMgEdit extends Vue {
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible !: Boolean;
  @Prop(Object) editForm !:  {
    parentIds:number;
  };
  @Prop(String) dialoTitle !: String;
  @Prop(Object) checkedObj !:  {
    id: string;
    level: string;
    parentIds:string;
  };//选中节点

  @Provide() dialogTableVisible: Boolean = false;
  @Provide() rules: any = {
    account: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    // accountPwd: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    userName: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    email: [{ type:'email', message:'请输入正确的邮箱',trigger:'change'}],
    mobliePhone: [{message:'请输入正确的手机号',pattern:/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/},],
    phone: [{ pattern:/^[0-9]+$/,message:'请输入正确的座机号'}],
  };

  @Provide() loadmap:Boolean = false;

  dialogcancelFun(){
    this.dialogTableVisible = false;
  }
  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this,params:any = Object.assign({},that.editForm);
    let ids = that.checkedObj.parentIds;
    if(that.dialoTitle == '新增'){
       params.deptId =  Number(that.checkedObj.id)
    }
    // console.log(params)
    // return
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        (that as any).$axios
          .post(`/user/addorEditUserInfo`,params )
          .then((res: any) => {
            (that as any).$emit("dialogFun");
            (that as any).$message({
              message: "操作成功！",
              type: "success"
            });
            that.$emit("refreshTableData"); //刷新表格
          });
      } else {
        return false;
      }
    });
  }
  created() {
    let that = this;
  }
}
</script>
