<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" @blur="checkOrgAccount()"></el-input>
                <span class="colorM" v-show="checkRule.account == 'pass'">
                    <i class="el-icon el-icon-success"></i> 验证通过！
                </span>
                <span class="colorR" v-show="checkRule.account && checkRule.account != 'pass'">
                    <i class="el-icon el-icon-error"></i>
                    {{checkRule.accountTxt}}
                </span>
            </el-form-item>
            <el-form-item label="默认密码" prop="accountPwd" v-if="dialoTitle == '新增'">
                <el-input v-model="editForm.accountPwd" disabled></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')" v-if="checkRule.account == 'pass'">确定</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";
import METHOD from "@/utils/methods";

@Component({
    components: {}
})
export default class UserMgEdit extends Vue {
    //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
    @Prop(Boolean) dialogVisible!: Boolean;
    @Prop(Object) editForm!: {
        parentIds: number;
        account: string
        accountPwd: string
    };
    @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;
    @Provide() checkRule: any = {
        account: "",
        accountTxt: ""
    };

    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) => {
                        if (res.code == 0) {
                            (that as any).$emit("dialogFun");
                            (that as any).$message({
                                message: "操作成功！",
                                type: "success"
                            });
                            that.$emit("refreshTableData"); //刷新表格
                        }
                    });
            } else {
                return false;
            }
        });
    }
    checkOrgAccount() {
        let that = this;
        if (that.editForm.account) {
            METHOD.axiosGet(
                that,
                `/reg/checkUserAccount/${that.editForm.account}`,
                function (res: any) {
                    if (res.code == 0) that.checkRule.account = "pass";
                    else {
                        that.checkRule.account = "notpass";
                        that.checkRule.accountTxt = res.msg;
                    }
                }
            );
        }
    }
    created() {
        let that = this;
        that.editForm.accountPwd = '66668888'
    }
}
</script>
