<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
        >
            <!-- <el-form-item prop="businessLicense" label="营业执照">
                <single-upload v-model="formData.businessLicense"></single-upload>
            </el-form-item>
            <el-form-item prop="name" label="承办单位名称">
                <el-input v-model="formData.name" placeholder="请输入机构名称"></el-input>
            </el-form-item>
            <el-form-item prop="uscc" label="统一社会信用代码">
                <el-input v-model="formData.uscc" placeholder="请输入统一社会信用代码"></el-input>
            </el-form-item>
            <el-form-item prop="district" label="地址">
                <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-input
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 4 }"
                    style="margin-top: 14px"
                    placeholder="请输入详细地址"
                    v-model="formData.address"
                ></el-input>
            </el-form-item>
            <el-form-item prop="owner" label="负责人">
                <el-input v-model="formData.owner" placeholder="请输入负责人"></el-input>
            </el-form-item>
            <el-form-item prop="privacyPolicy" label="法人姓名">
                <el-input v-model="formData.privacyPolicy" placeholder="请输入法人姓名"></el-input>
            </el-form-item>
            <el-form-item prop="idNo" label="证件号码">
                <el-input v-model="formData.idNo" placeholder="请输入证件号码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
                <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除 </el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item> -->
            <div class="info-content">
                <el-form-item label="承办单位名称" prop="name">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入承办单位名称"
                        readonly
                        style="width:490px"
                    ></el-input>
                </el-form-item>
                <el-form-item label="负责人" prop="owner">
                    <el-input v-model="formData.owner" placeholder="请输入负责人" readonly></el-input>
                </el-form-item>
                <el-form-item label="负责人邮箱" prop="ownerEmail">
                    <el-input v-model="formData.ownerEmail" placeholder="请输入负责人邮箱" readonly></el-input>
                </el-form-item>
                <el-form-item label="负责人电话" prop="ownerPhone">
                    <el-input v-model="formData.ownerPhone" placeholder="请输入负责人电话" readonly></el-input>
                </el-form-item>
                <el-form-item label="法人姓名" prop="privacyPolicy">
                    <el-input v-model="formData.privacyPolicy" placeholder="请输入法人姓名" readonly></el-input>
                </el-form-item>
                <el-form-item label="证件号码" prop="idNo">
                    <el-input v-model="formData.idNo" placeholder="请输入证件号码" readonly></el-input>
                </el-form-item>
                <el-form-item label="信用代码" prop="uscc">
                    <el-input
                        v-model="formData.uscc"
                        placeholder="请输入统一社会信用代码"
                        readonly
                        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"
                            disabled
                        ></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"
                        readonly
                    ></el-input>
                </el-form-item>
                <el-form-item label="所属考级机构" prop="gradingOrganizationId">
                    <el-select
                        v-model="formData.gradingOrganizationId"
                        placeholder="所属考级机构"
                        multiple
                        style="width:490px"
                        disabled
                    >
                        <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="businessScope" class="address">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 5, maxRows: 7 }"
                        placeholder="请输入经营范围"
                        v-model="formData.businessScope"
                        style="width:100%"
                        readonly
                    ></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> -->
                    <el-button @click="onDelete" type="danger" size="mini">删除</el-button>
                    <el-button @click="$router.go(-1)">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'OrganizationEdit',
    created() {
        if (this.$route.query.id) {
            this.$http
                .get('organization/get/' + this.$route.query.id)
                .then(res => {
                    this.formData = res;
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
        if (this.organization != null) {
            this.formData = this.organization;
        }
        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);
            });
    },
    data() {
        return {
            saving: false,
            formData: {
                businessLicense: '',
                name: '',
                uscc: '',
                address: '',
                owner: '',
                privacyPolicy: '',
                IDNo: ''
            },
            rules: {},
            districtOptions: [],
            examination: []
        };
    },
    computed: {
        ...mapState(['organization'])
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.formData };

            this.saving = true;
            this.$http
                .post('/organization/save', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    // this.$router.go(-1);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
        onNew() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    let data = { ...this.formData };

                    this.saving = true;
                    this.$http
                        .post('/organization/save', data, { body: 'json' })
                        .then(res => {
                            this.saving = false;
                            this.$message.success('成功');
                            this.$emit('next');
                            console.log(res.id);
                            this.$router.replace({
                                name: 'RateEdit',
                                query: {
                                    organId: res.id
                                }
                            });
                        })
                        .catch(e => {
                            console.log(e);
                            this.saving = false;
                            this.$message.error(e.error);
                        });
                } else {
                    return false;
                }
            });
        },
        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>
.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;
    }
}
/deep/ .el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
}
</style>
