<template>
  <el-button type="primary" size="small" @click="addIndex" style="margin-top:-30px;">新增指标</el-button>
  <el-table :data="configData" border stripe style="width: 100%;margin-top:5px;" size="small">
    <el-table-column label="显示名称">
      <template #default="scope">
        {{ scope.row.viewName }}
      </template>
    </el-table-column>
    <el-table-column label="指标映射" prop="metricsName">
      <!--      <template #default="scope">-->
      <!--        <el-select v-model="scope.row.metricsName" size="small" style="width: 100%" @change="changeMetrics(scope.row)">-->
      <!--          <el-option v-for="item in mappingData" :key="item.id" :label="item.metricsName" :value="item.metricsName"/>-->
      <!--        </el-select>-->
      <!--      </template>-->
    </el-table-column>
    <el-table-column label="操作" width="120" align="center">
      <template #default="{row}">
        <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
        <el-popconfirm title="确认要删除该条信息吗?" @confirm="handleDelete(row)" width="200">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="visible" title="新增指标" width="400" append-to-body>
    <el-form ref="objRef" :model="form" :rules="rules" label-width="100px" label-suffix=":" size="small">
      <el-form-item label="显示名称" prop="viewName">
        <el-input v-model="form.viewName" placeholder="请输入显示名称"/>
      </el-form-item>
      <el-form-item label="指标映射" prop="metricsName">
        <el-select v-model="form.metricsName" style="width: 100%" filterable>
          <el-option v-for="item in mappingData" :key="item.id" :label="item.metricsName" :value="item.metricsName"/>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="btn-row">
      <el-button type="primary" @click="handleSubmit" size="small">确定</el-button>
      <el-button @click="visible=false" size="small">取消</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import {listMs} from "@/api/risk/r5"
import {addConfig, delConfig, updateConfig} from "@/api/risk/config"
import {ref} from "vue";

const {proxy} = getCurrentInstance()
const props = defineProps(['configData'])
const mappingData = ref([])
const visible = ref(false)
const hcIds = ref(null)
const query = ref({
  pageNum: 1,
  pageSize: 2
})

const defaultForm = {
  viewName: '',
  metricsId: '',
  metricsName: ''
}
const rules = {
  viewName: [
    {required: true, message: '请输入显示名称', trigger: 'blur'}
  ],
  metricsName: [
    {required: true, message: '请选择指标映射', trigger: 'change'}
  ]
}

const form = ref({
  ...defaultForm
})

onMounted(async () => {
  const res = await listMs()
  mappingData.value = res.data
})

function addIndex() {
  visible.value = true
  hcIds.value = null;
  form.value = {...defaultForm}
  proxy.resetForm("objRef");
}

async function changeMetrics(row) {
  const data = {...row, configType: "network", hcId: hcIds.value}
  data.metricsId = mappingData.value.find(item => item.metricsName === row.metricsName).metricsId
  const res = await updateConfig(data)
  handleSuccess(res)
}

function handleEdit(row) {
  const {viewName, metricsId, metricsName, hcId} = row
  hcIds.value = hcId;
  form.value = {viewName, metricsId, metricsName}
  visible.value = true
}

async function handleDelete(row) {
  const res = await delConfig(row.hcId)
  handleSuccess(res)
}

function handleSuccess(res) {
  proxy.$message.success(res.msg)
  visible.value = false
  proxy.$emit('refresh')
}

function handleSubmit() {
  proxy.$refs.objRef.validate(async valid => {
    if (valid) {
      if (hcIds.value != null) {
        return changeMetrics(form.value)
      }
      const data = {...form.value, configType: "network"}
      data.metricsId = mappingData.value.find(item => item.metricsName === form.value.metricsName).metricsId
      const res = await addConfig(data)
      handleSuccess(res)
    }
  })
}
</script>
<style lang="scss" scoped>
.btn-row {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>
