<template>
  <section class="pt-30 box">
    <div v-if="isShowtip" class="hint flex-between-center mx-64 px-20 py-10">
      <div class="flex-align-center">
        <svg t="1779351526653" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="6897" width="16" height="16">
          <path
            d="M625.92 870.101333H398.08a7.637333 7.637333 0 0 0-7.637333 7.594667v30.506667c0 16.853333 13.610667 30.464 30.421333 30.464h182.314667c16.810667 0 30.378667-13.653333 30.378666-30.464v-30.506667a7.637333 7.637333 0 0 0-7.594666-7.594667zM512 85.333333C340.053333 85.333333 200.533333 225.237333 200.533333 397.696a312.448 312.448 0 0 0 155.733334 270.592v110.378667c0 16.853333 13.568 30.464 30.378666 30.464h250.709334c16.810667 0 30.378667-13.610667 30.378666-30.464v-110.378667A312.448 312.448 0 0 0 823.466667 397.653333C823.466667 225.28 683.946667 85.333333 512 85.333333z m121.472 523.605334l-34.133333 19.84v111.786666H424.704v-111.786666l-34.133333-19.84a243.712 243.712 0 0 1-121.6-211.2c0-134.698667 108.8-243.84 243.072-243.84 134.272 0 243.114667 109.141333 243.114666 243.797333 0 88.106667-46.933333 167.936-121.642666 211.242667z"
            fill="#5252ff" p-id="6898"></path>
        </svg>
        <span class="ml-4">请确保角色、场景及道具已全部生成。点击角色图片可配置【变装】，未配置的变装将导致分镜无参考图可用，直接影响视频准确性。</span>
      </div>
      <el-icon @click="isShowtip = false">
        <CloseBold />
      </el-icon>
    </div>

    <section style="padding-bottom: 100px;">
      <el-affix :offset="120">
        <div class="flex gap-20 fs-16 pt-30 pb-10 pl-64 bg-F8F9FA">
          <a v-for="(item, index) in tabs" :key="index" class="cursor-pointer aa"
            :class="indexTab === index ? 'active' : ''" :href="'#' + item" @click="changeTab(index)">{{ item }}</a>
        </div>
      </el-affix>

      <!-- 角色 -->
      <section class="mt-50 px-64" id="角色">
        <div class="flex-between-center">
          <div class="flex-align-center gap-10">
            <span class="fs-16">角色</span>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">总计</span>
              <span class="ml-6">2</span>
            </div>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">已完成</span>
              <span class="ml-6">2</span>
            </div>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">生成中</span>
              <span class="ml-6">2</span>
            </div>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">生成失败</span>
              <span class="ml-6">0</span>
            </div>
          </div>
          <div>
            <el-button text :icon="Plus" class="hover">新增角色</el-button>
            <el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
          </div>
        </div>
        <div class="flex flex-wrap gap-30 mt-30">
          <div v-for="(item, index) in 5" :key="index" class="child cursor-pointer rounded-6 overflow-hidden">
            <div class="bili relative">
              <img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
                class="w-b100 h-b100 img rounded-6" alt="">
              <div class="absolute top-4 right-4 h-44 flex-center gap-2 rounded-16 bg-edit px-10">
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-popover content="Ai生成主形象" placement="top" :width="100">
                    <template #reference>
                      <el-icon color="#fff">
                        <MagicStick />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-popover content="从角色库选择" placement="top" :width="100">
                    <template #reference>
                      <el-icon color="#fff">
                        <FolderAdd />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-popover content="本地上传" placement="top" :width="100">
                    <template #reference>
                      <el-icon color="#fff">
                        <Download />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-dropdown placement="bottom-start">
                    <el-icon color="#fff">
                      <MoreFilled />
                    </el-icon>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item><el-icon>
                            <Delete />
                          </el-icon>删除角色</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
            <div class="mt-10">
              <div>林霞</div>
              <div class=" mt-4 text-888 fs-12 text-over-2"><span>1个形象</span>
                <div class="line-r"></div>便利店店员；细心、温和、善于观察、言辞富有哲理
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 场景 -->
      <section class="mt-50 px-64" id="场景">
        <div class="flex-between-center">
          <div class="flex-align-center gap-10">
            <span class="fs-16">场景</span>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">总计</span>
              <span class="ml-6">2</span>
            </div>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">已完成</span>
              <span class="ml-6">2</span>
            </div>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">生成中</span>
              <span class="ml-6">2</span>
            </div>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">生成失败</span>
              <span class="ml-6">0</span>
            </div>
          </div>
          <div>
            <el-button text :icon="Plus" class="hover">新增场景</el-button>
            <el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
          </div>
        </div>
        <div class="flex flex-wrap gap-30 mt-30">
          <div v-for="(item, index) in 5" :key="index" class="child cursor-pointer rounded-6 overflow-hidden">
            <div class="bili relative">
              <img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
                class="w-b100 h-b100 img rounded-6" alt="">
              <div class="absolute top-4 right-4 h-44 flex-center gap-2 rounded-16 bg-edit px-10">
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-popover content="Ai生成主场景" placement="top" :width="100">
                    <template #reference>
                      <el-icon color="#fff">
                        <MagicStick />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-popover content="从场景库选择" placement="top" :width="100">
                    <template #reference>
                      <el-icon color="#fff">
                        <FolderAdd />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-popover content="本地上传" placement="top" :width="100">
                    <template #reference>
                      <el-icon color="#fff">
                        <Download />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-dropdown placement="bottom-start">
                    <el-icon color="#fff">
                      <MoreFilled />
                    </el-icon>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item><el-icon>
                            <Delete />
                          </el-icon>删除场景</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
            <div class="mt-10">
              <div>陵城便利店</div>
              <div class=" mt-4 text-888 fs-12 text-over-2"><span>1个形象</span>
                <div class="line-r"></div>便利店店员；细心、温和、善于观察、言辞富有哲理便利店店员；细心、
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 道具 -->
      <section class="mt-50 px-64" id="道具">
        <div class="flex-between-center">
          <div class="flex-align-center gap-10">
            <span class="fs-16">道具</span>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">总计</span>
              <span class="ml-6">2</span>
            </div>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">已完成</span>
              <span class="ml-6">2</span>
            </div>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">生成中</span>
              <span class="ml-6">2</span>
            </div>
            <div class="leisiline px-14 py-6 rounded-6">
              <span class="fs-12 text-888">生成失败</span>
              <span class="ml-6">0</span>
            </div>
          </div>
          <div>
            <el-button text :icon="Plus" class="hover">新增道具</el-button>
            <el-button text :icon="DocumentCopy" class="hover">批量生成</el-button>
          </div>
        </div>
        <div class="flex flex-wrap gap-30 mt-30">
          <div v-for="(item, index) in 7" :key="index" class="child cursor-pointer rounded-6 overflow-hidden">
            <div class="bili relative">
              <img src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png"
                class="w-b100 h-b100 img rounded-6" alt="">
              <div class="absolute top-4 right-4 h-44 flex-center gap-2 rounded-16 bg-edit px-10">
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-popover content="Ai生成主道具" placement="top" :width="100">
                    <template #reference>
                      <el-icon color="#fff">
                        <MagicStick />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-popover content="从道具库选择" placement="top" :width="100">
                    <template #reference>
                      <el-icon color="#fff">
                        <FolderAdd />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-popover content="本地上传" placement="top" :width="100">
                    <template #reference>
                      <el-icon color="#fff">
                        <Download />
                      </el-icon>
                    </template>
                  </el-popover>
                </div>
                <div class="w-30 h-30 rounded-10 flex-center hover2">
                  <el-dropdown placement="bottom-start">
                    <el-icon color="#fff">
                      <MoreFilled />
                    </el-icon>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item><el-icon>
                            <Delete />
                          </el-icon>删除道具</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
            <div class="mt-10">
              <div>陵城便利店</div>
              <div class=" mt-4 text-888 fs-12 text-over-2"><span>1个形象</span>
                <div class="line-r"></div>便利店店员；细心、温和、善于观察、言辞富有哲理便利店店员；细心、
              </div>
            </div>
          </div>
        </div>
      </section>
    </section>
    <div class="fixed bottom-30 btnfooter w-140 h-54 flex-center rounded-200 text-fff cursor-pointer"
      @click="$emit('next', 2)">
      <img src="@/static/imgs/icon1.png" alt="">
      <span class="ml-10">进入下一步</span>
    </div>
  </section>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { CloseBold, Plus, DocumentCopy, MagicStick, FolderAdd, Download, MoreFilled, Delete } from '@element-plus/icons-vue'




