<template>
    <div class="edit-view">
        <el-form
            :model="formData"
            :rules="rules"
            ref="form"
            label-width="110px"
            label-position="right"
            size="small"
            style="max-width: 680px;"
        >
            <el-divider direction="horizontal" content-position="left">基本信息</el-divider>
            <div class="info-content">
                <div class="info-item">
                    <el-form-item prop="name" label="承办单位名称">
                        <el-input v-model="formData.name" placeholder="请输入承办单位名称" readonly></el-input>
                    </el-form-item>
                </div>
                <div class="info-item">
                    <el-form-item prop="name" label="负责人邮箱">
                        <el-input v-model="formData.ownerEmail" placeholder="请输入负责人邮箱" readonly></el-input>
                    </el-form-item>
                </div>
                <div class="info-item">
                    <el-form-item prop="owner" label="负责人">
                        <el-input v-model="formData.owner" placeholder="请输入负责人" readonly></el-input>
                    </el-form-item>
                </div>
                <div class="info-item">
                    <el-form-item prop="ownerPhone" label="负责人电话">
                        <el-input v-model="formData.ownerPhone" placeholder="请输入负责人电话" readonly></el-input>
                    </el-form-item>
                </div>
                <div class="info-item">
                    <el-form-item prop="district" label="地址">
                        <el-select v-model="formData.district" style="width:100%">
                            <el-option
                                v-for="item in districts"
                                :key="item.id"
                                :value="item.name"
                                :label="item.name"
                                :disabled="readonly"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="info-item address">
                    <div class="val">
                        <el-form-item prop="introduction" label="单位概况">
                            <el-input
                                readonly
                                type="textarea"
                                :autosize="{ minRows: 10, maxRows: 12 }"
                                placeholder="请输入单位概况"
                                v-model="formData.introduction"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="introductionAnnex" label="支撑材料">
                            <file-upload v-model="formData.introductionAnnex" :readonly="readonly"></file-upload>
                        </el-form-item>
                    </div>
                </div>
                <div class="info-item address">
                    <el-form-item prop="undertakeExamination" label="考级活动">
                        <el-radio-group v-model="formData.undertakeExamination" size="small" disabled>
                            <el-radio class="name" :label="true">承办过</el-radio>
                            <el-radio class="name" :label="false">未承办过</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <!-- <el-form-item>
                    <el-button type="primary" size="small" @click="onAddOtherForm()"
                        >新增承办过的艺术考级活动</el-button
                    >
                </el-form-item> -->
                <div class="add-con" v-for="(item, index) in collaborates" :key="index">
                    <div v-if="!item.del">
                        <div class="parameters1">
                            <el-form-item prop="gradingOrganizationId" label="考级机构">
                                <el-select v-model="item.gradingOrganizationId" placeholder="所属考级机构">
                                    <el-option
                                        v-for="item in grading"
                                        :key="item.value"
                                        :value="item.value"
                                        :label="item.label"
                                        :disabled="readonly"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="artTypeId" label="代理专业">
                                <el-cascader
                                    style="width: 100%"
                                    v-model="item.artTypeId"
                                    :props="optionProps"
                                    :options="artTypes"
                                    :show-all-levels="false"
                                    placeholder="请选择专业"
                                    :disabled="readonly"
                                >
                                </el-cascader>
                            </el-form-item>
                        </div>
                        <div class="info-item address">
                            <el-form-item prop="consent" label="合作协议">
                                <file-upload v-model="item.consent" :readonly="readonly"></file-upload>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item>
                            <el-button
                                class="del"
                                type="danger"
                                v-if="!hasChild(item)"
                                size="small"
                                icon="el-icon-delete"
                                @click="onDeleteOtherForm(item, index)"
                            ></el-button>
                        </el-form-item> -->
                    </div>
                </div>
            </div>
            <el-divider direction="horizontal" content-position="left">企业资质</el-divider>
            <div class="info-content">
                <div class="info-item address">
                    <div class="val">
                        <el-form-item prop="privacyPolicy" label="法人资格">
                            <file-upload v-model="formData.privacyPolicy" :readonly="readonly"></file-upload>
                            <!-- <single-upload v-model="formData.privacyPolicy"></single-upload> -->
                        </el-form-item>
                    </div>
                </div>
                <div class="info-item address">
                    <div class="val">
                        <el-form-item prop="business" label="业务内容">
                            <file-upload v-model="formData.business" :readonly="readonly"></file-upload>
                        </el-form-item>
                    </div>
                </div>
                <div class="info-item address">
                    <div class="val">
                        <el-form-item prop="credits" label="社会信誉">
                            <file-upload v-model="formData.credits" :readonly="readonly"></file-upload>
                        </el-form-item>
                    </div>
                </div>
            </div>
            <el-divider direction="horizontal" content-position="left">物质条件</el-divider>
            <div class="info-content">
                <div class="info-item address">
                    <div class="val">
                        <el-form-item prop="fire" label="消防安全">
                            <file-upload v-model="formData.fire" :readonly="readonly"></file-upload>
                        </el-form-item>
                    </div>
                </div>
                <div class="info-item address">
                    <div class="val">
                        <el-form-item prop="hygiene" label="卫生防疫">
                            <file-upload v-model="formData.hygiene" :readonly="readonly"></file-upload>
                        </el-form-item>
                    </div>
                </div>
                <div class="info-item address">
                    <div class="val">
                        <el-form-item prop="finance" label="财务报表">
                            <file-upload v-model="formData.finance" :readonly="readonly"></file-upload>
                        </el-form-item>
                    </div>
                </div>
                <div class="info-item address">
                    <div class="val">
                        <el-form-item prop="property" label="房产证明">
                            <file-upload v-model="formData.property" :readonly="readonly"></file-upload>
                        </el-form-item>
                    </div>
                </div>
            </div>
            <el-divider direction="horizontal" content-position="left" v-if="showAudit">初审记录</el-divider>
            <div class="info-content" v-for="(item, index) in rateAudits" :key="index">
                <div class="info-item" style="margin-bottom: 10px">
                    <div class="name">操作时间</div>
                    <div class="val">
                        <el-input readonly v-model="item.auditTime"></el-input>
                    </div>
                </div>
                <div class="info-item address">
                    <div class="name">备注</div>
                    <div class="val">
                        <el-input
                            readonly
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 3 }"
                            v-model="item.remark"
                        ></el-input>
                    </div>
                </div>
            </div>
            <el-form-item class="fixed-btn">
                <div style="margin-top: 10px">
                    <el-button
                        type="success"
                        v-if="(formData.status == 'ACCEPT' || formData.status == 'REVIEW_DENY') && display"
                        @click="completed"
                        >审核完成</el-button
                    >
                    <el-button @click="$router.go(-1)">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import delChild from '@/mixins/delChild';
