<template>
    <BasicDrawer placement="bottom" @register="registerDrawer" v-bind="$attrs" :title="problemItem" width="80%" height="100%"> 
    <PageWrapper  contentFullHeight="true" contentClass="flex" style="height:100%;">
        <div style="background-color: #ececec; padding: 20px;height:100%;">
            <a-row :gutter="[16,16]">
            <a-col :span="14">
                <a-row :gutter="[16,16]">
                    <a-col :span="24">
                        <a-card title="问题详情" :bordered="true">
                            <template #extra>
                                <a-dropdown>
                                    <a class="ant-dropdown-link" @click.prevent>
                                        <MoreOutlined/>
                                    </a>
                                    <template #overlay>
                                    <a-menu>
                                        <a-menu-item>
                                        <a href="javascript:;">刷新</a>
                                        </a-menu-item>
                                        <a-menu-item>
                                        <a href="javascript:;">编辑</a>
                                        </a-menu-item>
                                        <a-menu-item>
                                        <a href="javascript:;">隐藏</a>
                                        </a-menu-item>
                                    </a-menu>
                                    </template>
                                </a-dropdown>

                            </template>
                            <p>card content</p>
                        </a-card>
                    </a-col>
                    <a-col :span="24">
                        <a-card title="相关风险事件" :bordered="true">
                        <template #extra>
                            <a-dropdown>
                                <a class="ant-dropdown-link" @click.prevent>
                                    <MoreOutlined/>
                                </a>
                                <template #overlay>
                                <a-menu>
                                    <a-menu-item>
                                    <a href="javascript:;">刷新</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                    <a href="javascript:;">编辑</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                    <a href="javascript:;">隐藏</a>
                                    </a-menu-item>
                                </a-menu>
                                </template>
                            </a-dropdown>

                        </template>
                        <p>card content</p>
                        </a-card>
                    </a-col>
                    <a-col :span="24">
                        <a-card title="内控策略" :bordered="true">
                        <template #extra>
                            <a-dropdown>
                                <a class="ant-dropdown-link" @click.prevent>
                                    <MoreOutlined/>
                                </a>
                                <template #overlay>
                                <a-menu>
                                    <a-menu-item>
                                    <a href="javascript:;">刷新</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                    <a href="javascript:;">编辑</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                    <a href="javascript:;">隐藏</a>
                                    </a-menu-item>
                                </a-menu>
                                </template>
                            </a-dropdown>

                        </template>
                        <p>card content</p>
                        </a-card>
                    </a-col>
                    <a-col :span="24">
                        <a-card title="处理方法（控制活动）" :bordered="true">
                        <template #extra>
                            <a-dropdown>
                                <a class="ant-dropdown-link" @click.prevent>
                                    <MoreOutlined/>
                                </a>
                                <template #overlay>
                                <a-menu>
                                    <a-menu-item>
                                    <a href="javascript:;">刷新</a>
                                    </a-menu-item>

                                    <a-menu-item>
                                    <a href="javascript:;">编辑</a>
                                    </a-menu-item>

                                    <a-divider style="height: 0px; background-color: #7cb305"/>

                                    <a-menu-item>
                                    <a href="javascript:;">隐藏</a>
                                    </a-menu-item> 
                            
                                </a-menu>
                                </template>
                            </a-dropdown>
                        </template>
                      
                        <p>card content</p>
                        </a-card>
                    </a-col>
                </a-row>
            </a-col>
        
            <a-col :span="10">
                <a-row :gutter="[16,16]">
                    <a-col :span="24">
                        <a-card title="风险事件案例" :bordered="false">
                            <a-collapse v-model:activeKey="activeKey" @change="changeActivekey">
                                <a-collapse-panel key="1" header="This is panel header 1">
                                <a-collapse default-active-key="4">
                                    <p>s fds saf dsaf asf asf as as a fdsa fadsf as s as </p>
                                </a-collapse>
                                </a-collapse-panel>
                                <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
                                    <p>s fds saf dsaf asf asf as as as as </p>
                                </a-collapse-panel>
                                <a-collapse-panel key="3" header="This is panel header 3">
                                    <p>s fds saf dsaf asf asf as as as as </p>
                                </a-collapse-panel>
                            </a-collapse>
                        </a-card>
                     </a-col>
                     <a-col :span="24">
                        <a-card title="监管处罚案例" :bordered="false">
                            <div style="height:100%">card content</div>
                        </a-card>
                    </a-col>
                    <a-col :span="24">
                        <a-card title="行业实践案例" :bordered="false">
                            <div style="height:100%">card content</div>
                        </a-card>
                     </a-col>
                     <a-col :span="24">
                        <a-card title="行业标准" :bordered="false">
                            <div style="height:100%">card content</div>
                        </a-card>
                    </a-col>
                </a-row>
            </a-col>

            </a-row>
        </div>
    </PageWrapper>    
    </BasicDrawer>
  </template>
  <script lang="ts" setup>
    import {ref} from 'vue';
    import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
    import { MoreOutlined} from '@ant-design/icons-vue';
   
    const problemItem = ref("")
    const [registerDrawer] = useDrawerInner(async (data) => {
        let record =data.record
        problemItem.value = record.problemItem    
      
    });
   

  </script>