<template>
  <Dialog v-model="dialogVisible" width="900">
    <div class="p-20 color-fff">
      <div class="fs-18 lh-20">添加到空间</div>
      <div class="flex items-center gap-50">
        <div class="flex-1 flex justify-center">
          <el-image
            :style="{width, height}"
            class="round-8"
            :src="form.url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.4"
            :preview-src-list="srcList"
            show-progress
            fit="cover"
          />
        </div>
        <div class="flex-1">
          <section>
            <div class="mb-8">添加图片到</div>
            <div class="p-4 round-4 bg-333 flex gap-4">
              <div
                class="flex-1 round-4 flex-center py-6 pointer"
                v-for="(tab, index) in tabs"
                :key="index"
                @click="handleTab(index)"
                :class="index === tabIndex ? 'active' : ''"
              >
                {{ tab.label }}
              </div>
            </div>
          </section>
          <section class="mt-20">
            <div class="mb-8">角色名称</div>
            <ElInput v-model="form.name" placeholder="请输入" />
          </section>
          <section class="flex flex-wrap gap-10 mt-10">
            <section class="mt-10 w50">
              <div class="mb-8">角色名称</div>
              <ElInput v-model="form.name" placeholder="请输入" />
            </section>
            <section class="mt-10 w50">
              <div class="mb-8">角色名称</div>
              <ElInput v-model="form.name1" placeholder="请输入"/>
            </section>
            <section class="mt-10 w50">
              <div class="mb-8">角色名称</div>
              <ElInput v-model="form.name2" placeholder="请输入"/>
            </section>
            <section class="mt-10 w50">
              <div class="mb-8">角色名称</div>
              <ElInput v-model="form.name3" placeholder="请输入"/>
            </section>
          </section>
          <ElButton :disabled="disabled" class="mt-120 h-36 w-full gradient-btn">确定</ElButton>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const form = ref({
  url: '',
  type: 1,
  name: '',
  name1: '',
  name2: '',
  name3: '',
});
const tabs = [
  { label: '演员', value: 1 },
  { label: '道具', value: 2 },
  { label: '场景', value: 3 },
];
const width = ref('300px');
const height = ref('300px');
const dialogVisible = ref(false);
const srcList:any = ref([])
// 所有字段都填写完才可点击（type 由 tab 控制，始终有值，跳过）
const disabled = computed(() => {
  const { type, ...rest } = form.value;
  return Object.values(rest).some((v) => !v);
});
const tabIndex = ref(0);
const handleTab = (index: number) => {
  tabIndex.value = index;
  form.value.type = tabs[index].value;
};

const loadImageSize = (url: string) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve({ width: img.naturalWidth, height: img.naturalHeight });
    };
    img.onerror = reject;
    img.src = url;
  });
};

const open = async (node: any) => {
  form.value.url = node.data?.url;
  srcList.value = [node.data?.url];
  const size:any = await loadImageSize(form.value.url);
  width.value = size.width > size.height ? '100%' : 'auto';
  height.value = size.width > size.height ? 'auto' : '400px';
  dialogVisible.value = true;
};
defineExpose({ open });
</script>

<style scoped>
.active {
  background: #ffffffd7 !important;
  color: #333 !important;
}
.w50 {
  flex: 0 0 calc(50% - 5px);
}
.gradient-btn {
  /* 覆盖默认背景，设置为你想要的渐变色 */
  background: linear-gradient(135deg, #448883, #3d8b6b, #afa54c) !important;
  /* 通常需要移除默认边框，让渐变更干净 */
  border: none !important; 
  /* 文字颜色可能需要调整以确保可读性 */
  color: white !important;
}
:deep(.el-input__wrapper) {
  background: #000 !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px #ffffff28;
}
:deep(.is-disabled) {
  opacity: 0.5;
}
</style>
