<template>
  <div @click="!model.error && $emit('click', 'fuse')" class="sign-layout" :class="{ disabled: model.error }">
    <div class="model-header">
      <p>{{ model.title }}</p>
      <div class="model-action">
        <ui-icon ctrl type="show_roaming_n" @click.stop="$emit('click', 'pano')" class="icon"
          v-if="getSceneModel(props.model)?.supportPano()" />
        <ui-input type="checkbox" v-model="show" @click.stop :class="{
    disabled: model.error || custom.showMode === 'pano',
  }" />
        <ui-icon v-if="custom.modelsChangeStore" type="del" ctrl @click="$emit('delete')" />
      </div>
    </div>
    <div class="model-desc" v-if="active">
      <p><span>数据来源：</span>{{ SceneTypeDesc[model.type] }}</p>
      <p v-if="model.type !== SceneType.SWSS"><span>数据大小：</span>{{ model.size }}</p>
      <p><span>拍摄时间：</span>{{ model.time }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getFuseModelShowVariable, SceneTypeDesc, SceneType } from "@/store";
import { custom } from "@/env";
import { getSceneModel } from "@/sdk";

import type { FuseModel } from "@/store";
import { computed } from "vue";
import { currentModel, fuseModel } from "@/model";

type ModelProps = { model: FuseModel; canChange?: boolean };
const props = defineProps<ModelProps>();

const active = computed(
  () => custom.currentModel === props.model && currentModel.value === fuseModel
);

type ModelEmits = {
  (e: "changeSelect", selected: boolean): void;
  (e: "delete"): void;
  (e: "click", mode: "pano" | "fuse"): void;
};
defineEmits<ModelEmits>();

const show = getFuseModelShowVariable(props.model);
</script>

<style lang="scss" scoped src="./style.scss"></style>
