<script lang="ts" setup>
import type { BasicForm, ICRUD } from '@/types/form'

import api from '@/api/menu/menuForm'
import mapi from '@/api/menu/menu'
import { nextTick, onMounted } from 'vue'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  classPath: {
    type: String,
    default: ''
  }
})
const itemTableRef = ref<any>(null)
const nameList = ref<any>([])

const CRUD: ICRUD = {
  create(data: any) {
    data.menuId = props.id
    return api.addMenuForm(data)
  },
  update(data: any) {
    return api.updateMenuForm(data)
  },
  getList(data: any) {
    data.menuId = props.id
    return api.listMenuForm(data).then((res: any) => {
      return {
        list: res.data.records,
        total: res.data.total
      }
    })
  },
  delete(data: any) {
    return api.delMenuForm({
      ids: data.id
    })
  },
  getRecord(data: any) {
    return api.getMenuForm({ id: data.id })
  }
}

const logtFormConfig = reactive<BasicForm>({
  span: 12,
  formItems: [
    {
      span: 24,
      label: '',
      value: '',
      name: '',
      type: 'custom',
      slots: [
        {
          name: 'default',
          alias: 'infos'
        }
      ]
    },
    {
      label: '字段名称',
      value: '',
      name: 'name',
      type: 'select',
      request: () => {
        return mapi.getColumnList(props.classPath).then(res => {
          nameList.value = res.data
          return res.data.map((item: any) => {
            return { ...item, value: item.name }
          })
        })
      },
      props: {
        clearable: true,
        filterable: true,
        'default-first-option': true,
        "allow-create": true
      },
      events: {
        change: (el: any) => {
          console.log(el)
          console.log(nameList.value)
          const field = nameList.value.find((item: any) => item.name == el)?.field
          const entity = nameList.value.find((item: any) => item.name == el)?.entity
          const name = nameList.value.find((item: any) => item.name == el)?.name
          nextTick(() => {
            itemTableRef.value.formData.code = name
            itemTableRef.value.formData.formField = field
            itemTableRef.value.formData.formEntity = entity
          })
        }
      },
      rules: [{ required: true, message: '字段名称不能为空', trigger: 'blur' }],
      search: true
    },
    {
      label: '实体字段',
      value: '',
      name: 'code',
      type: 'input',
      rules: [{ required: true, message: '实体字段不能为空', trigger: 'blur' }],
      search: true
    },
    {
      label: '表字段',
      value: '',
      name: 'formField',
      rules: [{ required: true, message: '表字段不能为空', trigger: 'blur' }],
      type: 'input'
    },
    {
      label: '实体类',
      value: '',
      name: 'formEntity',
      rules: [{ required: true, message: '实体字段不能为空', trigger: 'blur' }],
      type: 'input'
    },
    {
      label: '是否启用',
      value: '0',
      name: 'enabled',
      type: 'switch',
      props: {
        'active-value': '0',
        'inactive-value': '1'
      }
    },
    {
      label: '排序',
      value: 1,
      name: 'sort',
      type: 'input-number',
      props: {
        min:1,
        controlsPosition:"right"
      },
    },
    {
      label: '描述',
      value: '',
      name: 'remarks',
      type: 'input',
      props: {
        type: 'textarea',
        rows: 3
      }, span: 24
    }
  ]
})

const checkSwitch = (row: any) => {
  api.updateMenuForm({ id: row.id, enabled: row.enabled == 0 ? '1' : '0' }).then(res => {
    itemTableRef.value.refresh()
  })
}
</script>

<template>
  <div>
    <pro-table
    :crud="CRUD"
    :tree-config="{}"
    ref="itemTableRef"
    height="80vh"
    :tableConfig="{ operateWidth: 150 }"
    :formConfig="logtFormConfig"
    :selection="false"
  >
  <template #infos>
    <el-alert title="字段名称：字段的含义如组织名称,  实体字段：实体字段如：organizeId, 表字段：数据库表字段名如：organize_id, 实体类：实体字段名如：Menu" type="warning" :closable="false" />
  </template>
    <vxe-column field="name" title="字段名称"></vxe-column>
    <vxe-column field="code" title="字段编码"></vxe-column>
    <vxe-column field="enabled" title="是否启用">
      <template #default="{ row }">
        <div @click="checkSwitch(row)">
          <el-switch :model-value="row.enabled" :active-text="row.enabled==0 ? '已启用' : '未启用'" active-value="0" inactive-value="1" />
        </div>
      </template>
    </vxe-column>
    <vxe-column field="sort" title="排序"></vxe-column>
    <vxe-column field="formField" title="表字段"></vxe-column>
    <vxe-column field="formEntity" title="实体类字段"></vxe-column>
  </pro-table>
  </div>
  
</template>

<style lang="scss" scoped>
@media only screen and (min-width: 1200px) {
    :deep(.el-col-lg-6) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
       
    }}
</style>
