<template>
  <div class="app-container">
    <el-card class="box-card" shadow="always">
      <div :style="classCardbody">
        <div v-if="searchExecuting">
          <el-row>
            <el-col :span="12" :offset="6">
              <el-input placeholder="请输入内容" v-model="keyword">
                <el-select v-model="type" slot="prepend" placeholder="请选择" style="width: 100px;" @change="typeSelectChanged">
                  <el-option label="数据库" value="1"></el-option>
                  <el-option label="数据表" value="2"></el-option>
                  <el-option label="数据元" value="3"></el-option>
                </el-select>
                <el-button slot="append" :disabled="btnEnable" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <div class="line"></div>
          <el-row>
            <el-col :span="6">
              6
            </el-col>
            <el-col :span="18">
              <source-pane v-if="type === '1'" :data="dataList"></source-pane>
              <table-pane v-if="type === '2'" :data="dataList"></table-pane>
              <column-pane v-if="type === '3'" :data="dataList"></column-pane>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <div class="search-container">
            <el-input placeholder="请输入内容" v-model="keyword">
              <el-select v-model="type" slot="prepend" placeholder="请选择" style="width: 100px;">
                <el-option label="数据库" value="1"></el-option>
                <el-option label="数据表" value="2"></el-option>
                <el-option label="数据元" value="3"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" :disabled="btnEnable" @click="search"></el-button>
            </el-input>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import SourcePane from './SourcePane'
import TablePane from './TablePane'
import ColumnPane from './ColumnPane'

export default {
  name: 'DataSearch',
  components: { SourcePane, TablePane, ColumnPane },
  data () {
    return {
      classCardbody: {
        overflow: 'auto',
        height: document.body.offsetHeight - 170 + 'px'
      },
      searchExecuting: false,
      type: '',
      keyword: '',
      btnEnable: true,
      dataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  methods: {
    search () {
      this.searchExecuting = true
    },
    typeSelectChanged (val) {
      this.dataList = []
      console.log(val)
    }
  },
  computed: {
    listenChange () {
      const { type, keyword } = this
      return { type, keyword }
    }
  },
  watch: {
    listenChange (val) {
      if (val.type && val.keyword) {
        this.btnEnable = false
      } else {
        this.btnEnable = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.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;
  }
}

.line {
  height: 1px;
  background-color: #e0e6ed;
  margin: 10px 0;
}
</style>
