<template>
    <el-drawer
        title="检查记录"
        :visible.sync="drawerVisible"
        size="50%"
        :with-header="false"
        @close="closeDrawer"
        destroy-on-close
    >
        <div v-if="lists.length == 0 && checkMap.get(recordId).length == 0">
            <div style="text-align:center;padding:100px 0; font-size: 14px; color: #4a4646" v-if="!edit">暂无数据</div>
        </div>
        <div style="margin: 30px">
            <el-timeline v-if="lists.length > 0">
                <el-timeline-item :timestamp="item.createdAt" placement="top" v-for="item in lists" :key="item.id">
                    <div style="font-size: 14px; color: #4a4646">
                        {{ tipsType[item.type] }}
                    </div>
                    <div style="margin-top:5px">
                        <el-radio-group v-model="item.value" :disabled="!edit">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </div>

                    <div style="margin-top:5px">
                        <div v-if="!edit">
                            <el-image
                                v-for="(img, index) in item.img"
                                :key="index"
                                :src="img"
                                style="width:60px;height:60px;margin-right:3px"
                                :preview-src-list="item.img"
                            >
                            </el-image>
                        </div>
                        <multi-upload-regu v-model="item.img" v-else></multi-upload-regu>
                    </div>
                </el-timeline-item>
            </el-timeline>
            <el-timeline v-else-if="edit">
                <el-timeline-item
                    :timestamp="tipsType[index]"
                    placement="top"
                    v-for="(item, index) in tipsType"
                    :key="item.id"
                >
                    <div style="margin-top:5px">
                        <el-radio-group v-model="item.value">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </div>

                    <div style="margin-top:5px">
                        <multi-upload-regu v-model="item.img"></multi-upload-regu>
                    </div>
                </el-timeline-item>
            </el-timeline>

            <el-timeline reverse v-if="checkMap.get(recordId).length > 0">
                <el-timeline-item
                    :timestamp="item.createdAt"
                    placement="top"
                    v-for="item in checkMap.get(recordId)"
                    :key="item.id"
                >
                    <div style="font-size: 14px; color: #4a4646" v-if="!edit">
                        {{ item.content }}
                    </div>
                    <el-input v-else type="textarea" :rows="2" v-model="item.content"></el-input>
                    <div style="margin-top:5px">
                        <div v-if="!edit">
                            <el-image
                                v-for="(img, index) in item.file"
                                :key="index"
                                :src="img"
                                fit="fill"
                                :lazy="true"
                                style="width:60px;height:60px;margin-right:3px"
                                :preview-src-list="item.file"
                            >
                            </el-image>
                        </div>
                        <multi-upload-regu v-model="item.img" v-else></multi-upload-regu>
                    </div>
                </el-timeline-item>
            </el-timeline>

            <div>
                <el-button @click="edit = true" size="mini" plain v-if="!edit">编辑</el-button>
                <el-button @click="saveRow(recordId)" type="success" size="mini" plain v-if="edit" :saving="saving"
                    >保存</el-button
                >
                <el-button @click="edit = false" size="mini" plain v-if="edit">取消</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script>
import MultiUploadRegu from './MultiUploadRegu.vue';
export default {
    components: { MultiUploadRegu },
    props: ['drawerVisible'],
    data() {
        return {
            lists: [],
            checkMap: new Map(),
            tipsType: {
                examOrganization: '是否履行考前备案手续（此项为否，不再检查下面内容）',
                examSite: '是否在考场明显位置张贴《考级简章》',
                examRoom: '考场服务设施是否完善（候考室、指示标记、安全设施等）',
                environment: '考级时间与网上平台考前备案的考级时间是否一致',
                safetyq: '考场内有无相关专业考官且佩戴考官证',
                safetyw: '是否现场对考生艺术水平作出评定（美术专业除外）',
                safetye: '考级内容是否是所属考级机构教材确定的考级内容',
                safetyr: '是否在考场明显位置张贴《恢复开展社会艺术水平考级现场考级活动疫情防控措施指南》海报',
                safetyt: '考点是否配备测量体温设施设备，并有专人值守',
                safetys: '考级现场是否实施预约限流措施'
            },
            recordId: '',
            edit: false,
            saving: false
        };
    },
    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: {
        closeDialog() {
            this.$emit('closeDrawer');
        },
        init(row) {
            this.recordId = row;
            this.expand(row);
        },
        expand(row) {
            let checks = new Map([...this.checkMap]);
            // if (checks.has(row)) {
            //     return;
            // }
            this.$http
                .post(
                    'recordCheck/all',
                    {
                        size: 20,
                        sort: 'createdAt,asc',
                        query: { recordId: row }
                    },
                    { body: 'json' }
                )
                .then(res => {
                    if (!res.empty) {
                        checks.set(row, res.content);
                    } else {
                        return Promise.reject();
                    }
                })
                .catch(e => {
                    checks.set(row, []);
                })
                .then(() => {
                    this.checkMap = new Map(checks);
                });
            this.$http
                .post(
                    'recordExpertAudit/all',
                    {
                        size: 100,
                        query: {
                            recordId: row
                        }
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.lists = res.content;
                });
        },
        closeDrawer() {
            this.lists = [];
            this.edit = false;
            this.$parent.drawer = false;
        },
        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.edit = false;
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        }
    }
};
</script>
<style lang="less" scoped>
.width {
    width: 350px;
}
/deep/.el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
    color: #606266;
}
/deep/.el-timeline-item__timestamp {
    // color: #0561d9;
    color: #201e1e;
    line-height: 1;
    font-size: 14px;
}
/deep/.el-timeline-item__node {
    background-color: #5b9bed;
    // background-color: #9d9a9a;
}
/deep/.el-timeline-item__tail {
    // border-left: 2px solid #7cace9;
    border-left: 2px solid #9d9a9a;
}
/deep/.el-radio__input.is-disabled + span.el-radio__label {
    color: #606266; // #409EFF;
}
</style>
