<template>
<el-dialog
  :modal="true"
  width="30%"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  destroy-on-close
  title="选择主机"
  :model-value="dialogVisible"

  :before-close="handleClose"

>
  <div class="forms"><diy-el-form ref="formRef" :span="24" v-model:model-form="forms" :forms="formConfig"/></div>
  <template #footer>
    <el-button  :icon="SuccessFilled" @click="toDetail">确定</el-button>
    <el-button  @click="handleClose" :icon="Close">取消</el-button>
  </template>
</el-dialog>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {processStateTableChooseServiceDialog} from "@/data/all-forms";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {Close, SuccessFilled} from "@element-plus/icons-vue";
import {getAllServiceSelect} from "@/service/data-gather-watch/process-charts";
import {isValid} from "js-base64";

export default {
  name: "AddChooceServiceDialog",
  computed: {
    Close() {
      return Close
    },
    SuccessFilled() {
      return SuccessFilled
    }
  },
  components: {DiyElForm},
  props:{
    dialogVisible:{}
  },
  setup(props,{emit}){
    const formRef = ref(null)
    function toDetail(){
      formRef.value.refEl.validate(isValid => {
        if (isValid){
          emit('changeOperation','add',{SERVER_DEPLOYMENT_ID:forms.value.SERVER_DEPLOYMENT_ID})
        }
      })
    }
    onBeforeMount(() => {
      getAllServiceSelect().then(res => {
        let options = res.msg[0].Rows.map(i => {
          return {
            value:i.UUID,
            label:i.HOST_NAME
          }
        })
        let findI = formConfig.value.formItemsArr.find(i => i.modelValue === 'SERVER_DEPLOYMENT_ID')
        findI.options = [{value:'',label:'全部'}].concat(options)
      })
    })
    const forms= ref({})
    const formConfig = ref({...processStateTableChooseServiceDialog})
    function handleClose(){
      emit('update:dialogVisible',false)
    }
    return {
      handleClose,
      forms,
      formConfig,
      formRef,
      toDetail
    }
  }
}
</script>

<style scoped lang="scss">
.forms{
  padding-left: 30px;
  padding-right: 30px;
}
</style>
