<script lang="ts" setup name="sql_data">
import { cloneDeep } from 'lodash-es'
import { getTableByList, getTableFieldsByList } from '@/api/database/dbApi'

const state = reactive({
  layoutMode: 'table',
  sqlStatement: '',
  dataList: [],
  curPage: 1,
})

const fieldTypes = [
  { name: 'bigint(20)', value: 'bigint(20)' },
  { name: 'varchar(255)', value: 'varchar(255)' },
  { name: 'datetime', value: 'datetime' },
]

const onBlurEvent = (row: any, column?: any) => {
  const _row = cloneDeep(row)
  // const fieldName=row.fieldName
  //   updateDB(row).then(() => {
  //     ElMessage.success('修改成功！')
  //   })
  window.console.log({ row, _row, name: column.title })
}
const onChangeEvent = (row: any) => {
  window.console.log({ row })
}

const onDel = (row: any) => {
  window.console.log({ row })
}

const init = async () => {
  const { data } = await getTableByList()
  if (data && data.length > 0) {
    const res = await getTableFieldsByList(data[0])
    state.dataList = res.data
  }
}
onMounted(() => {
  init()
})
defineExpose({
  init,
})
</script>

<template>
  <div class="page-main">
    <tool-bar>
      <template #right>
        <div class="toolBar">
          <el-button title="刷新" circle text>
            <template #icon>
              <el-icon>
                <svg-icon name="ep:refresh" />
              </el-icon>
            </template>
          </el-button>
        </div>
      </template>
    </tool-bar>
    <el-input v-model="state.sqlStatement" type="textarea" :rows="4" placeholder="请输入内容" clearable />
    <vxe-table
      class=".el-table list-table"
      border
      show-overflow
      :column-config="{ resizable: true }"
      :data="state.dataList"
      :edit-config="{ trigger: 'dblclick', mode: 'cell', showIcon: false }"
    >
      <vxe-column type="seq" width="60" />
      <vxe-column field="comment" title="comment" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #edit="{ row, column }">
          <vxe-input v-model="row.comment" type="text" @blur="onBlurEvent(row, column)" />
        </template>
      </vxe-column>
      <vxe-column field="defaultValue" title="defaultValue" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.defaultValue" type="text" @blur="onBlurEvent(row)" />
        </template>
      </vxe-column>
      <vxe-column field="extra" title="extra" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.extra" type="text" @blur="onBlurEvent(row)" />
        </template>
      </vxe-column>
      <vxe-column field="fieldName" title="fieldName" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.fieldName" type="text" @blur="onBlurEvent(row)" />
        </template>
      </vxe-column>
      <vxe-column field="accident_cat_id" title="accident_cat_id" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.accident_cat_id" type="text" @blur="onBlurEvent(row)" />
        </template>
      </vxe-column>
      <vxe-column field="fieldType" title="fieldType" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #edit="{ row }">
          <el-select v-model="row.fieldType" @chanbge="onChangeEvent(row)">
            <el-option v-for=" item in fieldTypes" :key="item.value" :value="item.value" :label="item.name" />
          </el-select>
        </template>
      </vxe-column>
      <vxe-column field="key" title="key" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.key" type="text" @blur="onBlurEvent(row)" />
        </template>
      </vxe-column>
      <vxe-column field="nullable" title="nullable" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #edit="{ row }">
          <el-select v-model="row.nullable" @chanbge="onChangeEvent(row)">
            <el-option :value="1" label="YES" />
            <el-option :value="0" label="NO" />
          </el-select>
        </template>
      </vxe-column>
      <vxe-column field="操作" title="操作" width="200" align="center">
        <template #default="{ row }">
          <el-button type="danger" size="small" plain @click="onDel(row)">
            删除
          </el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <el-pagination v-model:current-page="state.curPage" :total="100" layout="total, sizes, ->, prev, pager, next, jumper" style="padding:10px 0" />
  </div>
</template>

<style lang="scss" scoped>
    .page-main{
        padding: 10px;
    }
</style>
