<template>
    <div class="detail" v-loading="loading">
        <KVTable title="基本信息" :list="basicInfo" :rightButton="rightButton"/>
        <form-option title="消防信息" style="margin-top: 10px;">
            <div class="node" v-for="node in nodes" :key="node.id">
                <div class="header">
                    <div class="node-name">{{ node.node_name }}</div>
                    <el-tooltip class="item" effect="dark" :content="node.detail" placement="top">
                        <div class="node-detail">{{ node.detail }}</div>
                    </el-tooltip>
                </div>
                <el-table
                        :data="node.items"
                        border>
                    <el-table-column type="index" align="center" label="序号" width="80"/>
                    <el-table-column prop="enforce_class" show-overflow-tooltip label="检查类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.handbook">
                                {{ scope.row.handbook.enforce_class }}
                            </span>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="enforce_item" show-overflow-tooltip label="检查项">
                        <template slot-scope="scope">
                            <span v-if="scope.row.handbook">
                                {{ scope.row.handbook.fullName }}
                            </span>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="enforce_method" label="检查流程及方法" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.handbook">
                                {{ scope.row.handbook.enforce_method }}
                            </span>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="approve_count" label="赞" show-overflow-tooltip/>
                    <el-table-column prop="criticism_count" label="踩" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.criticism_count }}
                            <el-button v-if="scope.row.criticism_count&&scope.row.criticism_count>0" type="text"
                                       size="small"
                                       @click="showCaiPage(scope.row)">
                                查看
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="action" label="操作" align="center" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="handleDetail(scope.row.item_id)">查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </form-option>
        <el-dialog title="点踩列表" :visible.sync="dcVisible" v-if="dcVisible">
            <dian-cai-table :template_item="template_item"></dian-cai-table>
        </el-dialog>
    </div>
</template>

<script>
    import FormOption from '@/component/FormOption'
    import KVTable from '@/component/KVTable'
    import DianCaiTable from './component/DianCaiTable'
    import {getCheckItem} from '@/api/check'
    import {resourceMixin} from '@/mixin/resource'
    import { getPlaceTypes } from '@/api/resource'
import { notEmpty } from '@/utils/tool';

    export default {
        components: {
            FormOption,
            KVTable,
            DianCaiTable
        },
        mixins: [resourceMixin],
        computed: {
            checkId() {
                return this.$route.query.id
            },
            fromResource() {
                return this.$route.query.fromResource == 1
            }
        },
        data() {
            return {
                loading: false,
                rightButton: {
                    needClose: this.fromResource 
                },
                checkInfo: null,
                basicInfo: [],
                nodes: [],
                dcVisible: false,
                template_item: null,
                placeType: [],
            }
        },
        mounted() {
            if (this.fromResource) {
                this.rightButton.needClose = true;
            }
            this.getCheckDetail()
        },
        methods: {
            showCaiPage(data) {
                this.template_item = data;
                this.dcVisible = true;
            },
            async getCheckDetail() {
                if (this.checkId) {
                    const list = await getPlaceTypes();
                    if (list && list.length > 0) {
                        this.placeType = list;
                    }
                    getCheckItem(this.checkId).then(res => {
                        if (res) {
                            this.generateBasicInfo(res)
                            if (res.nodes) {
                                res.nodes.map(node => {
                                    if (node.items && node.items.length > 0) {
                                        const items = []
                                        node.items.map(item => {
                                            const obj = Object.assign({}, item)
                                            if (item.handbook) {
                                                item.handbook.fullName = '';
                                                if (notEmpty(item.handbook.full_name) && notEmpty(item.handbook.enforce_class)) {
                                                    item.handbook.fullName = item.handbook.full_name.replace(item.handbook.enforce_class+'---', '');
                                                }
                                                obj.enforce_class = item.handbook.enforce_class
                                                obj.enforce_item = item.handbook.enforce_item
                                                obj.enforce_method = item.handbook.enforce_method
                                                obj.handbook_id = item.handbook.id;
                                            }
                                            if (item.item_type === '1' && item.item_content) {
                                                obj.enforce_class = '其它'
                                                obj.enforce_item = item.item_content
                                            }
                                            items.push(obj)
                                        })
                                        items.sort((a, b) => a['sort'] > b['sort'] ? 1 : -1);
                                        node.items = items
                                    }
                                })
                                res.nodes.sort((a, b) => a['sort'] > b['sort'] ? 1 : -1);
                            }
                            this.nodes = res.nodes || []
                        }
                    })
                }
            },
            generateBasicInfo(res) {
                this.basicInfo = [
                    {
                        label: '模板名称：',
                        value: res.template_name
                    },
                    {
                        label: '单位规模：',
                        value: this.parseUnitSize(res.enforce_obj_type) || '-'
                    },
                    {
                        label: '场所类型：',
                        value: this.parsePlaceType(res.place_type) || '-'
                    },
                    {
                        label: '所在建筑：',
                        value: this.parseArchitectureType(res.architecture_type) || '-'
                    },
                    {
                        label: '建筑安全：',
                        value: res.hole_responsibility === 1 ? '负责整栋建筑消防安全' : '负责部分建筑消防安全'
                    },
                    {
                        label: '状态：',
                        value: res.usage_status == 1 ? '启用' : '停用'
                    },
                ]
            },
            handleDetail(hanbook_id) {
                this.$router.push({
                    path: '/monitor/template/detail',
                    query: {
                        "id": hanbook_id
                    }
                })
            }
        },
        showCaiPage(data) {

        },
    }
</script>

<style lang="scss" scoped>
    .node {
        padding-bottom: 20px;

        .header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .node-name {
                font-size: 16px;
                color: #343435;
                font-weight: bold;
            }

            .node-detail {
                margin-left: 15px;
                font-size: 13px;
                color: #888888;
                max-width: 600px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
</style>