<template>
  <div class="model-header" :class="{disabled: model.error}" @click="$emit('click')">
    <p>{{ model.title }}</p>
    <div class="model-action" @click.stop>
      <ui-input type="checkbox" v-model="show" />
      <ui-icon 
        type="del" 
        ctrl 
        @click="$emit('delete')" 
        v-if="model.type !== ModelType.SWSS && custom.modelsChangeStore" 
      />
    </div>
  </div>
  <div class="model-desc" @click="$emit('click')">
    <p><span>数据来源：</span>{{ ModelTypeDesc[model.type] }}</p>
    <p><span>数据大小：</span>{{ model.size }}</p>
    <p><span>拍摄时间：</span>{{ model.time }}</p>
  </div>
</template>

<script lang="ts" setup>
import { getModelShowVariable, ModelTypeDesc, ModelType } from '@/store'
import { custom } from '@/env'

import type { Model } from '@/store'

type ModelProps = { model: Model }
const props = defineProps<ModelProps>()

type ModelEmits = {
  (e: 'changeSelect', selected: boolean): void
  (e: 'delete'): void
  (e: 'click'): void
}
defineEmits<ModelEmits>();

const show = getModelShowVariable(props.model)

</script>

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