<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1000">
    <div class= "pageTitle">
        {{  cardTitle}}
      </div>
    <a-card :bordered="false" style="height: 400px;width:100%">
      
      <a-row type="flex">
        <a-col :span="2"><span style="font-weight: bold;font-size: 16px;">场景编号:</span></a-col>
        <a-col :span="3"><span style="font-size:16px">{{ objData.riskEventNo }}</span></a-col>
        <a-col :span="2"><span style="font-weight: bold;font-size: 16px;">风险场景:</span></a-col>
        <a-col :span="5"><span style="font-size:16px">{{ objData.scenarioName }}</span></a-col>
        <a-col :span="2"><span style="font-weight: bold;font-size: 16px;">事件分类:</span></a-col>
        <a-col :span="10"><span style="font-size:16px">{{ objData.eventClassifyName }}</span></a-col>
      </a-row>
   
      <a-divider style="border-color: #7cb305" dashed />

      <a-list item-layout="vertical" :data-source="rowsData">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta>
              <template #title>
                <span style="font-weight: bold;font-size: 16px;">{{ item.label }}</span>
              </template>
            </a-list-item-meta>
            <span style="font-size: 15px;line-height:25px;">{{ item.val }}</span>
          </a-list-item>
        </template>
      </a-list>

      
      <a-divider v-if="objData.lableNameList" style="border-color: #7cb305" dashed />

      <Tag v-for="(lableName,i) in objData.lableNameList" :key="i" color="blue">
          <a @click="goPageRiskEventList(lableCodeList[i])"> <span style="font-size:14px;font-weight:400">{{lableName}}</span> </a>
        </Tag>
    </a-card>
  </BasicModal>
</template>

<script setup>

  import { Modal,Tag } from 'ant-design-vue';
  import { computed, ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useRouter} from 'vue-router';
  import {defHttp} from '/@/utils/http/axios';

    //const listUrl = '/compliane.item/stComplianePunish/list';
    const title = ref("详细信息")
    const cardTitle = ref("")
    const rowsData = ref([])
    const objData = ref({})

    const router = useRouter()
    const lableCodeList = ref([])
    //表单赋值
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        if(data.record.lableList){
          lableCodeList.value =  data.record.lableList.split(",");
        }
        setModalProps({ showCancelBtn:false,showOkBtn:false });
        if(data.record) {
          objData.value =  data.record
          
          rowsData.value= [];
          cardTitle.value = data.record.riskEventName;
          let strDes = data.record.riskEventDesc;
          let pp = strDes.indexOf("分析:");
            pp=pp==-1?strDes.indexOf("分析："):pp;
          let des1 = strDes;
          let des2 = "";
          if(pp>-1) {
            des1 =  strDes.substring(0,pp)
            des2 =strDes.substring(pp+3); 
          }
          if(des1.substring(2,3)==":"||des1.substring(2,3)=="：") {
            des1 = des1.substring(3);
          }

          rowsData.value.push({"label":"风险事件","val":data.record.riskEventName});
          rowsData.value.push({"label":"事件描述","val":des1});
          if(des2&&des2.length>0) {
            rowsData.value.push({"label":"事件分析","val":des2});
          }
        }
    });


    function goPageRiskEventList(lableCode) {
      closeModal()
      router.push({path: '/standardlib/risk/StRiskEventList',query:{lableCode:lableCode}})
    }

</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}


table {
  border-collapse: collapse;
  width:100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
}
.title {
 font-size:17px;
 font-weight: bold;
}
.pageTitle {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  font-weight: bold;
  font-size: 20px;
  height:30px;
}

.ant-list-vertical .ant-list-item-meta {
    margin-bottom: 1px;
}


</style>





