<template>
  <a-drawer
    :visible="visible"
    @open="handleDrawerOpen"
    width="45%"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 关联数据 </template>
    <tables
      :columns="columns"
      :data="data"
      v-bind="tableAttr"
      @pageChange="handlePageChange"
    ></tables>
  </a-drawer>
</template>
<script setup lang="tsx">
import request from '../utils/request'
import tables from '../tables/index.vue'
import { Message } from '@arco-design/web-vue'
import emitter from '../utils/mitt'
let visible = defineModel('visible', { default: true })
const props = defineProps({
  componentId: {
    type: String,
    default: ''
  }
})

let emits = defineEmits(['confirm'])

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

  pagination: {
    current: 1,
    pageSize: 10,
    total: 0,
    showTotal: true,
    showPageSize: true

    // pageSizeOptions: [5, 10, 20]
    // showJumper: true
  },
  pagePosition: 'bottom'
})

let handlePageChange = (page) => {
  tableAttr.value.pagination.current = page
  getData(page)
}

//当前关联的id
let currentRelationId = ref('')
//表格数据
let data = ref([])
const columns = [
  {
    title: 'Soul数据表id',
    dataIndex: 'id',
    align: 'center'
  },
  {
    title: 'Soul数据表名',
    align: 'center',
    dataIndex: 'name'
  },
  {
    title: '创建时间',
    align: 'center',
    dataIndex: 'created_at',
    ellipsis: true
  },

  {
    title: '备注',
    align: 'right',
    dataIndex: 'remark'
  },
  {
    title: '操作',
    align: 'center',
    width: 300,
    render({ record }) {
      return (
        <div class="btn">
          <a-button
            size="mini"
            loading={currentRelationId.value === record.table_id}
            type="outline"
            status={record.check ? 'danger' : 'success'}
            disabled={record.check}
            v-slots={{ icon: () => <icon-relation /> }}
            onClick={() => {
              console.log(record)
              handleRelationData(record.table_id)
            }}
          >
            {record.check ? '已关联' : '添加关联'}
          </a-button>
          <a-button
            type="outline"
            size="mini"
            status="warning"
            onClick={() => {
              handleManager(record.table_id)
            }}
            v-slots={{ icon: () => <icon-edit /> }}
          >
            字段管理
          </a-button>
        </div>
      )
    }
  }
]
//关联数据表
let handleRelationData = async (table_id) => {
  currentRelationId.value = table_id
  try {
    let res = await relationComponentToVirtualTable(table_id)
    //刷新列表
    await getData()
    currentRelationId.value = ''
    Message.success('关联成功')
    emitter.emit('relationConfirm')
  } catch (e) {
    console.log(e)
    Message.error('关联失败' + ':e.toString()')
  }
}

let handleManager = (table_id) => {
  emitter.emit('virtualTableSaveAnddManager', table_id)
}
//关联虚拟表
let relationComponentToVirtualTable = async (table_id) => {
  try {
    let res = await request('relationVirtualTable', {
      component_id: props.componentId,
      table_id: [table_id]
    })

    return Promise.resolve(res)
  } catch (e) {
    console.log(e)
    return Promise.reject(e)
  }
}
//获取所有虚拟表数据
let getData = async (page = 1, pageSize = 24) => {
  try {
    let res = await request('getVirtualTableList', {
      component_id: props.componentId,
      page,
      pageSize
    })
    // console.log(res)
    data.value = res.data.items
    tableAttr.value.pagination.total = res.data.pageInfo.total
    tableAttr.value.pagination.pageSize = pageSize
    tableAttr.value.loading = false
  } catch (e) {
    console.log(e)
  }
}

//抽屉打开
let handleDrawerOpen = () => {
  getData()
}

//取消按钮

let handleCancel = () => {
  visible.value = false
}
let handleOk = () => {
  visible.value = false
}
</script>

<style scoped lang="scss"></style>
