<template>
    <div class="edit-view">
        <el-form
            :model="formData"
            :rules="rules"
            ref="form"
            label-width="100px"
            label-position="right"
            size="small"
            style="max-width: 500px;"
        >
            <!-- <el-form-item prop="organizer" label="承办单位">
                <el-input v-model="formData.organizer"></el-input>
            </el-form-item> -->
            <!-- <el-form-item prop="year" label="年度">
                <el-input v-model="formData.year"></el-input>
            </el-form-item> -->
            <!-- <el-form-item prop="status" label="状态">
                <el-select v-model="formData.status" clearable filterable placeholder="请选择">
                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="是否承办过">
                <el-radio-group v-model="formData.undertakeExamination" size="small">
                    <el-radio :label="true">承办过</el-radio>
                    <el-radio :label="false">未承办过</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="考级活动名称" v-if="formData.undertakeExamination">
                <el-tag
                    :key="tag"
                    v-for="tag in formData.examination"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                    size="medium"
                    class="el-tag-height"
                >
                    {{ tag }}
                </el-tag>
                <div>
                    <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput"
                        >添加考级活动名称</el-button
                    >
                </div>
            </el-form-item>
            <el-form-item prop="privacyPolicy" label="法人资格">
                <!-- <el-upload class="upload-demo" action="../upload/file" :on-change="handleChange" :file-list="fileList3">
                    <el-button size="small" type="primary">
                        点击上传
                    </el-button>
                </el-upload> -->
                <file-upload v-model="formData.privacyPolicy"></file-upload>
            </el-form-item>
            <el-form-item prop="business" label="业务内容">
                <file-upload v-model="formData.business"></file-upload>
                <el-input style="display:none"></el-input>
            </el-form-item>
            <el-form-item prop="credits" label="社会信誉">
                <file-upload v-model="formData.credits"></file-upload>
            </el-form-item>
            <el-form-item prop="fire" label="消防卫生">
                <file-upload v-model="formData.fire"></file-upload>
            </el-form-item>
            <el-form-item prop="finance" label="财务报表">
                <file-upload v-model="formData.finance"></file-upload>
            </el-form-item>
            <el-form-item prop="property" label="房产证明">
                <file-upload v-model="formData.property"></file-upload>
            </el-form-item>
            <el-form-item prop="introduction" label="单位概况">
                <el-input type="textarea" :autosize="{ minRows: 2 }" v-model="formData.introduction"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSave('FIRST_REVIEW_PENDING')" :loading="saving" type="success"
                    >提交申请信息</el-button
                >
                <el-button @click="onSave('SUBMIT_PENDING')" :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>
        </el-form>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'RateEdit1',
    created() {
        if (this.$route.query.rateId) {
            this.$http
                .get('rate/get/' + this.$route.query.rateId)
                .then(res => {
                    this.formData = res;
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
        if (this.$route.query.organId) {
            this.organizationId = Number(this.$route.query.organId);
        }
        if (typeof this.organization !== undefined) {
            this.formData = this.organization;
        }
    },
    data() {
        return {
            saving: false,
            formData: {
                examination: []
            },
            rules: {},
            statusOptions: [
                { label: '待提交', value: 'SUBMIT_PENDING' },
                { label: '初审中', value: 'FIRST_REVIEW_PENDING' },
                { label: '初审通过', value: 'FIRST_REVIEW_PASS' },
                { label: '专家通过', value: 'EXPERT_PASS' }
            ],
            inputVisible: false,
            // dynamicTags: [],
            inputValue: '',
            organizationId: ''
        };
    },
    computed: {
        ...mapState(['organization'])
    },
    methods: {
        onSave(status) {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit(status);
                } else {
                    return false;
                }
            });
        },
        submit(status) {
            let data = { ...this.formData };
            // data.userId = this.userInfo.id;
            // data.organizer = this.userInfo.nickname;
            data.status = status;
            console.log(status);
            data.organizationId = this.organizationId;
            this.saving = true;
            this.$http
                .post('/rate/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);
                });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/rate/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 || '删除失败');
                    }
                });
        },
        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 = '';
        }
    }
};
</script>
<style lang="less" scoped>
.el-tag + .el-tag {
    margin-left: 10px;
    // margin-bottom: 10px;
}
.el-tag-height {
    line-height: 30px;
    height: 32px !important;
    margin-bottom: 10px;
}
.button-new-tag {
    // margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 200px;
    // margin-left: 10px;
    vertical-align: bottom;
}
</style>
