<template>
  <div class="field-manager-container">
    <a-drawer
      width="70%"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      unmountOnClose
      @close="handleClose"
      @open="handleOpen"
    >
      <template #title>
        <h3>数据库虚拟表-字段管理</h3>
      </template>
      <div class="button">
        <div></div>
        <a-button type="outline" @click="handleAddVirtualTableField">
          <template #icon>
            <icon-plus />
          </template>
          新增虚拟表字段
        </a-button>
      </div>
      <div class="content">
        <tables
          :columns="columns"
          :data="data"
          v-bind="tableAttr"
          @page-change="handlePageChange"
        ></tables>
      </div>
    </a-drawer>
  </div>
</template>
<script setup lang="jsx">
import tables from '../tables/index.vue'
import request from '../utils/request'
import emitter from '../utils/mitt'

let visible = defineModel('visible', { default: false })
let props = defineProps({
  table_id: { type: String, default: () => '' }
})

const columns = [
  {
    title: '数据源表',
    dataIndex: 'table_name',
    align: 'center'
  },
  {
    title: '字段名称',
    dataIndex: 'column_name',
    align: 'center'
  },
  {
    title: '数据源字段类型',
    dataIndex: 'data_type',
    align: 'center'
  },
  {
    title: '数据源字段描述',
    dataIndex: 'column_comment',
    align: 'center'
  },
  {
    title: '是否为主键',
    dataIndex: 'column_key',
    align: 'center'
  },

  {
    title: '字段是否可用',
    dataIndex: 'is_used',
    align: 'center',
    render({ record }) {
      console.log(record.is_used)
      return <a-switch v-model={record.is_used}></a-switch>
    }
  },
  {
    title: '备注',
    dataIndex: 'remark',
    align: 'center',
    render({ record }) {
      return <a-input v-model={record.remark}></a-input>
    }
  }
]

const data = ref([])
//表格属性
let tableAttr = ref({
  rowKey: 'table_id',
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  },
  loading: true,

  pagination: {
    current: 1,
    pageSize: 20,
    total: 0,
    showTotal: true,
    showPageSize: true
    // pageSizeOptions: [5, 10, 20]
    // showJumper: true
  },
  pagePosition: 'bottom'
})

let handlePageChange = (page) => {
  tableAttr.value.pagination.current = page
  //   getData(page)
}
let handleAddVirtualTableField = () => {
  emitter.emit('addVirtualTableField', props.table_id)
}
let getData = async (table_id, pageSize = 10, page = 1) => {
  tableAttr.value.loading = true

  try {
    let res = await request('getActualTableField', { table_id, pageSize, page })
    res.data = res.data.map((item) => {
      return {
        ...item,
        column_key: item.column_key == 'PRI' ? true : false
      }
    })
    data.value = res.data
    tableAttr.value.loading = false
    tableAttr.value.pagination.total = res.data.length
  } catch (e) {}
}
let handleOpen = () => {
  getData(props.table_id)
}
let handleClose = () => {
  data.value = []
}
let handleOk = async () => {
  try {
    let res = await request('saveVirtualTableField', {
      columnList: data.value,
      table_id: props.table_id
    })
    // console.log(res)
    visible.value = false
  } catch (e) {
    console.log(e)
  }
}

let handleCancel = () => {
  //   console.log(123)
  visible.value = false
}
</script>
<style scoped lang="scss">
.button {
  display: grid;
  grid-template-columns: 10fr 1fr;
  margin-bottom: 10px;
}
</style>
