<template>
  <div class="content">
    <SelectFile
      :placeholder="`请选择图片`"
      :data="images"
      :limit="9"
      :width="width"
      :height="height"
      @done="chooseFile"
      @del="onDeleteItem"
    />
  </div>
</template>
<script lang="ts" setup>
import {Project} from '@/api/project/project/model';
import {ref, watch} from 'vue';
import {message} from 'ant-design-vue';
import {FileRecord} from '@/api/system/file/model';
import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
import {updateProject} from "@/api/project/project";

const props = defineProps<{
  appId: any;
  data: Project;
  images: any[];
}>();

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


const images = ref<ItemType[]>([]);
const width = ref<number>(100)
const height = ref<number>(100)

const chooseFile = (data: FileRecord) => {
  console.log(data)
  images.value.push({
    uid: data.id,
    url: data.url,
    status: 'done'
  });
  message.success('保存成功');
  update()
};

const onDeleteItem = (index: number) => {
  images.value.splice(index, 1);
  message.success('删除成功');
  update()
};

const update = () => {
  updateProject({appId: props.appId, images: JSON.stringify(images.value)}).then(() => {})
}

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

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

watch(
  () => props.appId,
  (appId) => {
    if (appId) {
      images.value = [];
      if (props.data.appType == 'all') {
        width.value = 160
        height.value = 284
      }
      console.log(props.appId,'222')
      if (props.data.images) {
        const arr = JSON.parse(props.data.images);
        console.log(arr,'ssss')
        arr.map((d, i) => {
          images.value.push({
            uid: d.uid,
            url: d.url,
            status: 'done'
          });
        });
      }
    }
  },
  {immediate: true}
);
</script>
