<template>
    <div class="edit-view">
        <el-form
            :model="formData"
            :rules="rules"
            ref="form"
            label-width="108px"
            label-position="right"
            size="small"
            style="max-width: 660px;"
            inline
        >
            <div class="info-content">
                <el-form-item label="登陆账号" prop="username">
                    <el-input v-model="userInfo.username" placeholder="请输入登陆账号"></el-input>
                </el-form-item>
                <el-form-item label="所属考级机构" prop="examinationAgency">
                    <el-select v-model="examinationAgency" placeholder="所属考级机构" multiple>
                        <el-option
                            v-for="(item, index) in examination"
                            :key="index"
                            :value="item.value"
                            :label="item.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userInfo.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="userInfo.phone" placeholder="请输入电话"></el-input>
                </el-form-item>
            </div>

            <div class="info-content">
                <el-form-item label="承办单位名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入承办单位名称" style="width:490px"></el-input>
                </el-form-item>
                <el-form-item label="负责人" prop="owner">
                    <el-input v-model="formData.owner" placeholder="请输入负责人"></el-input>
                </el-form-item>
                <el-form-item label="负责人邮箱" prop="ownerEmail">
                    <el-input v-model="formData.ownerEmail" placeholder="请输入负责人邮箱"></el-input>
                </el-form-item>
                <el-form-item label="负责人电话" prop="ownerPhone">
                    <el-input v-model="formData.ownerPhone" placeholder="请输入负责人电话"></el-input>
                </el-form-item>
                <el-form-item label="法人姓名" prop="privacyPolicy">
                    <el-input v-model="formData.privacyPolicy" placeholder="请输入法人姓名"></el-input>
                </el-form-item>
                <el-form-item label="证件号码" prop="idNo">
                    <el-input v-model="formData.idNo" placeholder="请输入证件号码"></el-input>
                </el-form-item>
                <el-form-item label="信用代码" prop="uscc">
                    <el-input
                        v-model="formData.uscc"
                        placeholder="请输入统一社会信用代码"
                        style="width: 180px"
                    ></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="district" class="address">
                    <el-select v-model="formData.district" style="width:100%">
                        <el-option
                            v-for="(item, index) in districtOptions"
                            :key="index"
                            :value="item.value"
                            :label="item.label"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label=" " prop="address" class="address">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 4 }"
                        style="width:100%"
                        placeholder="请输入详细地址"
                        v-model="formData.address"
                    ></el-input>
                </el-form-item>
                <el-form-item label="经营范围" prop="businessScope" class="address">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 4 }"
                        placeholder="请输入经营范围"
                        v-model="formData.businessScope"
                        style="width:100%"
                    ></el-input>
                </el-form-item>
                <el-form-item label="营业执照" prop="businessLicense" class="address">
                    <single-upload v-model="formData.businessLicense"></single-upload>
                </el-form-item>
            </div>
            <el-form-item class="fixed-btn">
                <!-- <el-button @click="readonly = false" :loading="saving" type="success">编辑</el-button> -->
                <div style="margin: 10px">
                    <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
                </div>
                <!-- <el-button @click="$router.go(-1)">取消</el-button> -->
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'OrganizationInfo',
    computed: {
        ...mapState(['userInfo', 'organization'])
    },
    created() {
        this.formData = this.organization;
        this.examinationAgency = this.organization.gradingOrganizationId;
        this.$http
            // .get('/district/NJ', { size: 1000, query: { del: false } })
            .post('/setting/byFlag', { flag: 2 })
            .then(res => {
                if (res.length > 0) {
                    res.forEach(item => {
                        this.districtOptions.push({
                            label: item.name,
                            value: item.name
                        });
                    });
                }
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
        this.$http
            .post('/gradingOrganization/all', { size: 1000 }, { body: 'json' })
            .then(res => {
                if (res.content.length > 0) {
                    res.content.forEach(item => {
                        this.examination.push({
                            label: item.name,
                            value: item.id
                        });
                    });
                }
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
    },
    mounted() {
        this.$nextTick(() => {
            this.$store.dispatch('checkOrganization').catch(() => {
                this.$alert('请补全信息', '提示', {
                    confirmButtonText: '确定'
                });
            });
        });
    },
    data() {
        return {
            saving: false,
            formData: {},
            rules: {
                name: { required: true, message: '请输入承办单位名称', trigger: 'blur' },
                owner: { required: true, message: '请输入负责人', trigger: 'blur' },
                ownerEmail: {
                    required: true,
                    message: '请输入正确的邮箱',
                    pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                    trigger: 'blur'
                },
                ownerPhone: {
                    required: true,
                    message: '请输入正确的手机号',
                    pattern: /^1[3-9]\d{9}$/,
                    trigger: 'blur'
                },
                privacyPolicy: { required: true, message: '请输入法人姓名', trigger: 'blur' },
                idNo: {
                    required: true,
                    message: '请输入证件号码',
                    trigger: 'blur',
                    pattern: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/
                },
                uscc: { required: true, message: '请输入信用代码', trigger: 'blur' },
                district: { required: true, message: '请选择地址', trigger: 'change' },
                address: { required: true, message: '请输入详细地址', trigger: 'blur' },
                businessScope: { required: true, message: '请输入经营范围', trigger: 'blur' },
                businessLicense: { required: true, message: '请上传营业执照', trigger: 'change' }
            },
            districtOptions: [],
            district: [],
            examination: [],
            examinationAgency: ''
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                    // this.submitUser();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.formData };
            data.gradingOrganizationId = this.examinationAgency;
            this.saving = true;
            this.$http
                .post('/organization/save', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.submitUser();
                    // this.$router.go(-1);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
        submitUser() {
            let data = { ...this.userInfo };
            data.work = this.formData.name;
            this.saving = true;
            this.$http
                .post('/user/save', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    // this.$router.go(0);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/organization/del/${this.formData.id}`);
                })
                .then(() => {
                    this.$message.success('删除成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    if (e !== 'cancel') {
                        console.log(e);
                        this.$message.error((e || {}).error || '删除失败');
                    }
                });
        }
    }
};
</script>
<style lang="less" scoped>
.size-color {
    color: #606266 !important;
    background-color: #ffffff;
}
.district-width {
    width: 600px !important;
}
.info-content {
    background: #f5f7fa;
    padding: 39px 25px 25px;
    margin: 5px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .info-item {
        width: 50%;
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        &.address {
            width: 100%;
            align-items: flex-start;
            .val {
                width: 485px;
            }
        }

        .name {
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #565b66;
            line-height: 22px;
            min-width: 75px;
            margin-right: 10px;
            text-align: right;
        }

        .val {
            width: 190px;
        }
    }
}

/deep/ .address {
    display: flex;
    width: 100%;
    .el-form-item__content {
        flex-grow: 1;
    }
}
</style>
