<template>
  <div class="app-container">
    <el-card class="box-card" shadow="always">
      <div class="body-wrapper">
        待开发~~~
      </div>
    </el-card>
  </div>
</template>

<script>
import { pageDataSource } from '@/api/metadata/datasource'
import { pageDataTable } from '@/api/metadata/datatable'
import { pageDataColumn } from '@/api/metadata/datacolumn'

export default {
  name: 'DataSearch',
  data() {
    return {
      searchExecuting: false,
      type: '',
      keyword: '',
      btnEnable: true,
      dataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  computed: {
    listenChange() {
      const { type, keyword } = this
      return { type, keyword }
    }
  },
  watch: {
    listenChange(val) {
      if (val.type && val.keyword) {
        this.btnEnable = false
      } else {
        this.btnEnable = true
      }
    }
  },
  methods: {
    search() {
      this.searchExecuting = true
      const data = JSON.parse(JSON.stringify(this.queryParams))
      if (this.type === '1') {
        data.sourceName = this.keyword
        pageDataSource(data).then(response => {
          if (response.success) {
            const { data } = response
            this.dataList = data.data
            this.total = data.total
          }
        })
      } else if (this.type === '2') {
        data.tableName = this.keyword
        pageDataTable(data).then(response => {
          if (response.success) {
            const { data } = response
            this.dataList = data.data
            this.total = data.total
          }
        })
      } else if (this.type === '3') {
        data.columnName = this.keyword
        pageDataColumn(data).then(response => {
          if (response.success) {
            const { data } = response
            this.dataList = data.data
            this.total = data.total
          }
        })
      }
    },
    typeSelectChanged(val) {
      this.dataList = []
      this.total = 0
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 20
      console.log(val)
    },
    handleSizeChange(val) {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = val
      this.search()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.search()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card ::v-deep .el-card__body {
  height: calc(100vh - 170px);
}
.search-container {
  min-height: 100%;
  width: 100%;
  text-align: center;
  margin-top: 15%;
  .el-input {
    position: relative;
    width: 520px;
    max-width: 100%;
    margin: 0 auto;
  }
}
::v-deep .el-divider {
  margin: 10px 0;
}
</style>
