<template>
  <a-card>
    <a-row justify="end" >
      <a-col>
        <a-button type="primary" @click="openModal('add')">添加</a-button>
      </a-col>
    </a-row>
    <a-table
      style="margin-top: 10px;"
      :columns="columns"
      :data-source="state.dataSource"
      :loading="state.loading"
      :pagination="queryState"
      @change="changePage"
    >
      <template #bodyCell="{column, record}">
        <template v-if="column.key === 'deviceStatus'" >
          <a-tag :color="record.deviceStatus.color" >{{record.deviceStatus.name}}</a-tag>
        </template>
        <template v-if="column.key === 'deviceNodeType'" >
          <a-tag>{{record.deviceNodeType == 'GATEWAY'?'直连类型':'非直连类型'}}</a-tag>
        </template>
        <template v-if="column.key === 'action'">
            <a-space>
              <a href="#" @click="openModal('update', record)" >编辑</a>
              <a-popconfirm
                  title="确实要删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="delUser(record.id)"
                >
                  <a href="#">删除</a>
              </a-popconfirm>
            </a-space>
        </template>
      </template>
    </a-table>
  </a-card>

  <modal-pro
    :label="modalTitle"
    :open="state.visible"
    @cancel="state.visible = false"
    @ok="submit"
    style="width: 700px;"
  >
  <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
    <a-form-item label="姓名" v-bind="validateInfos.name">
      <a-input v-model:value="modelRef.name"  />
    </a-form-item>
   </a-form>
  </modal-pro>
</template>

<script lang="ts" setup >
import { computed, onMounted, reactive } from 'vue'
import { UserController } from '@/controller'
import { Form, useCacheToken } from 'ant-design-vue'

const columns = [
  {
    title: '设备ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '设备名称',
    dataIndex: 'deviceLabel'
  },
  {
    title: '设备标识码',
    dataIndex: 'deviceCode'
  },
  {
    title: 'action',
    dataIndex: 'dataIndex',
    key: 'dataIndex'
  }
]

const modalTitle = computed(() => state.opraState === 'add' ? '新增用户' : '编辑用户')

const useForm = Form.useForm

const queryState = reactive({
  page: 1,
  pageSize: 10
})

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

const modelRef = reactive({
  name: ''
})

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

const openModal = (key: 'add' | 'update', record: USER.User.Detail = {}) => {
  state.opraState = key
  state.visible = true
  if (key === 'update') {
    state.detail = record
  }
}

const { resetFields, validate, validateInfos } = useForm(modelRef, {
  name: [{ required: true, message: '请填写标题' }]
})

const submit = () => {
  validate().then(async () => {
    state.opraState === 'add' ? await UserController.add(modelRef) : UserController.update(modelRef)
    closeModal()
    getUserList()
  })
}

const delUser = async (id: string) => {
  await UserController.del(id)
  getUserList()
}

const changePage = ({ current }) => {
  queryState.page = current
  getUserList()
}

const getUserList = async () => {
  state.loading = true
  const { data } = await UserController.page(queryState)
  state.loading = false
}

onMounted(() => {
  // getUserList()
})

</script>

<style lang="less" >
</style>