export default {
    name: 'RateEdit',
    mixins: [delChild],
    computed: {
        ...mapState(['userInfo'])
    },
    created() {
        if (this.$route.query.id) {
            this.rateId = this.$route.query.id;
            this.$http
                .get('rate/get/' + this.$route.query.id)
                .then(res => {
                    this.formData = res;
                    let data = res.rateAudits;
                    if (typeof data != 'undefined') {
                        this.showAudit = true;
                        this.rateAudits = data;
                    }
                    this.$http
                        .post(
                            '/collaborate/all',
                            { size: 100, query: { rateId: this.$route.query.id } },
                            { body: 'json' }
                        )
                        .then(res => {
                            this.collaborates = res.content;
                        });
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
        this.$http
            .post('/setting/byFlag', { flag: 2 })
            .then(res => {
                this.districts = res;
            })
            .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.grading.push({
                            label: item.name,
                            value: item.id
                        });
                    });
                }
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
        this.$http
            .post('/artType/allList')
            .then(res => {
                this.artTypes = this.delChild(res);
            })
            .catch(e => {
                console.log(e);
            });
        this.getAdmin();
    },
    data() {
        return {
            formData: {
                examination: [],
                name: '',
                owner: '',
                ownerEmail: '',
                ownerPhone: '',
                district: ''
            },
            rateId: '',
            rateAudits: {},
            showAudit: false,
            inputVisible: false,
            inputValue: '',
            saving: false,
            districts: [],
            readonly: true,
            grade: '',
            grading: [],
            rules: {
                name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
                owner: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
                ownerEmail: [
                    {
                        required: true,
                        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    }
                ],
                ownerPhone: [
                    {
                        required: true,
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }
                ],
                district: [{ required: true, message: '请选择注册地址', trigger: 'blur' }],
                introduction: [{ required: true, message: '请输入单位概况', trigger: 'blur' }],
                undertakeExamination: [{ required: true, message: '请选择是否承办过考级活动', trigger: 'blur' }],
                privacyPolicy: [{ required: true, message: '请上传法人资格', trigger: 'blur' }],
                business: [{ required: true, message: '请上传业务内容', trigger: 'blur' }],
                credits: [{ required: true, message: '请上传社会信誉', trigger: 'blur' }],
                fire: [{ required: true, message: '请上传消防安全', trigger: 'blur' }],
                hygiene: [{ required: true, message: '请上传卫生防疫', trigger: 'blur' }],
                finance: [{ required: true, message: '请上传财务报表', trigger: 'blur' }],
                property: [{ required: true, message: '请上传房产证明', trigger: 'blur' }]
            },
            collaborates: [],
            artTypes: [],
            optionProps: {
                value: 'id',
                label: 'name',
                children: 'children',
                multiple: true,
                emitPath: false,
                checkStrictly: true,
                expandTrigger: 'hover'
            },
            display: false
        };
    },
    methods: {
        getAdmin() {
            let data = this.userInfo.authorities;
            data.forEach(element => {
                if (element.name === 'ROLE_DISTRICT' || element.name === 'ROLE_DISTRICT_STAFF') {
                    this.display = true;
                    return;
                }
            });
        },
        onAddOtherForm() {
            this.collaborates.push({
                gradingOrganizationId: '',
                consent: '',
                artTypeId: ''
            });
        },
        hasChild(info) {
            info.children = info.children || [];
            const childNum = [...info.children].filter(item => {
                return !item.del;
            }).length;
            return !!childNum;
        },
        handleClose(tag) {
            this.formData.examination.splice(this.formData.examination.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.formData.examination.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        completed() {
            this.$confirm('确认审核已完成吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let data = { ...this.formData };
                    data.status = 'FIRST_REVIEW_COMPLETED';
                    this.$http
                        .post('/rate/save', data, { body: 'json' })
                        .then(res => {
                            this.$nextTick(() => {
                                let audit = {
                                    rateId: res.id,
                                    remark: '区文旅局已审核完成，等待初审结果',
                                    status: 'FIRST_REVIEW_COMPLETED'
                                };
                                this.$http.post('/rateAudit/save', audit, {
                                    body: 'json'
                                });
                            });
                            this.$router.go(-1)();
                        })
                        .catch(e => {
                            console.log(e);
                            this.$message.error(e.error);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
        }
    }
};
</script>
<style lang="less" scoped>
.edit-view {
    // padding-left: 20%;
    .add-con {
        background-color: #f7f7f7;
        width: 100%;
        margin-bottom: 10px;
    }
}
/deep/ .el-divider {
    margin-top: 30px;
}
/deep/ .el-divider__text {
    left: 0;
}
.el-divider__text {
    font-size: 18px;
    font-weight: 500;
}

.parameters1 {
    display: flex;
    align-items: center;
    margin-top: 23px;
}
.info-content {
    // background: #f5f7fa;
    padding: 20px 10px 25px;
    margin: 2px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .info-item {
        width: 50%;
        display: flex;
        align-items: center;
        &.address {
            width: 100%;
            align-items: flex-start;
            .val {
                width: 600px;
            }
        }
        .name {
            font-size: 14px;
            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;
        }
    }
    .tag {
        margin: 98px 240px;
        width: 50px;
        height: 22px;
        background: rgba(255, 165, 38, 0.3);
        font-size: 12px;
        line-height: 22px;
        text-align: center;
        color: #0f264d;
        position: absolute;
        left: 0;
        top: 12px;
    }
}
.el-tag + .el-tag {
    margin-left: 30px;
}
.el-tag-height {
    line-height: 30px;
    height: 32px !important;
    margin-bottom: 10px;
    margin-left: 30px;
}
.button-new-tag {
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 200px;
    vertical-align: bottom;
}
.el-radio__input.is-checked .el-radio__inner {
    border-block: #409eff;
    background: #409eff;
}
.el-radio__inner {
    border: 1px solid #dcdfe6;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    background-color: #fff;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/deep/ .el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
}
</style>
