<template>
<a-card>
  <template #title >
    <a-row>
      <a-col style="font-size: 20px;margin-right: 10px;" >设备管理</a-col>
      <a-col >
        <a-select
          :value="spaceId"
          style="width: 170px;"
          @change="onChangeSpace"
        >
          <a-select-option
            :key="item.spaceId"
            :value="item.spaceId"
            v-for="(item, index) in state.spaceList "
          >
            {{item.spaceName}}
          </a-select-option>
        </a-select>
    </a-col>
    </a-row>
  </template>
  <table-pro
    ref="tableProDom"
    :service="SpaceController.devicePage"
    :columns="columns"
    @add="openModal"
  >
    <template #search >
      <a-space><InputTsx placeholder="请输入设备名称进行搜索" /> <a-button type="primary">搜索</a-button> </a-space>
    </template>
  </table-pro>

  <modal-pro
    style="width: 1000px;"
    label="接入设备"
    :open="state.visible"
    @cancel="state.visible = false"
    @ok="ok"
  >
  <a-form  style="width: 100%;" :labelCol="{span: 3}" :wrapperCol="{span: 14}" >
      <a-form-item label="设备名称" v-bind="validateInfos.deviceName"  >
        <InputTsx allowClear placeholder="请输入设备名称" v-model:value="deviceState.deviceName" />
      </a-form-item>
      <a-form-item  label="app" v-bind="validateInfos.app"  >
        <InputTsx allowClear placeholder="请输入英文、数字组成的app" v-model:value="deviceState.app" />
      </a-form-item>
      <a-form-item  label="stream" v-bind="validateInfos.stream"  >
        <InputTsx allowClear placeholder="请输入英文、数字组成的stream" v-model:value="deviceState.stream" />
      </a-form-item>
      <a-form-item  label="设备类型"  >
        {{deviceState.type}}
      </a-form-item>
      <a-form-item  label="设备地址"  >
        <InputTsx allowClear placeholder="请输入设备地址" v-model:value="deviceState.gisName" />
      </a-form-item>
      <!-- <a-form-item  label="设备经纬度"  >
        <InputTsx allowClear placeholder="输入地址后自动填入经纬度,例如(116.404，39.915)" />
      </a-form-item> -->
      <a-form-item  label="设备描述"  >
        <a-textarea v-model:value="deviceState.description" placeholder="请输入设备描述" :rows="4" />
      </a-form-item>
    </a-form>
  </modal-pro>
</a-card>
</template>
<script lang='ts' setup >
import { InputTsx } from '@/components/MicroComponents/index'
import { reactive, onMounted, nextTick, ref, getCurrentInstance } from 'vue'
import { Form } from 'ant-design-vue'
import { SpaceController } from '@/controller'
import { useRoute } from 'vue-router'

const columns = [
  {
    title: '设备ID',
    dataIndex: 'deviceId',
    key: 'deviceId'
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    key: 'deviceName'
  },
  {
    title: '空间类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const useForm = Form.useForm

const spaceId = ref(useRoute().query.spaceId as string)

const tableProDom = ref()

const state = reactive<{
  visible: boolean,
  spaceList: CVS.space[]
}>({
  visible: false,
  spaceList: []
})

const deviceState = reactive({
  spaceId: undefined,
  deviceName: '',
  app: '',
  stream: '',
  description: '',
  deviceStreamId: '',
  gisLongitude: '',
  gisLatitude: '',
  gisName: '',
  type: 'RTSP'
})

const { resetFields, validate, validateInfos } = useForm(deviceState, {
  deviceName: [{ required: true, message: '请填写设备名称' }],
  app: [{ required: true, message: '请填写app名称' }],
  stream: [{ required: true, message: '请填写stream名称' }]
})

const ok = () => {
  validate().then(async () => {
    deviceState.deviceStreamId = deviceState.app + '/' + deviceState.stream
    await SpaceController.addDevice(deviceState as unknown as CVS.device)
    closeModal()
    tableProDom.value.reload()
  }).catch(() => {})
}

const onChangeSpace = (spaceId: string) => {
  deviceState.spaceId = spaceId
  tableProDom.value.reload({ page: 1 })
}

const closeModal = () => state.visible = false

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

const getSpaceList = async () => {
  state.spaceList = await SpaceController.list()
  nextTick(() => {
    deviceState.spaceId = spaceId as any
    getCurrentInstance()?.proxy?.$forceUpdate()
  })
}

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