const isShowtip = ref(true)
const indexTab = ref(0)
const tabs = ref(['角色', '场景', '道具'])
const changeTab = ref((index: number) => {
  indexTab.value = index
})

</script>
<style lang="scss" scoped>
.hint {
  border: 1px solid #e5e7eb;
  background-color: #f5f7ff;
  border-radius: 8px;
  color: #5252ff;
}
.bg-F8F9FA {
  background-color: #f8f9fa;
}

.aa {
  text-decoration: none;
  color: #888;
  outline: none;

  &.active {
    color: #333;
  }
}

.leisiline {
  border: 1px solid #eee;
}

.line-r {
  height: 12px;
  width: 1px;
  background: #ddd;
  display: inline-block;
  margin: 0 8px;
}

.img {
  object-fit: cover;
}

.hover {
  color: #333;

  &:hover {
    background-color: #e9e9ec !important;
  }
}

.bili {
  aspect-ratio: 2 / 1;

  .bg-edit {
    background-color: rgba(42, 42, 46, 0.7);
    opacity: 0;
    transition: all 0.3s;

    .hover2 {
      &:hover {
        background-color: #ffffff20 !important;
      }
    }
  }

  &:hover {
    .bg-edit {
      opacity: 1;
    }
  }
}

.box {
  min-width: 1280px;
}

.child {
  flex: 0 0 calc(25% - 24px);
}

.btnfooter {
  left: 50%;
  transform: translateX(-50%);
  background: #000;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    /* top/right/bottom/left 都是 0 的简写 */
    border-radius: 200px;
    padding: 1px;
    /* 这就是边框的宽度 */
    background: linear-gradient(180deg, #4A21C3, #FF66CF, #00F0E4);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    pointer-events: none;
    /* 让伪元素不干扰点击事件 */
  }
}
</style>