<template>
    <div class="edit-view">
        <el-form
            :model="formData"
            :rules="rules"
            ref="form"
            label-width="80px"
            label-position="right"
            size="small"
            style="max-width: 600px;"
        >
            <!-- <el-form-item label-width="0">
                <el-button type="primary" size="small" @click="onAddOtherForm()">添加检查记录</el-button>
            </el-form-item> -->
            <el-timeline reverse>
                <el-timeline-item
                    v-for="(item, index) in checks"
                    :key="index"
                    placement="top"
                    size="normal"
                    :timestamp="item.createdAt"
                >
                    <el-card shadow="hover" :body-style="{ padding: '20px' }">
                        <div v-if="!item.del">
                            <el-form-item prop="content" label="检查情况">
                                <el-input :rows="5" type="textarea" v-model="item.content"></el-input>
                            </el-form-item>
                            <el-form-item prop="file" label="作证材料">
                                <!-- <file-upload v-model="item.file"></file-upload> -->
                                <multi-upload v-model="item.file"></multi-upload>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    class="del"
                                    type="danger"
                                    size="small"
                                    icon="el-icon-delete"
                                    @click="onDeleteOtherForm(item, index)"
                                ></el-button>
                            </el-form-item>
                        </div>
                    </el-card>

                    <!-- content -->
                </el-timeline-item>
            </el-timeline>

            <!-- <el-form-item prop="files" 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>
            </el-form-item> -->
            <el-form-item>
                <el-button type="success" size="small" @click="onAddOtherForm()">添加检查记录</el-button>
                <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'RecordCheckEdit',
    created() {
        if (this.$route.query.rid) {
            this.recordId = Number(this.$route.query.rid);
            this.$http
                .post(
                    'recordCheck/all',
                    {
                        size: 20,
                        sort: 'createdAt,asc',
                        query: { recordId: this.recordId }
                    },
                    { body: 'json' }
                )
                .then(res => {
                    if (res.content.length > 0) {
                        this.checks = res.content;
                    }
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
    },
    data() {
        return {
            saving: false,
            formData: {},
            rules: {},
            checks: [],
            recordId: ''
        };
    },
    computed: {
        saveOtherJson() {
            const checks = [...this.checks]
                .filter(item => {
                    return !!item.content || !!item.files;
                })
                .map(item => {
                    return {
                        ...item,
                        recordId: this.recordId
                    };
                });
            return JSON.stringify(checks);
        }
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            this.saving = true;
            this.$http
                .post('/recordCheck/batchSave', { checks: this.saveOtherJson })
                .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(`/recordCheck/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 || '删除失败');
                    }
                });
        },
        onAddOtherForm() {
            this.checks.push({
                content: '',
                files: ''
            });
        },
        onDeleteOtherForm(info, index) {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'warning' })
                .then(() => {
                    const checks = [...this.checks];
                    if (info.id) {
                        info.del = true;
                        checks[index] = info;
                    } else {
                        checks.splice(index, 1);
                    }
                    this.checks = checks;
                    this.$message.success('删除成功');
                })
                .catch(e => {});
        }
    }
};
</script>
<style lang="less" scoped>
.parameters1 {
    display: flex;
    align-items: center;
    margin-top: 23px;
}

.edit-view {
    padding: 0 0;
    background-color: transparent;
}
</style>
