<template>
    <div>
        <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
            <el-table-column label="项目信息" align="center" fixed width="500">
                <el-table-column label="区域公司" align="center" prop="deptName" width="100" />
                <el-table-column label="项目名称" align="center" prop="projectName" width="100">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="项目名称" width="200" trigger="hover"
                            :content="scope.row.projectName">
                            <span slot="reference">{{
            scope.row.projectName.length > 10
                ? scope.row.projectName.substring(0, 10) + "..."
                : scope.row.projectName
        }}</span>
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column label="所属城市" align="center" prop="city" width="100" />
                <el-table-column label="项目业态" align="center" prop="businessFormat" width="100" />
                <el-table-column label="项目类型" align="center" prop="type" width="100" />
            </el-table-column>

            <el-table-column label="项目风险清单" align="center">
                <el-table-column label="固有风险" align="center">
                    <el-table-column label="危险源名称" align="center" prop="inherentName" width="100" />
                    <el-table-column label="风险等级" align="center" prop="inherentLevel" width="100" />
                </el-table-column>
                <el-table-column label="现有风险" align="center">
                    <el-table-column label="危险源名称" align="center" prop="existingName" width="100" />
                    <el-table-column label="风险等级" align="center" prop="existingLevel" width="100" />
                </el-table-column>
                <el-table-column label="风险点位置" align="center" prop="presenceLocation" width="100" />
                <el-table-column label="可能导致的事故后果" align="center" prop="listType" width="100">

                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="项目名称" width="200" trigger="hover"
                            :content="scope.row.listType">
                            <span slot="reference">{{
            scope.row.listType.length > 10
                ? scope.row.listType.substring(0, 10) + "..."
                : scope.row.listType
        }}</span>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table-column>

            <el-table-column label="项目整体风险等级" align="center">
                <el-table-column label="固有风险" align="center" prop="inherentProjectLevel" width="100" />
                <el-table-column label="现状风险" align="center" prop="existingProjectLevel" width="100" />
            </el-table-column>

            <el-table-column label="风险管控" align="center">
                <el-table-column label="应采取的管控措施" align="center" prop="inherentMeasuresAdministration" width="100">

                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="应采取的管控措施" width="200" trigger="hover"
                            :content="scope.row.inherentMeasuresAdministration">
                            <span slot="reference">{{
            scope.row.inherentMeasuresAdministration &&
                scope.row.inherentMeasuresAdministration.length > 10
                ? scope.row.inherentMeasuresAdministration.substring(0, 10) +
                "..."
                : scope.row.inherentMeasuresAdministration
        }}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="已采取的管控措施" align="center" prop="existingMeasuresAdministration" width="100">

                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="已采取的管控措施" width="200" trigger="hover"
                            :content="scope.row.existingMeasuresAdministration">
                            <span slot="reference">{{
            scope.row.existingMeasuresAdministration &&
                scope.row.existingMeasuresAdministration.length > 10
                ? scope.row.existingMeasuresAdministration.substring(0, 10) +
                "..."
                                : scope.row.existingMeasuresAdministration
                                }}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="分级管控" align="center">
                    <el-table-column label="管控责任单位" align="center" prop="measuresDeptName" width="100" />
                    <el-table-column label="管控责任人" align="center" prop="measuresUserName" width="100" />
                    <el-table-column label="人员联系方式" align="center" prop="measuresUserPhone" width="100" />
                </el-table-column>
            </el-table-column>

            <el-table-column label="重大危险源管理" align="center">
                <el-table-column label="是否存在重大危险源" align="center" prop="majorHazardSource" width="100" />
                <el-table-column label="重大危险源名称" align="center" prop="hazardSourceName" width="100" />
                <el-table-column label="重大危险源描述" align="center" prop="majorHazardDescription" width="100" />
            </el-table-column>

            <el-table-column label="判定依据" align="center" prop="referenceBasis" width="100">

                <template slot-scope="scope">
                    {{ scope.row.referenceBasis === 'null' ? '' : scope.row.referenceBasis }}
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" prop="describe">

                <template slot-scope="scope">
                    <div>
                        <router-link :to="'/risk/plan/inherentdata/index/' + scope.row.id" class="link-type">
                            <el-button size="mini" type="text" icon="el-icon-view">详情</el-button>
                        </router-link>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-show="page.total > 0" :total="page.total" :current-page="page.pageNum"
            :page-size="page.pageSize" @current-change="changePage" />
    </div>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        },
        loading: {
            type: Boolean,
            default: false
        },
        page: {
            type: Object,
            default: () => {
                return {
                    total: 0,
                    pageNum: 1,
                    pageSize: 10
                }
            }
        },
    },
    data() {
        return {
            // 选中数组
            ids: [],
        }
    },
    methods: {
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        changePage(page) {
            this.$emit('changePage', page)
        }
    }
}
</script>

<style lang="scss" scoped></style>