<template>
    <div class="book">
        <el-container v-for="(value, key) in mapList" :key="key">
            <el-aside width="200px">{{key}}</el-aside>
            <el-main>
                <el-form class="demo-form-inline">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item v-for="(item, index) in value" :key="index" :data="item"
                                          :label="item.enforce_content"
                                          style="margin-bottom: 0px;"
                            >
                                <el-row>
                                    <el-radio v-model="itemMap[item.id+'_'].check_options"
                                              v-for="(option,index) in selectOptions(item.result_options)"
                                              :key="index" :data="option"
                                              :label="option"
                                              />
                                </el-row>
                                <el-row >
                                    <el-image :span="6" v-for="(file, index) in itemMap[item.id+'_'].records"
                                              :key="index"
                                              style="width: 100px; height: 100px;float: left;margin-left: 20px"
                                              :src="'/v2/api/file/'+file.pictures+'/open'"
                                              v-show="file.pictures!=''"
                                    >
                                    </el-image>

                                </el-row>

                            </el-form-item>

                        </el-col>
                    </el-row>
                </el-form>
            </el-main>
        </el-container>
        <el-row v-show="false" v-for="(item, index) in list" :key="index" :data="item">
            <el-col :span="5">
                {{item.id}}
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {getHandbookList} from '@/api/book'
    import {bookMixin} from '@/mixin/book'
    import {openPng} from '@/api/file'

    export default {
        name: 'CheckDetail',
        mixins: [bookMixin],
        props: {
            itemMap: {
                type: Object
            }
        },
        data() {
            return {
                params: {
                    sort:null,
                    query: null,
                    page: 1,
                    size: 100
                },
                loading: false,
                itemKeyData: {},
                total: 0,
                list: [],
                mapList: {}
            }
        },
        mounted() {
            this.getBooks()
        },
        methods: {
            openPngNow(id) {
                return openPng(id)
            },
            //查询检查项
            getBooks() {
                this.loading = true
                this.loading = true
                if (!this.params.query) {
                    this.params.query = "enforce_type=='1'"
                } else {
                    this.params.query = this.params.query + ";enforce_type=='1'"
                }
                this.params.sort = 'sort asc'
                getHandbookList(this.params).then(res => {
                    if (res && res.data) {
                        this.total = res.total
                        this.list = res.data
                        this.listToMap();
                    }
                    this.loading = false
                })
            },
            //转换为map
            listToMap() {
                let list = this.list;
                let mapList = this.mapList;
                list.forEach(item => {
                    let enforce_class = item.enforce_class;
                    let key = item.id + '_';
                    this.itemKeyData[key] = '';
                    let classList = mapList[enforce_class];
                    if (classList) {
                        classList.push(item);
                    } else {
                        classList = new Array();
                        classList.push(item);
                        mapList[enforce_class] = classList;
                    }
                })
                // debugger;
            },
            //生成多个候选项
            selectOptions(data) {
                let list = data.split(',');
                return list;
            },
        }
    }
</script>

<style lang="scss" scoped>


    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        /*line-height: 60px;*/
    }

    .el-aside {
        background-color: #f5f5f5;
        color: #333;
        border: 1px solid #000000;
        text-align: center;
        align-items:center;
        justify-content: center;
        display: flex;
        /*line-height: 200px;*/
    }

    .el-main {
        /*background-color: #E9EEF3;*/
        color: #333;
        border: 1px solid #000000;
        text-align: left;
        /*line-height: 100px;*/
        padding-top: 10px;
    }
</style>