<template>
  <div class="basic-content-padding">
    <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
        @register="registerTable"
        :dataSource="deviceList"
      >
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'action'">
            <TableAction
              :actions="[
                {
                  tooltip: '删除',
                  icon: 'ant-design:delete-outlined',
                  color: 'error',
                  popConfirm: {
                    title: '是否确认删除',
                    confirm: handleDelete.bind(null, record),
                  },
                },
                {
                  tooltip: '查看',
                  icon: 'clarity:info-standard-line',
                  onClick: handleView.bind(null, record),
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </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>
</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 } from 'ant-design-vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { descriptionColumns, useColumns } from './schema';
  import { labColumns as deviceColumn } from '/@/views/device/lab-device/schema';
  import componentSetting from '/@/settings/componentSetting';
  import * as LaboratoryApi from '/@/api/device/laboratoryApi';
  import * as LabDeviceApi from '/@/api/device/labDeviceApi';
  import * as TaskApi from '/@/api/test/taskApi';
  import { Laboratory } from '/@/api/model/laboratory';

  const {
    bordered,
    showIndexColumn,
  } = componentSetting.table;

  const route = useRoute();
  const id = ref(route.params?.id);
  const go = useGo();
  let data = reactive({
    detail: {},
    isOver: false,
  });
  let deviceList: any = ref([]);
  const getDetail = () => {
    LaboratoryApi.getById(id.value).then((res: Laboratory) => {
      data.isOver = true;
      data.detail = res;
      deviceList.value = res.labDeviceList;
    });
  };

  const [registerTable] = useTable({
    title: '',
    columns: deviceColumn,
    useSearchForm: false,
    showTableSetting: false,
    bordered,
    showIndexColumn,
    canResize: false,
    rowKey: (record: any) => record.id,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });
  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, laboratoryId: data.detail.id };
    return handledParams;
  };

  const handleDelete = (record: Recordable) => {
    LabDeviceApi.remove(record.id).then((_) => {
      getDetail();
    });
  };

  const handleView = (record) => {
    go('/dev/lab-device/' + record.id);
  };

  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 lang="less">
.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>
