<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :paging="paging">
    <template #searchFormItem="{ searchForm }">
      <ElFormItem label="端点地址">
        <ElInput
          v-model="searchForm.endpointPath"
          placeholder="端点地址"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="请求方式" prop="requestMethod"/>
      <ElTableColumn label="路由前缀" prop="routingPath"/>
      <ElTableColumn label="端点地址" prop="endpointPath"/>
      <ElTableColumn label="访问模式" prop="accessModelTxt"/>
      <ElTableColumn label="备注" prop="memo"/>
    </template>
    <EndpointForm ref="endpointForm" @edit-succ="research"/>
  </FormPage>
</template>

<script lang="ts" setup>
import EndpointApi from '@/pages/sys/endpoint/endpoint-api.ts'
import EndpointForm from '@/pages/sys/endpoint/EndpointForm.vue'
import FormPage from '@/components/page/FormPage.vue'
import type {
  ActionColumnType,
  ToolType,
} from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'

const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
const endpointFormIns = useTemplateRef<InstanceType<typeof EndpointForm>>('endpointForm')

function research() {
  formPageIns.value?.doSearch()
}

const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      endpointFormIns.value?.open()
    },
  },
]
const actionColumn = reactive<ActionColumnType<EndpointTypes.SearchEndpointResult>>({
  tableActions: [
    {
      tooltip: '编辑',
      icon: 'Edit',
      action({row}) {
        endpointFormIns.value?.open(row)
      },
    },
    {
      icon: 'Delete',
      loading: false,
      type: 'danger',
      tooltip: '删除',
      confirm: {
        title: '是否删除当前数据',
      },
      action({row}) {
        return EndpointApi.del([ row.id! ])
          .then(() => {
            ElMessage.success('删除成功')
            return true
          })
      },
    },
  ],
})


function paging(param: EndpointTypes.SearchEndpointParam) {
  return EndpointApi.paging(param)
}

</script>

<style lang="stylus" scoped>
.table-list {
  flex 1;
  margin 0 0 20px 0
  width 100%

  :deep(.table-header) {
    color #454C59

    th {
      background-color #EDF1F7
      font-weight 500
      position relative

      & > div {
        display flex
        gap 5px
        align-items center
      }

      &:not(:first-child) > div::before {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 1px;
        background-color: #D3D7DE;
        transform: translateY(-50%);
        content: "";
        height 50%
      }
    }
  }

  :deep(.table-cell) {
    color #2F3540
  }

  .action-btn {
    width 100%
    display flex
    flex-wrap wrap

    & > button {
      margin 0
    }
  }
}

.tool-bar {
  display flex
  justify-content space-between
  margin 0 0 20px 0
}

.pagination {
  justify-content: end;
  margin: 8px;
}
</style>
