<template>
  <a-card style="width: 100%" title="" :tab-list="tabList" :active-tab-key="activeTab" @tabChange="key => onTabChange(key)">
    
    <template v-if="activeTab=='tab1'">
        <a-form
          ref="formRef"
          :model="formState"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-item label="数据库名称" name="database">
            <a-input v-model:value="formState.database" />
          </a-form-item>
          <a-form-item label="登录帐号" name="user">
            <a-input v-model:value="formState.user" />
          </a-form-item>
          <a-form-item label="登录密码" name="password">
            <a-input type="password" v-model:value="formState.password" />
          </a-form-item>
          <a-form-item label="服务IP" name="host">
            <a-input v-model:value="formState.host" />
          </a-form-item>
          <a-form-item label="端口" name="port">
            <a-input v-model:value="formState.port" />
          </a-form-item>
          <a-form-item label="获取的记录数" name="recordNumber">
            <a-input v-model:value="formState.recordNumber" />
          </a-form-item>
        </a-form>
    </template>
    <template v-else-if="activeTab=='tab2'">
        <a-row :gutter="[16,16]">
        <a-col :span="3" v-for="(item,i) in dbAllTables" :key="i">
          <a-button  type="link" @click="setDbTableAllRecord(item)" >{{ item }}</a-button>
        </a-col>
      </a-row>
    </template>
    <template v-else>
      <div style="height: 70vh;">
        <div style="margin:10px auto;width: 100%">
          <span style="margin-right:100px">表名：{{formState.tableName}}</span>
          <vxe-input v-model="filterName" type="search" placeholder="试试全表搜索" style="width:30%" clearable @change="searchEvent"></vxe-input>
        </div>
        <vxe-table
          border
          stripe
          height="auto"
          :loading="loading"
          :column-config="{resizable: true}"
          :row-config="{isHover: true}"
          :checkbox-config="{labelField: 'id', highlight: true, range: true}"
          :data="dbTableDatas">
          <vxe-column type="seq" width="70"></vxe-column>
          <template v-for="(col,ind) in columns" :key="ind">
            <vxe-column :title="columnNameMap[col]||col" :cell-type="col">
              <template #default="{row}">
                <span v-html="row[col]"></span>
              </template>
            </vxe-column>
          </template>
        </vxe-table>
      </div>
    </template>
  </a-card>
</template>

<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue';
import XEUtils from 'xe-utils'
import { getDbAllTable,getTableDatas } from './index.api';

const formState = ref({
  database: 'stm_db',
  host:"47.98.203.68",
  user : "root",
  password :"ZhongRunChangHong/123",
  tableName:'',
  port:'3306',
  recordNumber:100
});

const labelCol = { span: 4 };
const wrapperCol = { span: 20 };

const filterName = ref('')

const activeTab = ref("tab1")
const tabList = [{
    key: 'tab1', tab: '数据库配置',
  },{
    key: 'tab2',tab: '数据库所有表',
  },{
    key: 'tab3',tab: '数据库表的内容',
  }
];

const onTabChange = async (value) => {
  activeTab.value = value
  if(value==="tab2") {
    await setDbAllTable()
  } else if(value==="tab3") {
    
  }
};

const loading = ref(false)
const columns = ref([])
const columnNameMap = ref({})

const dbTableDatas = ref([])
const dbAllTables = ref([])

const allTableDatas = ref([])

async function setDbAllTable() {
  loading.value = true
  dbAllTables.value = await getDbAllTable(formState.value)
  loading.value = false
}

async function setDbTableAllRecord(tableName) {
  loading.value = true
  formState.value.tableName = tableName
  
  const retData = await getTableDatas(formState.value)
  columnNameMap.value = retData.colHeadMap;
  columns.value = retData.columns;
  dbTableDatas.value = allTableDatas.value  = retData.tableData
 
  loading.value = false
  activeTab.value = "tab3"


}

const handleSearch = () => {
  const filterVal = String(filterName.value).trim().toLowerCase()
  if (filterVal) {
    const filterRE = new RegExp(filterVal, 'gi')
    const searchProps =columns.value;
    const rest = allTableDatas.value.filter(item => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1))
    dbTableDatas.value = rest.map(row => {
      const item = XEUtils.clone(row)
      searchProps.forEach(key => {
        item[key] = String(item[key]).replace(filterRE, match => `<span class="keyword-lighten" style='color:red'>${match}</span>`)
      })
      return item
    })
  } else {
    dbTableDatas.value = allTableDatas.value
  }
}

const searchEvent = XEUtils.throttle(function () {
  handleSearch()
}, 500, { trailing: true, leading: true })

</script>


<style lang="less" scoped>
  .keyword-lighten {
    color: red;
  }
</style>


