<template>
<a-card>
  <a-row justify="space-between" >
    <a-col>
      <a-space>
        <a-input allowClear v-model:value="queryParams.apiLabel" placeholder="请输入api名称" ></a-input>
        <a-button type="primary" @click="getOpenApiPage" >搜索</a-button>
      </a-space>
    </a-col>
    <a-col>
      <a-tag color="blue" v-if="state.appId" style="scale: 1.2;" >appid: {{state.appId}}</a-tag>
      <a-button v-else type="primary" @click="openModal" >创建Appid</a-button>
    </a-col>
  </a-row>
  <a-table
    :columns="columns"
    :loading="state.loading"
    :data-source="state.dataSource"
    style="margin-top: 20px;"
    :pagination="queryParams"
    @change="changePage"
  >
  <template #bodyCell="{column, record}" >
    <template v-if="column.key === 'apiDescription'" >
      <a-tooltip>
        <template #title>  {{record.apiDescription}}</template>
        <div> {{record.apiDescription}}</div>
      </a-tooltip>
    </template>
    <template v-if="column.key === 'apiParameters'" >
      <a-tooltip>
        <template #title>  {{record.apiParameters}}</template>
        <div>{{record.apiParameters}}</div>
      </a-tooltip>
    </template>
    <template v-if="column.key === 'apiParametersDescription'" >
      <a-tooltip>
        <template #title>  {{record.apiParametersDescription}}</template>
        <div>{{record.apiParametersDescription}}</div>
      </a-tooltip>
    </template>
    <template v-if="column.key === 'apiResponse'" >
      <a-tooltip>
        <template #title>  {{record.apiResponse}}</template>
        <div>{{record.apiResponse}}</div>
      </a-tooltip>
    </template>
    <template v-if="column.key === 'apiResponseDescription'" >
      <a-tooltip>
        <template #title>  {{record.apiResponseDescription}}</template>
        <div>{{record.apiResponseDescription}}</div>
      </a-tooltip>
    </template>
    <template v-if="column.key === 'action'" >
      <a @click="openDetailModel(record)" >详情</a>
    </template>
  </template>
  </a-table>
</a-card>

<modal-pro
  title="创建Appid"
  :open="state.visible"
  @cancel="state.visible = false"
  @ok="ok"
>
  <a-input allowClear v-model:value="state.appId"  ></a-input>
</modal-pro>

<a-drawer
  style="{width: 600px;}"
  size="large"
  title="api详情"
  v-model:open="state.detailVisible"
  destroyOnClose
  @close="state.spnningLoading = true"
>
<a-spin :spinning="state.spnningLoading" >

  <a-card :loading="state.spnningLoading" style="height: 2000px;overflow: hidden;overflow-y: scroll;" >
    <a-form  style="height: 3000px;">
      <a-form-item label="api名称" >
        <span>{{state.openApiDetail.apiLabel}}</span>
      </a-form-item>
      <a-form-item label="api地址" >
        <span>{{state.openApiDetail.apiUrl}}</span>
      </a-form-item>
      <a-form-item label="api描述" >
        <span>{{state.openApiDetail.apiDescription}}</span>
      </a-form-item>
      <a-form-item label="请求参数" >
        <CodeMirrorTsx :body-json="state.openApiDetail.apiParameters" body-type="json" />
      </a-form-item>
      <a-form-item label="请求参数描述" >
        <span>{{state.openApiDetail.apiParametersDescription}}</span>
      </a-form-item>
      <a-form-item label="响应参数" >
        <CodeMirrorTsx :body-json="state.openApiDetail.apiResponse" body-type="json" />
      </a-form-item>
      <a-form-item label="响应描述" >
        <span>{{state.openApiDetail.apiResponseDescription}}</span>
      </a-form-item>
    </a-form>
  </a-card>
</a-spin>
  </a-drawer>
</template>
<script lang='ts' setup >
import { DataController } from '@/controller/iot/data'
import { message } from 'ant-design-vue'
import { onMounted, reactive } from 'vue'
import { CodeMirrorTsx } from '@/components/CodeMirror/index'
import { useSchedulerOnce } from '@/hooks/index'

const columns = [
  {
    title: 'api名称',
    dataIndex: 'apiLabel',
    width: '200px'
  },
  {
    title: 'api地址',
    dataIndex: 'apiUrl'
  },
  {
    title: 'api描述',
    dataIndex: 'apiDescription',
    key: 'apiDescription',
    ellipsis: true
  },
  {
    title: '请求参数',
    dataIndex: 'apiParameters',
    key: 'apiParameters',
    ellipsis: true
  },
  {
    title: '请求参数描述',
    dataIndex: 'apiParametersDescription',
    key: 'apiParametersDescription',
    ellipsis: true
  },
  {
    title: '响应参数',
    dataIndex: 'apiResponse',
    key: 'apiResponse',
    ellipsis: true
  },
  {
    title: '响应描述',
    dataIndex: 'apiResponseDescription',
    key: 'apiResponseDescription',
    ellipsis: true
  },
  {
    title: '操作',
    key: 'action'
  }
]

const queryParams = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  apiLabel: ''
})

const state = reactive({
  loading: false,
  appId: '',
  visible: false,
  detailVisible: false,
  openApiDetail: {},
  dataSource: [],
  spnningLoading: false
})

const openDetailModel = (record: any) => {
  state.openApiDetail = record
  state.detailVisible = true
  useSchedulerOnce(() => {
    state.spnningLoading = false
    console.log('state.spnningLoading:', state.spnningLoading)
  }, 1000)
}

const openModal = () => {
  state.visible = true
}

const ok = async () => {
  if (state.appId.length === 0) {
    message.warn('请填写appid')
  } else {
    await DataController.postAppId({ appId: state.appId })
    state.visible = false
  }
}

const changePage = ({ current }) => {
  queryParams.page = current
  getOpenApiPage()
}

const getAppid = async () => {
  const { data } = await DataController.getAppId()
  state.appId = data
}

const getOpenApiPage = async () => {
  state.loading = true
  const { data, sum } = await DataController.pageOpenAPiList(queryParams)
  state.loading = false
  state.dataSource = data
  queryParams.total = sum
}

onMounted(() => {
  getOpenApiPage()
  getAppid()
})

</script>
<style lang='less' scoped >
</style>
