<template>
  <AdvancedSearch
    :columns="columns"
    type="simple"
    @search="handleSearch"
    class="scene-search"
    target="scene-triggrt-device-device"
  />
  <Divider style="margin: 0" />
  <JTable
    ref="actionRef"
    model="CARD"
    :columns="columns"
    :request="deviceQuery"
    :gridColumn="2"
    :params="params"
    :bodyStyle="{
      paddingRight: 0,
      paddingLeft: 0
    }"
  >
    <template #card="slotProps">
      <CardBox
        :value="slotProps"
        :active="deviceRowKeys.includes(slotProps.id)"
        :status="slotProps.state?.value"
        :statusText="slotProps.state?.text"
        :statusNames="{
          online: 'processing',
          offline: 'error',
          notActive: 'warning'
        }"
        @click="handleClick"
      >
        <template #img>
          <slot name="img">
            <img width="80" height="80" :src="getImage(slotProps.photoUrl, false) || getImage('/device-product.png')" />
          </slot>
        </template>
        <template #content>
          <Ellipsis style="width: calc(100% - 100px)">
            <span style="font-size: 16px; font-weight: 600">
              {{ slotProps.name }}
            </span>
          </Ellipsis>
          <Row>
            <Col :span="12">
              <div class="card-item-content-text"> 设备类型 </div>
              <div>{{ slotProps.deviceType?.text }}</div>
            </Col>
            <Col :span="12">
              <div class="card-item-content-text"> 产品名称 </div>
              <div>{{ slotProps.productName }}</div>
            </Col>
          </Row>
        </template>
      </CardBox>
    </template>
  </JTable>
</template>

<script setup lang="ts" name="DeviceSelectList">
  import type { PropType } from 'vue';
  import { getImage } from '@jdlinker/utils';
  import { queryDeviceList } from '../../../../../api/device/instance';
  import { cloneDeep } from 'lodash-es';
  import type { SelectorValuesItem } from '../../typings';
  import { ref, computed } from 'vue';
  import JTable from '../../../../../components/UI/Table/index';
  import { CardBox } from '@jdlinker/ui';
  import { AdvancedSearch, Divider, Row, Col, Ellipsis } from 'linker-ui-components';

  type Emit = {
    (e: 'update', data: SelectorValuesItem[]): void;
  };

  const params = ref({});
  const props = defineProps({
    rowKeys: {
      type: Array as PropType<SelectorValuesItem[]>,
      default: () => []
    },
    productId: {
      type: String,
      default: ''
    }
  });

  const emit = defineEmits<Emit>();

  const deviceRowKeys = computed(() => {
    return props.rowKeys.map((item) => item.value);
  });

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 300,
      ellipsis: true,
      fixed: 'left',
      search: {
        type: 'string'
      }
    },
    {
      title: '设备名称',
      dataIndex: 'name',
      width: 200,
      ellipsis: true,
      search: {
        type: 'string',
        first: true
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 200,
      search: {
        type: 'date'
      }
    },
    {
      title: '状态',
      dataIndex: 'state',
      width: 90,
      search: {
        type: 'select',
        options: [
          { label: '禁用', value: 'notActive' },
          { label: '离线', value: 'offline' },
          { label: '在线', value: 'online' }
        ]
      }
    }
  ];

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

  const deviceQuery = (p: any) => {
    if (props.rowKeys) {
      //p.id = props.rowKeys
    }
    p.sorts = { column: 'createTime', order: 'desc' };
    p.productId = props.productId;
    return queryDeviceList({ ...p });
  };

  const handleClick = (detail: any) => {
    const cloneRowKeys = cloneDeep(props.rowKeys);
    const indexOf = cloneRowKeys.findIndex((item) => item.value === detail.id);
    if (indexOf !== -1) {
      cloneRowKeys.splice(indexOf, 1);
    } else {
      cloneRowKeys.push({
        name: detail.name,
        value: detail.id
      });
    }
    emit('update', cloneRowKeys);
  };
</script>

<style scoped>
  .search {
    margin-bottom: 0;
    padding-right: 0px;
    padding-left: 0px;
  }
</style>
