<template>
    <el-drawer title="检查记录" :visible.sync="drawer" size="40%" :with-header="false" @close="lists = []">
        <div v-if="lists.length <= 0" style="padding:100px 0; font-size: 14px; color: #4a4646">
            <div style="text-align:center">暂无数据</div>
        </div>
        <div style="margin: 30px" v-else>
            <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">
                    <!-- {{ item.value ? '是' : '否' }} -->
                    <el-radio-group v-model="item.value" disabled>
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </div>

                <div style="margin-top:5px">
                    <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>
            </el-timeline-item>
            <el-timeline reverse>
                <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">
                        {{ item.content }}
                    </div>
                    <div style="margin-top:5px">
                        <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>
                </el-timeline-item>
            </el-timeline>
            <div>
                <el-button @click="saveRow(recordId)" size="mini" plain>编辑</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script>
export default {
    props: ['drawer'],
    created() {},
    data() {
        return {
            lists: [],
            checkMap: new Map(),
            tipsType: {
                examOrganization: '是否履行考前备案手续（此项为否，不再检查下面内容）',
                examSite: '是否在考场明显位置张贴《考级简章》',
                examRoom: '考场服务设施是否完善（候考室、指示标记、安全设施等）',
                environment: '考级时间与网上平台考前备案的考级时间是否一致',
                safetyq: '考场内有无相关专业考官且佩戴考官证',
                safetyw: '是否现场对考生艺术水平作出评定（美术专业除外）',
                safetye: '考级内容是否是所属考级机构教材确定的考级内容',
                safetyr: '是否在考场明显位置张贴《恢复开展社会艺术水平考级现场考级活动疫情防控措施指南》海报',
                safetyt: '考点是否配备测量体温设施设备，并有专人值守',
                safetys: '考级现场是否实施预约限流措施'
            },
            recordId: ''
        };
    },
    methods: {
        closeDialog() {
            this.$emit('close');
        },
        init(id) {
            if (id) {
                this.recordId = id;
                let checks = new Map([...this.checkMap]);
                if (checks.has(id)) {
                    return;
                }
                this.$http
                    .post(
                        'recordCheck/all',
                        {
                            size: 20,
                            sort: 'createdAt,asc',
                            query: { recordId: id }
                        },
                        { body: 'json' }
                    )
                    .then(res => {
                        if (!res.empty) {
                            checks.set(id, res.content);
                        } else {
                            return Promise.reject();
                        }
                    })
                    .catch(e => {
                        checks.set(id, []);
                    })
                    .then(() => {
                        this.checkMap = new Map(checks);
                    });
                this.$http
                    .post(
                        'recordExpertAudit/all',
                        {
                            size: 20,
                            query: {
                                recordId: id
                            }
                        },
                        { body: 'json' }
                    )
                    .then(res => {
                        console.log(res);
                        this.lists = res.content;
                        // this.empty = res.empty;
                    });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.edit-view {
    background-color: transparent;
}
.date-width {
    width: 100%;
}
.info-content {
    // padding: 39px 25px 25px;
    // margin: 5px auto;
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    height: 50px;
    line-height: 50px;
    z-index: 999;
    margin-left: -40px;
    padding-left: 20px;
}
/deep/ .address {
    display: flex;
    width: 100%;
    .el-form-item__content {
        flex-grow: 1;
    }
}
/deep/ .el-divider__text,
.el-link {
    font-size: 12px;
}
.el-card + .el-card {
    margin-top: 30px;
}
/deep/ .el-card__body {
    position: relative;
}
.el-card {
    overflow: visible;
}
.more {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    padding: 9px 9px;
}
/deep/.el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
    color: #606266;
}
</style>
