<template>
  <a-descriptions title="企业相册" :bordered="false">
    <template #extra>
      <a @click="openEdit">编辑</a>
    </template>
  </a-descriptions>
  <div class="content">
    <template v-if="data.companyType === 'web'">
      <a-image-preview-group>
        <a-space :size="20" v-for="(item, index) in images" :key="index">
          <a-image :width="360" :src="item.url" />
        </a-space>
      </a-image-preview-group>
    </template>
    <template v-else>
      <a-image-preview-group>
        <a-space :size="20" v-for="(item, index) in images" :key="index">
          <a-image :width="200" :src="item.url" />
        </a-space>
      </a-image-preview-group>
    </template>
  </div>
  <!-- 编辑弹窗 -->
  <CompanyPhotoEdit v-model:visible="showEdit" :data="data" @done="reload" />
</template>
<script lang="ts" setup>
  import { Company } from '@/api/oa/company/model';
  import { ref } from 'vue';
  import CompanyPhotoEdit from './company-photo-edit.vue';

  defineProps<{
    visible: boolean;
    data: Company;
    images: any[];
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
  }>();

  // 是否显示编辑弹窗
  const showEdit = ref(false);

  /* 打开编辑弹窗 */
  const openEdit = () => {
    showEdit.value = true;
  };

  const reload = () => {
    emit('done');
  };
</script>
