<script lang="ts" setup>
import PhotoCalendar from '@/pages/tsp-photo/PhotoCalendar.vue'
import PhotoList from '@/pages/tsp-photo/PhotoList.vue'
import { nanoid } from 'nanoid'

const id = nanoid()
const show = ref(false)
const containerElement = ref<HTMLElement | null>(null)

const tspPhotoData = ref<TspPhotoTypes.TspPhotoSearchParam>({})
const header = ref<string>('图片列表')

function closeHandler() {
  containerElement.value!.style!.width = '0'
  containerElement.value!.style!.height = '0'
  tspPhotoData.value = {}
  show.value = false
}

defineExpose({
  open(tspId: string, pointName: string) {
    tspPhotoData.value.tspId = tspId
    tspPhotoData.value.pointName = pointName
    show.value = true
    containerElement.value!.style!.width = '100%'
    containerElement.value!.style!.height = '100%'
  }
})
</script>

<template>
  <div :id="id" ref="containerElement" class="ix_modal-container">
    <IxModal v-model:visible="show" :container="containerElement!"
        :destroy-on-hide="true"
        :header="header" :mask="false"
        :on-before-close="closeHandler"
        type="default" width="100%">
      <div class="photo-panel">
        <PhotoCalendar ref="photoCalendar" v-model:tspPhotoData="tspPhotoData" status="view"/>
        <PhotoList :pointName="tspPhotoData.pointName" :tspId="tspPhotoData.tspId"
            :uploadDate="tspPhotoData.uploadDate" status="view"/>
      </div>
      <template #footer>
        <IxButton mode="primary" @click="closeHandler">关闭</IxButton>
      </template>
    </IxModal>
  </div>
</template>

<style lang="stylus" scoped>
.ix_modal-container {
  position absolute
  top 0
  left 0

  :deep(.ix-modal) {
    width 100%
    height 100%

    .ix-modal-body {
      width 100%
      overflow hidden
      border-top: 1px dashed #E1E5EB;
      border-bottom: 1px dashed #E1E5EB;

      .photo-panel {
        width 100%
        height 100%
        display flex
      }
    }

    .ix-modal-footer {
      justify-content center
    }
  }
}

</style>
