<!-- 绑定设备 -->
<template>
  <Modal
    :maskClosable="false"
    width="1000px"
    :visible="true"
    title="绑定父设备"
    okText="确定"
    cancelText="取消"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="btnLoading"
  >
    <AdvancedSearch :columns="columns" target="child-device-bind" @search="handleSearch" type="simple" />
    <JTable
      ref="bindDeviceRef"
      :columns="columns"
      :request="query"
      model="TABLE"
      :bodyStyle="{ padding: '0 0 0 24px' }"
      :defaultParams="defaultParams"
      :rowSelection="{
        selectedRowKeys: _selectedRowKeys,
        onChange: onSelectChange
      }"
      :params="params"
    >
      <template #registryTime="slotProps">
        {{ slotProps.registryTime ? dayjs(slotProps.registryTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
      </template>
      <template #state="slotProps">
        <Badge :text="slotProps.state.text" :status="statusMap.get(slotProps.state.value)" />
      </template>
    </JTable>
  </Modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { bindDevice } from '../../../../../../api/device/instance';
  import { onlyMessage } from '@jdlinker/utils';
  import dayjs from 'dayjs';
  import JTable from '../../../../../../components/UI/Table/index';
  import { Badge, AdvancedSearch, Modal } from 'linker-ui-components';

  const emit = defineEmits(['cancel', 'ok']);

  const bindDeviceRef = ref<Record<string, any>>({});
  const params = ref<Record<string, any>>({});
  const _selectedRowKeys = ref<string[]>([]);
  const btnLoading = ref<boolean>(false);

  const props = defineProps({
    data: {
      type: Object,
      default: () => {}
    }
  });

  const statusMap = new Map();
  statusMap.set('online', 'success');
  statusMap.set('offline', 'error');
  statusMap.set('notActive', 'warning');

  const defaultParams = {
    terms: [
      {
        column: 'productId$product-info',
        value: [
          {
            column: 'deviceType',
            termType: 'eq',
            value: 'gateway'
          }
        ]
      }
    ]
  };

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      ellipsis: true,
      fixed: 'left',
      search: {
        type: 'string'
      }
    },
    {
      title: '设备名称',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      search: {
        type: 'string'
      }
    },
    {
      title: '所属产品',
      dataIndex: 'productName',
      key: 'productName',
      search: {
        type: 'string'
      }
    },
    {
      title: '注册时间',
      dataIndex: 'registryTime',
      key: 'registryTime',
      scopedSlots: true,
      search: {
        type: 'date'
      }
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      scopedSlots: true,
      search: {
        type: 'select',
        options: [
          { label: '禁用', value: 'notActive' },
          { label: '离线', value: 'offline' },
          { label: '在线', value: 'online' }
        ]
      }
    }
  ];

  const handleSearch = (e: any) => {
    params.value = e;
  };

  const onSelectChange = (keys: string[]) => {
    _selectedRowKeys.value = [...keys];
  };

  const handleOk = () => {
    if (_selectedRowKeys.value.length === 0) {
      onlyMessage('请选择需要绑定的设备', 'warning');
      return;
    }
    btnLoading.value = true;
    bindDevice(_selectedRowKeys.value[0], props.data.id)
      .then((resp) => {
        if (resp.code === 200) {
          emit('ok', _selectedRowKeys.value[0]);
          onlyMessage('操作成功');
        }
      })
      .finally(() => {
        btnLoading.value = false;
      });
  };

  const handleCancel = () => {
    emit('cancel', false);
  };
</script>

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