<template>
  <el-row :gutter="20">
    <el-col :span="12"> 接口配置已完成: {{ scheduleData.complete }}/{{ scheduleData.total }} </el-col>
  </el-row>
  <metrics-list :listData="listData" :edit="false">
    <template #operation="scope">
      <el-button link
                 :type="!scope.row.dataExp ? 'primary' : 'success'"
                 :icon="!scope.row.dataExp ? 'Edit' : 'CircleCheck'"
                 @click="handleConfigMetrics(scope.row)">
        {{!scope.row.dataExp?'未配置' : '已配置'}}
      </el-button>
    </template>
  </metrics-list>
  <el-dialog title="选择指标" v-model="openDialog" :width="1000" append-to-body style="top:15vh">
    <metrics-config :metrics="metricsRow"  @cancel="openDialog=false" @success="initData"/>
  </el-dialog>
</template>
<script setup lang="ts">
import {scheduleObj} from "@/api/obj/obj"
import {onMounted, ref} from "vue";
import metricsList from "./metricsList.vue"
import metricsConfig from  "./metricsConfig.vue"
const {proxy,emit} = getCurrentInstance()
const props = defineProps(['rowId'])
import {listMetrics} from '@/api/obj/metrics'
const listData=ref([])
const openDialog=ref(false)
const metricsRow=ref({})
const scheduleData=ref({})
onMounted(()=>{
  initData()
})

const initData=()=>{
  openDialog.value = false
  queryList()
  getScheduleTotal()
}

const getScheduleTotal=()=>{
  scheduleObj(props.rowId).then(res=>{
    scheduleData.value = res.data
  })
}

const handleConfigMetrics=(row)=>{
  metricsRow.value = {...row}
  openDialog.value = true
}

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

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

defineExpose({submitForm})

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