<template>
<a-card>
  <a-row justify="end" >
    <a-col>
      <a-button  type="primary" @click="openModal" >加入产品模型库</a-button>
    </a-col>
  </a-row>
  <a-table
    style="margin-top: 20px;"
    :columns="columns"
    :data-source="state.dataSource"
    :loading="state.loading"
    :pagination="queryParamsState"
    @change="changePage"
  >
  <template #bodyCell="{column, record}">
      <template v-if="column.key === 'id'" >
          <a @click="goDetailPage(record.id)" >{{record.id}}</a>
        </template>
        <template v-if="column.key === 'createAt'" >
          {{dayjs(record.createAt).format('YYYY/MM/DD HH:MM:ss')}}
        </template>
        <template v-if="column.key === 'updateAt'" >
          {{dayjs(record.updateAt).format('YYYY/MM/DD HH:MM:ss')}}
        </template>
        <template v-if="column.key === 'transportType'" >
          <a-tag  >{{record.transportType}}</a-tag>
        </template>
        <template v-if="column.key === 'payloadType'" >
          <a-tag  color="blue">{{record.payloadType}}</a-tag>
        </template>
        <template v-if="column.key === 'action'" >
          <a-space>
            <a @click="goDetailPage(record.id)" >查看</a>
          </a-space>
        </template>
      </template>
  </a-table>
</a-card>

<modal-pro
  label="选择产品"
  :open="state.visible"
  @cancel="state.visible = false"
  @ok="ok"
>
  <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">

    <a-form-item label="模型名称" v-bind="validateInfos.templateLabel">
      <a-input allowClear v-model:value="modelRef.templateLabel"  />
    </a-form-item>

    <a-form-item label="产品" v-bind="validateInfos.modelId">
      <a-select allowClear v-model:value="modelRef.modelId" >
        <a-select-option
          v-for="item in modelState.dataSource"
          :key="item.id"
          :value="item.id"
        >
          {{item.modelLabel}}
        </a-select-option>
      </a-select>
    </a-form-item>

  </a-form>
</modal-pro>
</template>
<script lang='ts' setup >
import { ModelController } from '@/controller'
import { LeftSquareOutlined } from '@ant-design/icons-vue'
import { onMounted, reactive } from 'vue'
import { Form } from 'ant-design-vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '名称',
    dataIndex: 'templateLabel',
    key: 'templateLabel'
  },
  {
    title: '传输协议',
    dataIndex: 'transportType',
    key: 'transportType'
  },
  {
    title: '数据格式',
    dataIndex: 'payloadType',
    key: 'payloadType'
  },
  {
    title: '创建时间',
    dataIndex: 'createAt',
    key: 'createAt'
  },
  {
    title: '修改时间',
    dataIndex: 'updateAt',
    key: 'updateAt'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const router = useRouter()

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

const modelState = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  dataSource: [],
  loading: false
})

const state = reactive({
  dataSource: [],
  loading: false,
  opraState: 'add',
  visible: false
})

const modelRef = reactive({
  templateLabel: '',
  modelId: ''
})

const useForm = Form.useForm

const { resetFields, validate, validateInfos } = useForm(modelRef, reactive({
  templateLabel: [{ required: true, message: '请填写模型名称' }],
  modelId: [{ required: true, message: '请选择模型' }]
}))

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

const confirmDel = async (id: string) => {
  await ModelController.del(id)
  getModel()
}

const goDetailPage = (id: string) => {
  router.push({ path: '/product/detail', query: { id, type: 'template' } })
}

const changePage = ({ current }) => {
  queryParamsState.page = current
  getModelsPage()
}

const ok = () => {
  validate().then(async () => {
    await ModelController.postModelTemplate(modelRef)
    state.visible = false
    getModelsPage()
  })
}

const getModel = async () => {
  modelState.loading = true
  const { data, sum } = await ModelController.list()
  modelState.loading = false
  modelState.dataSource = data
}

const getModelsPage = async () => {
  state.loading = true
  const { data, sum } = await ModelController.modelTemplate(queryParamsState)
  state.loading = false
  state.dataSource = data
  queryParamsState.total = sum
}

onMounted(() => {
  getModelsPage()
})
</script>
<style lang='less' scoped >
</style>
