<template>
<el-dialog

  :modal="true"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  destroy-on-close
  title="数据库存储明细"
  :model-value="dialogVisible"

  :before-close="handleClose"

>
<diy-el-form :span="6" v-model:model-form="forms" :forms="formConfig">
  <template #searchBtn>
    <el-button type="primary" @click="searchR">查询</el-button>
  </template>
</diy-el-form>
 <my-table
   :headers="dataBaseWatchDialogTableHeader"
   :table-data="tableData"
 :page-size="8"
 ></my-table>
</el-dialog>
</template>

<script>
import MyTable from "@/components/common/MyTable.vue";
import {onBeforeMount, ref, watch} from "vue";
import {dataBaseWatchDialogTableHeader} from "@/data/all-table-header";
import {dataBaseDialogFilterForm} from "@/data/all-forms";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {
  getDataBaseDetailInfo,
  getDatabaseTableData,
  getDetailOptions
} from "@/service/data-process-watch/data-base-watch";

export default {
  name: "DataBaseDetailDialolg",
  components: {DiyElForm, MyTable},
  props:{
    dialogVisible:{

    },
    filterObj:{

    }
  },
  setup(props,{emit}){
    const forms = ref({

    })

    function searchR(){
     getTableData()
    }
    function getTableData(){
      getDataBaseDetailInfo({
        SERVER_DEPLOYMENT_ID:forms.value.service,
        DATABASE_NAME:forms.value.database,
        SCHEMA_NAME:forms.value.HOST_NAME,
      }).then(res => {
        let dataA = []
        try {
          dataA = res.data

        }catch {
          dataA = []
        }
        tableData.value = dataA
      })
    }
    watch(() => forms.value.service,(value)=>{
      let findServiceO = formConfig.value.formItemsArr.find(i => i.modelValue === 'database')
      if (!value){
        findServiceO.options = [{value:'',label:'请选择'}]
        return
      }
      getDetailOptions({
        SERVER_DEPLOYMENT_ID:value

      }).then(res => {

        findServiceO.options = [{value:'',label:'请选择'}].concat(res.data.map(i => {
          return {
            value:i.DATABASE_NAME,
            label:i.DATABASE_NAME
          }
        }))
      })
    })
    watch(() => forms.value.database,(value)=>{
      let findServiceO = formConfig.value.formItemsArr.find(i => i.modelValue === 'HOST_NAME')
      if (!value) {

        findServiceO.options = [{value:'',label:'请选择'}]
        return
      }
      getDetailOptions({
        SERVER_DEPLOYMENT_ID:forms.value.service,
        DATABASE_NAME:value
      }).then(res => {
        let findServiceO = formConfig.value.formItemsArr.find(i => i.modelValue === 'HOST_NAME')
        findServiceO.options = [{value:'',label:'请选择'}].concat(res.data.map(i => {
          return {
            value:i.SCHEMA_NAME,
            label:i.SCHEMA_NAME
          }
        }))
      })
    })
    onBeforeMount(() => {
      if (props.filterObj){
        forms.value = {
          ...props.filterObj
        }

      }
      getTableData()
      let findServiceO2 = formConfig.value.formItemsArr.find(i => i.modelValue === 'service')
      findServiceO2.events = {
        change() {
          forms.value.database =  forms.value.HOST_NAME = ''
        }
      }
      let findServiceO = formConfig.value.formItemsArr.find(i => i.modelValue === 'database')
      findServiceO.events = {
        change() {
          forms.value.HOST_NAME = ''
        }
      }

      getDetailOptions({


      }).then(res => {
        let findServiceO = formConfig.value.formItemsArr.find(i => i.modelValue === 'service')
        findServiceO.options = [{value:'',label:'请选择'}].concat(res.data.map(i => {
          return {
            value:i.SERVER_DEPLOYMENT_ID,
            label:i.HOST_NAME
          }
        }))
      })
    })
    const formConfig = ref({...dataBaseDialogFilterForm})
    const tableData = ref([])
    function handleClose(){
      emit('update:dialogVisible',false)
    }
    return {
      handleClose,
      tableData,
      dataBaseWatchDialogTableHeader,
      formConfig,
      forms,
      searchR
    }
  }
}
</script>

<style scoped lang="scss">

</style>
