<template>
  <div class="modal-content" id="checkiinformation-show-modal">
    <a-descriptions title="巡查信息详情" bordered :column="3" style="margin-bottom: 20px;">
      <a-descriptions-item
        v-for="item in showInfoColumn"
          :label="item.label"
          :span="item.span? item.span: 1"
        >
          <template v-if="item.key == 'image'">
            <a-image-preview-group
              :preview="{
                getContainer: getContainer,
              }"
            >
              <template v-for="(imageItem, imageIndex) in props.modalData[item.key]" :key="imageIndex">
                <a-image
                  v-if="imageItem.image"
                  width="100px"
                  height="100px"
                  :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem.image}`"
                  :preview="{
                    getContainer,
                  }"
                ></a-image>
              </template>
            </a-image-preview-group>
          </template>
          <template v-else>{{ props.modalData[item.key] }}</template>
        </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { getAppEnvConfig } from '@/utils/env';

const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
const props = defineProps(['modalData'])
const emits = defineEmits(['closeModal'])

const showInfoColumn = [
  { label: '巡查点', key: 'pointName' },
  { label: '巡查状态', key: 'statusName' },
  { label: '巡查人员', key: 'userName' },
  { label: '巡查时间', key: 'punchTime' },
  { label: '经度', key: 'lng' },
  { label: '纬度', key: 'lat' },
  { label: '现场照片', key: 'image', span: 3 },
]

onMounted(() => {
})

const cancel = () => {
  emits('closeModal')
}
const getContainer = () => {
  return document.getElementById('checkiinformation-show-modal');
};
</script>

<style lang="scss" scoped>
.modal-content{
  padding: 20px;
  max-height: calc(100vh - 132px);
  margin-bottom: 15px;
  overflow: auto;
  .content-form{
    margin-bottom: 20px;
  }
}
.button-div{
  display: flex;
  justify-content: end;
  padding-left: 20px;
  padding-right: 20px;
  .cancel-button{
    margin-right: 10px;
  }
}
</style>
