<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-button type="primary" @click="handleSelect">选择指标</el-button>
    </el-col>
  </el-row>
  <metrics-list :listData="listData" :edit="true">
    <template #operation="scope">
      <el-button link type="primary" icon="Edit" @click="handleUpdateMetrics(scope.row)">保存</el-button>
      <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </metrics-list>
  <el-dialog title="选择指标" v-model="openDialog" :width="1000" append-to-body style="top:15vh">
    <metrics-list :listData="addMetricsList" :edit="false">
      <template #operation="scope">
        <el-button link type="primary" icon="Delete" @click="handleAddMetrics(scope.row)">添加</el-button>
      </template>
    </metrics-list>
  </el-dialog>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import metricsList from "./metricsList.vue"
const {proxy,emit} = getCurrentInstance()
const props = defineProps(['rowId'])
import {selectMetrics,addMetrics} from "@/api/obj/obj"
import {listMetrics,delMetrics,updateMetrics} from '@/api/obj/metrics'
const listData=ref([])
const openDialog=ref(false)
const addMetricsList=ref([])
onMounted(()=>{
  queryList()
})




const queryList=()=>{
  listMetrics({objId:props.rowId,tplId:-1}).then(res=>{
    listData.value = res.rows
  })
}

const handleAddMetrics = row =>{
  addMetrics(props.rowId,{metricsIds:row.metricsId}).then(()=>{
    handleSelect()
    queryList()
  })
}

const handleSelect=()=>{
  openDialog.value = true
  selectMetrics(props.rowId).then(res=>{
    addMetricsList.value = res.rows.map(p=>{
      return {
        ...p,
        metricsDef:p
      }
    })
  })
}

const handleDelete=(row:any)=>{
  if(row.objMetricsId){
    delMetrics(row.objMetricsId).then(res=>{
      proxy.$modal.msgSuccess(res.msg);
      queryList()
    })
  }
}

const handleUpdateMetrics=(row)=>{
  updateMetrics(row).then((res)=>{
    proxy.$modal.msgSuccess(res.msg);
  })
}

const submitForm=()=>{
  emit("nextStep", 1)
}

defineExpose({submitForm})

</script>
<style scoped lang="scss">
</style>
