<template>
  <el-button type="primary" @click="handleSelectTpl">选择模板</el-button>
  <el-table :data="tplList" border style="margin-top:10px">
    <el-table-column label="模板ID" align="center" prop="tplId" width="80"/>
    <el-table-column label="模板名称" align="left" prop="tplName"/>
    <el-table-column label="指标数量" align="left" prop="num" width="200"/>
    <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="250">
      <template #default="scope">
        <el-button link type="primary" icon="Position" @click="handleDetail(scope.row)">指标管理</el-button>
        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="选择模板" v-model="openDialog" :width="1200" append-to-body>
    <ms-info selectTpl ref="msRef" v-if="diaType === 'ms'"/>
    <indicator-manger v-else ref="imRef"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleAddTpl">添 加</el-button>
        <el-button @click="openDialog = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import msInfo from "../../../ms/mstpl/index.vue"
import indicatorManger from "../../../ms/mstpl/component/indicatorManger.vue"
import {addObjTpl,getObj,delObjTpl} from "@/api/obj/obj"
import { ElMessage } from 'element-plus'
import {onMounted} from "vue";

const {emit} = getCurrentInstance();
const props = defineProps(['rowId'])
const tplList= ref([])
const openDialog = ref(false)
const msRef = ref(null)
const imRef = ref(null)
const diaType = ref("ms")

const handleSelectTpl = () => {
  diaType.value = "ms"
  openDialog.value = true
}
const handleDetail=(row)=>{
  diaType.value = "im"
  openDialog.value = true
  nextTick(()=>{
    imRef.value.getSelectDetails(row.tplId)
  })
}
onMounted(()=>{
  queryObjData()
})

const queryObjData=()=>{
  getObj(props.rowId).then(res=>{
    tplList.value = res.data.tplList
  })
}

const handleAddTpl=()=>{
  const data = msRef.value.emitIds();
  if(!data.length) return;
  const tplIds = data.map(item=>item.tplId).join(",")
  addObjTpl(props.rowId, {tplIds}).then(()=>{
    queryObjData()
  })
  openDialog.value = false
}

const handleDelete=(row)=>{
  delObjTpl(props.rowId,row.tplId).then(()=>{
    queryObjData()
  })
}

const submitForm = () => {
  if(tplList.value.length){
    emit("nextStep", 1)
  }else{
    ElMessage.error("请选择模板")
  }
}

defineExpose({submitForm})

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