<script setup>
import { apiRiskLevelProduct } from '@/api/riskLevel'
import SetRisk from './components/SetRisk.vue'

const list = ref(null)
function getList() {
  apiRiskLevelProduct.permissionList().then(res => {
    if (res.Ret === 200) {
      list.value = res.Data.List || []
    }
  })
}
getList()

const showSetRisk=ref(false)
const editData=ref(null)
function handleShowSetRisk(e){
  editData.value={
    ...e.data,
    parentLabel:`${e.parent.data.name}/${e.data.name}`
  }
  showSetRisk.value=true
}
</script>

<template>
  <el-tree class="permission-list" :data="list">
    <template #default="{ node, data }">
      <span class="permission-list-item">
        <span>{{ data.name }}</span>
        <el-tag type="warning" v-if="data.riskLevel&&node.level>1" style="margin-left:10px">{{data.riskLevel}}</el-tag>
        <el-button type="primary" link style="float:right" v-if="node.level>1" @click="handleShowSetRisk(node)">设置风险等级</el-button>
      </span>
    </template>
  </el-tree>

  <!-- 设置风险等级 -->
  <SetRisk 
    v-model:show="showSetRisk" 
    :editData="editData"
    @success="getList"
  />
</template>

<style lang="scss" scoped>
.permission-list{
  padding: 20px;
  :deep(.el-tree-node__content){
    width: 100%;
    height: fit-content;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c8cdd9;
  }
  .permission-list-item{
    flex: 1;
  }
}
</style>