<template>
  <PageContainer :pageHeaderRender="false" style="padding: 0 10px 10px 10px">
    <FullPage style="min-height: calc(100vh - 102px)">
      <JTable
        ref="configRef"
        :columns="columns"
        :request="list"
        :defaultParams="{
          column: 'createTime',
          order: 'desc',
          released: '1',
          type: 1,
          pageSize: 12
        }"
        :params="params"
        :gridColumn="4"
        :noPagination="true"
        :showRightExtra="false"
      >
        <template #headerTitle>
          <RadioGroup v-model:value="visType" @change="handleChangeRadio">
            <RadioButton value="1"  v-show="hasPermission('visual:home:screen')">大屏</RadioButton>
            <RadioButton value="2"  v-show="hasPermission('visual:home:three')">数字孪生</RadioButton>
            <RadioButton value="3"  v-show="hasPermission('visual:home:config')">组态</RadioButton>
            <RadioButton value="4"  v-show="hasPermission('visual:home:report')">报表</RadioButton>
          </RadioGroup>
        </template>
        <template #card="slotProps">
          <Card hoverable @click="handleView(slotProps)">
            <template #cover>
              <img :src="getImage(slotProps.picUrl, false) || getImage('/screen.png')" class="logo" />
            </template>
            <template #actions>
              <span style="font-weight: 600; color: rgba(0, 0, 0, 0.88)"> {{ slotProps.name }}</span>
            </template>
          </Card>
        </template>
      </JTable>
    </FullPage>
  </PageContainer>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getImage } from '@jdlinker/utils';
  import { columns } from './data';
  import {GlobalModule, handlePreview, usePermission} from '@jdlinker/func';
  import { list } from './service';
  import JTable from '../../../../components/UI/Table/index';
  import { FullPage } from '@jdlinker/ui';
  import { PageContainer } from 'linker-ui-components';
  import { RadioGroup, RadioButton, Card } from 'ant-design-vue';

  const { hasPermission } = usePermission();
  const configRef = ref<Record<string, any>>({});
  const params = ref<Record<string, any>>({});
  const visType = ref('1');
  /**
   * 搜索
   * @param params
   */
  const handleSearch = (e: any) => {
    params.value = e;
  };

  const handleChangeRadio = (e: any) => {
    handleSearch({ type: e?.target?.value ?? e });
  };
  /**
   * 预览
   */
  const handleView = (data: any) => {
    if (data.type === '2') {
      // window.location.origin
      window.open(`${(import.meta as any).env.VITE_THREE_HOST}`, '_blank');
      // window.open(`https://jdlinker.juload.com:2818/screen`, '_blank');
    } else {
      GlobalModule().MODEL_PAGE_ID = 'home';
      handlePreview({ routerId: data.id }, 2);
    }
  };
</script>
<style lang="less" scoped>
  .logo {
    width: 410px;
    height: 236px;
  }
  :deep(.ant-card-actions > li) {
    margin: 5px 0;
  }
</style>
