<template>
  <PageWrapper>
    <template #footer>
      <Tabs v-model:activeKey="activeKey">
        <TabPane key="detail" tab="详情"></TabPane>
        <TabPane key="state" tab="设备状态"></TabPane>
      </Tabs>
    </template>
    <div v-show="activeKey === 'detail'">
      <Card :bordered="false" title="设备信息">
        <Descriptions bordered :column="3">
          <Descriptions.Item
            v-for="p in displayProps"
            :key="p.title"
            :label="p.title"
            :span="['avatar'].includes(p.name) ? 3 : 1"
          >
            <span v-if="p.key === 'avatar'">
              <img :src="p.value" style="width: 120px; height: 120px" />
            </span>
            <template v-else>
              {{ p.value }}
            </template>
          </Descriptions.Item>
        </Descriptions>
      </Card>
      <Card :bordered="false" title="最近使用记录" style="margin-top: 16px;">
        <BasicTable v-if="data.detail && data.detail.id" @register="registerUseTable">
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'state'">
              <div v-if="text === 'RUNNING'" class="d-flex align-items-center justify-content-center">
                <span class="running_icon"></span>
                <span style="color: #00A854;">进行中</span>
              </div>
              <div v-if="text === 'FINISH'" class="d-flex align-items-center justify-content-center">
                <span class="finish_icon"></span>
                <span style="color: #0960bd;">已结束</span>
              </div>
            </template>
          </template>
        </BasicTable>
      </Card>
    </div>
    <div v-show="activeKey === 'state'">
      <!-- 复合机器人 -->
      <RobotDetail v-if="type === 'TEST_ROBOT'"></RobotDetail>
      <!-- 照度计 -->
      <LumeterDetail v-if="type === 'LUMETER'"></LumeterDetail>
      <!-- 测试卡切换器 -->
      <SwitcherDetail v-if="type === 'TEST_CARD_SWITCHER'"></SwitcherDetail>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup name="DeviceDetail">
  import { onMounted, computed, ref, reactive } from 'vue';
  import { useRoute } from 'vue-router';
  import { ComputedRef } from '@vue/reactivity';
  import { Descriptions, Card, Tabs, TabPane } from 'ant-design-vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import componentSetting from '/@/settings/componentSetting';
  import { descriptionColumns } from './schema';
  import { useColumns } from '/@/views/device/laboratory/schema';
  import RobotDetail from './modules/robot.vue'
  import LumeterDetail from './modules/lumeter.vue'
  import SwitcherDetail from './modules/switcher.vue'
  import * as LabDeviceApi from '/@/api/device/labDeviceApi';
  import * as TaskApi from '/@/api/test/taskApi';
  import { Device } from '/@/api/model/device';

  const { bordered } = componentSetting.table;

  const route = useRoute();
  const id = ref(route.params?.id);
  const type = ref(route.query?.type);
  const activeKey = ref('detail');
  let data = reactive({
    detail: {},
    isOver: false,
  });
  const getDetail = () => {
    LabDeviceApi.getById(id.value).then((res: Device) => {
      data.isOver = true;
      data.detail = res;
    });
  };

  const [registerUseTable] = useTable({
    title: '',
    api: (params) => TaskApi.search(handleParams(params)),
    columns: useColumns,
    useSearchForm: false,
    showTableSetting: false,
    bordered,
    showIndexColumn: false,
    canResize: false,
    rowKey: (record: any) => record.id,
  });

  const handleParams = (params) => {
    const { pageNum, pageSize } = params;
    const handledParams: any = { pageNum, pageSize, robotId: data.detail.id };
    return handledParams;
  };

  onMounted(() => {
    getDetail();
  });

  const displayProps: ComputedRef<Array<any>> = computed(() => {
    if (!data.isOver) return {};
    const display: any = descriptionColumns.map(({ title, dataIndex = '', customRender }) => ({
      key: dataIndex,
      title,
      value: customRender ? customRender({ text: data.detail[dataIndex] }) : data.detail[dataIndex],
    }));
    return display;
  });
</script>

<style scoped>
.running_icon {
  width: 7px;
  height: 7px;
  background: #00A854;
  display: inline-block;
  border-radius: 50%;
  margin-right: 2px;
}
.finish_icon {
  width: 7px;
  height: 7px;
  background: #0960bd;
  display: inline-block;
  border-radius: 50%;
  margin-right: 2px;
}
</style>
