<template>
    <el-dialog
        v-loading="saving"
        @close="closeDialog"
        title="备案管理信息"
        center
        :visible.sync="dialogVisible"
        width="800px"
    >
        <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="2" 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-collapse-transition>
                    <div v-show="showMore">
                        <el-timeline reverse>
                            <el-timeline-item
                                v-for="(item, index) in lists"
                                :key="index"
                                placement="top"
                                size="normal"
                                :timestamp="item.createdAt"
                            >
                                <el-card shadow="hover" :body-style="{ padding: '20px' }">
                                    <div v-if="!item.del">
                                        <div style="margin-left:10px">
                                            <div>
                                                {{ tipsType[item.type] }}
                                            </div>
                                            <template>
                                                <div style="margin:10px 0">
                                                    <el-radio v-model="item.value" :label="true">是</el-radio>
                                                    <el-radio v-model="item.value" :label="false">否</el-radio>
                                                </div>
                                            </template>
                                        </div>
                                        <el-form-item prop="file" label="作证材料">
                                            <!-- <file-upload v-model="item.file"></file-upload> -->
                                            <multi-upload v-model="item.img"></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>
                    </div>
                </el-collapse-transition>
                <div style="width:800px;textAlign:center">
                    <el-button
                        class="more"
                        round
                        type="primary"
                        :plain="!showMore"
                        :icon="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                        @click="showMore = !showMore"
                    ></el-button>
                </div>

                <!-- <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="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: 'RecordCheckEdit',
    created() {},
    props: ['dialogVisible'],
    data() {
        return {
            saving: false,
            showMore: false,
            formData: {},
            rules: {},
            checks: [],
            tipsType: {
                examOrganization: '是否履行考前备案手续（此项为否，不再检查下面内容）',
                examSite: '是否在考场明显位置张贴《考级简章》',
                examRoom: '考场服务设施是否完善（候考室、指示标记、安全设施等）',
                environment: '考级时间与网上平台考前备案的考级时间是否一致',
                safetyq: '考场内有无相关专业考官且佩戴考官证',
                safetyw: '是否现场对考生艺术水平作出评定（美术专业除外）',
                safetye: '考级内容是否是所属考级机构教材确定的考级内容',
                safetyr: '是否在考场明显位置张贴《恢复开展社会艺术水平考级现场考级活动疫情防控措施指南》海报',
                safetyt: '考点是否配备测量体温设施设备，并有专人值守',
                safetys: '考级现场是否实施预约限流措施'
            },
            lists: [],
            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);
        },
        dataCon() {
            return this.lists.map(item => {
                return {
                    recordId: this.recordId,
                    type: item.type,
                    value: item.value,
                    img: item.img
                };
            });
        }
    },
    methods: {
        init(id) {
            console.log(id);
            if (id) {
                this.recordId = Number(id);
                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);
                    });
                this.$http
                    .post(
                        'recordExpertAudit/all',
                        {
                            query: {
                                recordId: id
                            }
                        },
                        { body: 'json' }
                    )
                    .then(res => {
                        console.log(res);
                        this.lists = res.content;
                        // this.empty = res.empty;
                    });
            }
        },
        closeDialog() {
            this.$emit('close');
        },
        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('成功');
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
            this.$http
                .post('/recordExpertAudit/batchSave', this.dataCon, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    // this.$router.go(-1);
                    this.dialogVisible = false;
                })
                .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>
