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

const tableColOpts = [
  {
    label: '用户风险等级',
    key: 'CustomerRisk',
  },
  {
    label: '产品风险等级',
    key: 'ProductRisk',
  },
  {
    label: '创建人',
    key: 'Creator',
  },
  {
    label: '更新时间',
    key: 'UpdatedTime',
    sort: true
  },
]
const list = ref([])
const tableLoading = ref(false)
let sortType=''
async function getList() {
  tableLoading.value = true
  const res = await apiRiskLevelRelationShip.relationList({
    Sort:sortType
  })
  tableLoading.value = false
  list.value = res.Data.List || []
}
getList()

function handleTableSort(e) {
  const { order, prop } = e//order:"descending",prop: "RegisterTime"
  sortType=order === 'descending' ? 'desc' : 'asc'
  getList()
}



const showEditRelation = ref(false)
const editData = ref(null)
function handleEdit(e){
  editData.value=e
  showEditRelation.value=true
}


async function handleDel(e) {
  await ElMessageBox.confirm('删除后不可恢复，是否确认删除？', '提示', {
    type: 'warning',
  })
  const res = await apiRiskLevelRelationShip.relationDel({
    CustomerRisk: e.CustomerRisk
  })
  if (res.Ret !== 200) return
  ElMessage.success('删除成功');
  getList()
}
</script>

<template>
  <div>
    <el-button
      type="primary"
      @click="
        showEditRelation = true;
        editData = null;
      "
      >添加关联关系</el-button
    >
    <div class="list-wrap" style="margin-top: 20px">
      <el-table
        :data="list"
        border
        stripe
        element-loading-text="数据加载中..."
        v-loading="tableLoading"
        @sort-change="handleTableSort"
      >
        <el-table-column
          v-for="column in tableColOpts"
          :key="column.key"
          :prop="column.key"
          :label="column.label"
          :sortable="column.sort ? 'custom' : false"
        >
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <!-- <el-button type="danger" link @click="handleDel(row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <!-- 添加/编辑关联关系 -->
  <EditRelation 
    v-model:show="showEditRelation" 
    :editData="editData"
    @success="getList"
  />
</template>