<template>
    <div class="container-accountability userManagerAddPage">
        <h3 class="tit">用户管理</h3>
        <el-form
            ref="formData"
            :model="formData"
            :rules="rules"
            label-width="80px"
        >
            <el-row :gutter='20'>
                <el-col :span="8" :offset="4">
                    <el-form-item label="单位名称" prop="orgName">
                        <el-input v-model="formData.orgName" placeholder="请输入" clearable :disabled='isShow'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属地区" prop="countyCode" v-if="areaLevel == '120000'">
                        <el-cascader v-model='formData.countyCode' :options="options" clearable :disabled='isShow' :props='props'></el-cascader>
                    </el-form-item>
                    <el-form-item label="所属地区" prop="areaName" v-else>
                        <el-input v-model="formData.areaName" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter='20'>
                <el-col :span="8" :offset="4">
                    <el-form-item label="帐号" prop="userLoginName">
                        <el-input v-model="formData.userLoginName" placeholder="请输入" clearable :disabled='isShow'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="密码" prop="userPassword" v-if="$route.query.state == 'add'">
                        <el-input v-model="formData.userPassword" placeholder="请输入" clearable :disabled='isShow'></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" v-else>
                        <el-input v-model="formData.createDate" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter='20' v-if="$route.query.state == 'add'">
                <el-col :span="8" :offset="4">
                    <el-form-item label="创建时间">
                        <el-input v-model="formData.createDate" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter='20'>
                <el-col :span="16" :offset="4">
                    <el-form-item label="备注" prop='remark'>
                        <el-input type='textarea' v-model="formData.remark" :rows="4" resize='none' :disabled='isShow'></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row>
            <el-col :span="16" :offset="4" style="text-align: center;">
                <el-button
                    type="primary"
                    size='small'
                    class="iconfont iconbaocun"
                    :loading="loadingSave"
                    @click="saveClick('formData')"
                    v-if="!isShow"
                >保存</el-button>
                <el-button
                    type="primary"
                    size='small'
                    class="iconfont iconfanhui"
                    @click="goBack"
                >返回</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import * as validate from "@/utils/validate";
import * as management from "@/api/headResponsibility/infoManager"
export default {
    data() {
        const checkOrgName = (rule, value, callback) => {
            if(this.$route.query.state == 'upDate') {//修改时
                const needOption = {
                    orgCode: this.$route.query.orgCode,
                    orgName: value
                }
                management.editGetOrg(needOption).then(res => {
                    if(res.infoCode == 200) {
                        callback()
                    }else if(res.infoCode == 301){
                        callback('单位名称已存在')
                    }else {
                        this.$message({
                            type: 'error',
                            message: res.msg,
                            duration: 2000
                        })
                    }
                })
            }else {//新增
                // management.getOrgInfo(value).then(res => {
                //     if(res.infoCode == 200) {
                //         if(res.data) {
                //             callback(new Error('单位名称已存在'))
                //         }else {
                //             callback()
                //         }
                //     }else {
                //         this.$message({
                //             type: 'error',
                //             message: res.msg,
                //             duration: 2000
                //         })
                //     }
                // })
                callback()
            }
        }
        const checkAccount = (rule, value, callback) => {
            if(this.$route.query.state == 'upDate') {//修改时
                const needObj = {
                    userCode: this.$route.query.userCode,
                    userLoginName: value
                }
                management.editGetUserInfo(needObj).then(res => {
                    if(res.infoCode == 200) {//代表可以保存
                        callback()
                    }else if(res.infoCode == 301){
                        callback('帐号已存在')
                    }else {
                        this.$message({
                            type: 'error',
                            message: res.msg,
                            duration: 2000
                        })
                    }
                })
            }else {//新增
                management.getUserInfo(value).then(res => {
                    if(res.infoCode == 200) {
                        callback('帐号已存在')
                    }else if(res.infoCode == 300){
                        callback()
                    }else {
                        // this.$message({
                        //     type: 'error',
                        //     message: res.msg,
                        //     duration: 2000
                        // })
                        callback()
                    }
                })
            }
        }
        return {
            options: [],
            props: { value: 'areaCode',label: 'orgName',children: 'children',emitPath: false,checkStrictly: true },
            isShow: false,
            formData: {
                areaName: '',//区级所属地区展示用
                countyCode: '',
                orgName: '',
                userLoginName: '',//帐号
                userPassword: '',
                createDate: '',
                remark: '',
                type: ''
            },
            rules: {
                areaName: [//请选择所属地区
                    { required: true, trigger: "blur" }
                ],
                countyCode: [
                    { required: true, message: "请选择所属地区", trigger: "blur" }
                ],
                orgName:[
                    { required: true, message: "请输入单位名称", trigger: "blur" },
                    { validator: validate.validateFive, trigger: "blur" },
                    { validator: checkOrgName, trigger: "blur" },
                ],
                userLoginName: [
                    { required: true, message: "请输入帐号", trigger: "blur" },
                    { validator: checkAccount, trigger: "blur" }
                ],
                userPassword: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ]
            },
            loadingSave: false,//保存用
            areaLevel: ''
        }
    },
    created() {
        this.areaLevel = localStorage.getItem('countyCode')
        if(this.$route.query.state == 'show') {
            this.isShow = true
        }
        if(this.areaLevel == '120000') {//市级用户
            this.getUnit()
        }else if(this.$route.query.state == 'add'){
            this.formData.areaName = sessionStorage.getItem('areaName')
            this.formData.countyCode = this.areaLevel
        }
        if(this.$route.query.state != 'add') {//修改或查看页
            this.getDetailFun()
        }
    },
    methods: {
        getUnit() {
            management.getAllArea().then((res) => {
                if(res.infoCode == 200) {
                    const needArr = {
                        areaCode: '120000',
                        orgName: '天津市',
                        children: res.data
                    }
                    this.options.push(needArr)
                }else {
                    this.$message({
                        type: 'error',
                        message: res.msg,
                        duration: 2000
                    })
                }
            })
        },
        getDetailFun() {//根据userCode获取信息
            management.getDetailInfo([this.$route.query.userCode]).then((res) => {
                if(res.infoCode == 200) {
                    res.data[0].createDate = this.dateFormat(res.data[0].createDate)
                    this.formData = res.data[0]
                }else {
                    this.$message({
                        type: 'error',
                        message: res.msg,
                        duration: 2000
                    })
                }
            })
        },
        saveClick(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loadingSave = true
                    if(this.$route.query.state == 'upDate') {//修改
                        this.formData.type = 'edit'
                    }else{//新增
                        this.formData.type = 'new'
                    }
                    management.saveCity(this.formData).then((res) => {
                        if(res.infoCode == 200) {
                            this.$message({
                                type: 'success',
                                message: '保存成功',
                                duration: 2000
                            })
                            this.$router.back(-1)
                        }else {
                            this.$message({
                                type: 'error',
                                message: res.msg,
                                duration: 2000
                            })
                            this.loadingSave = false
                        }
                    })
                } else {
                    return false;
                }
            })
        },
        goBack() {//返回按钮
            this.$router.back(-1);
        },
        // 时间格式化函数
        dateFormat(time) {
            if (time) {
                var day = time.split("T");
                //获取日期部分的年月日
                var days = day[0].split("-");
                return days[0] + "-" + days[1] + "-" + days[2];
            } else {
                return "";
            }
        }
    }
}
</script>
<style lang="scss">
    .userManagerAddPage {
        .tit{
            text-align: center;
            margin-bottom: 20px;
        }
        .el-select{
          width: 100%;
        }
    }
</style>
