<template>
    <el-dialog :close-on-click-modal="false" title="服务列表" :visible.sync="serviceListDialog"  width="800px" top="5vh" :before-close="handleClose" append-to-body>
      <div class="tableWrap">
        <div class="search-header">
          <div class="tool-common-wrap">
            <div class="search-wrap">
              <quick-query ref="quick" :placeholder="placeholder" :is-date="false" @quickSearch="quickSearch" />
            </div>
            <div class="btn-wrap">
              <el-button type="primary" @click="rest()" > 刷新 </el-button>
            </div>
          </div>
        </div>
        <el-table ref="singleTable" :data="tableList" v-loading="tableLoading" highlight-current-row style="width: 100%; margin: 15px 0">
          <el-table-column type="index" label="序号" width="50"  align="center"> </el-table-column>
          <el-table-column prop="name" label="名称" align="left" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-link class="table-link" >{{scope.row.name}}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="connectorType"  label="类型" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination :page-size="page.pageSize" :current-page.sync="page.pageNum" background @current-change="getDataCurrent" :total="page.total" />
      </div>
    </el-dialog>
</template>

<script>
import { getDomaininfoServiceList } from '@/api/esb_service'
import QuickQuery from '@/components/quickquery/QuickQuery'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'// 列表操作需要依赖
export default {
  mixins: [EsbServiceListMixins],
  components: {
    QuickQuery
  },
  data() {
    return {
      tableList: [],
      tableLoading: false,
      quickQueryKeys: ['name', 'connectorType'],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      placeholder: '名称、类型'
    }
  },
  props: {
    domainId: {
      type: String,
      default() {
        return ''
      }
    },
    serviceListDialog: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  watch: {
    domainId(val) {
      if (val) {
        this.getData(val)
      }
    }
  },
  created() {
    this.page.pageSize = 5
    this.fullFilters = [{ logic: 'and', filters: [{ key: 'domain_id', value: '' }] }, { logic: 'and', filters: [] }]
  },
  computed: {
  },
  methods: {
    handleClose() {
      this.$emit('closeDialog')
    },
    getData() {
      this.fullFilters[0].filters[0].value = this.domainId
      this.fullFilters[1].filters = this.filters
      getDomaininfoServiceList({
        logic: this.logic,
        fullFilters: this.fullFilters,
        ...this.sort,
        ...this.page
      }).then(rt => {
        // this.dialogForm = rt.data
        this.tableList = rt.data.list
        this.page.total = rt.data.total
        return rt.data.list
      })
    },
    getDataCurrent(val) {
      this.page.pageNum = val
      this.getData(this.domainId)
    },
    quickQueryData() {
      this.getData()
    }
  }
}
</script>

<style>
</style>
