<template>
  <section class="box rounded-16 p-10" style="min-width: 1110px;">
    <div class="flex-align-center justify-between">
      <div class="flex-align-center gap-4">
        <el-icon color="#333" size="12">
          <Plus />
        </el-icon>
        <span class="fs-12">分镜1</span>
        <span class="fs-10 py-2 px-4 rounded-4 bg-e3e9ff">ID</span>
        <div class="flex-align-center ml-10 bg-f4f6ff py-6 px-14 rounded-8 btnsborder gap-4">
          <el-icon color="#5252ff" size="12">
            <Plus />
          </el-icon>
          <span class="fs-12">全能参考生视频</span>
        </div>
      </div>
      <div class="">
        <el-button text :icon="Plus" circle />
        <el-button text :icon="CopyDocument" circle />
        <el-button text :icon="Delete" circle />
      </div>
    </div>
    <div class="flex gap-10 h-b100">
      <section class="w-400 p-14 bg-fff rounded-16 mt-10">
        <div>分镜信息</div>
        <div class="h-548 hide-scrollbar">
          <div class="mt-10 text-666 mb-6">分镜描述</div>
          <el-input v-model="fenjDesc" placeholder="请输入分镜描述" type="textarea" clearable />
          <div class="mt-20">
            <div class="flex-between-center">
              <span>出镜角色</span>
              <el-button text :icon="Plus" circle />
            </div>
            <div class="mt-6">
              <div v-for="(item, index) in 2" :key="index" class="flex-align-center gap-4 mt-10">
                <img class="h-40 w-40 rounded-8"
                  src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
                <el-select v-model="aiTypeVal" placeholder="未配置角色" style="width: 160px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="aiTypeVal" placeholder="未配置音色" style="width: 120px;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
              </div>
              <Empty v-if="1 == 2" text="暂未选择出镜角色" />
            </div>
          </div>
          <div class="mt-20">
            <div class="flex-between-center">
              <span>分镜场景</span>
              <el-button text :icon="Plus" circle />
            </div>
            <div class="flex gap-10 flex-wrap mt-10">
              <div v-for="(item, index) in 4" :key="index" class="child mb-6">
                <img class="rounded-8 w-b100 h-100"
                  src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
                <div class="flex-align-center gap-4 mt-4">
                  <el-select v-model="aiTypeVal" placeholder="未配置角色">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
                </div>
              </div>
              <Empty v-if="1 == 2" text="暂未选择分镜场景" />
            </div>
          </div>
          <div class="mt-20">
            <div class="flex-between-center">
              <span>场景道具</span>
              <el-button text :icon="Plus" circle />
            </div>
            <div class="mt-6">
              <div v-for="(item, index) in 2" :key="index" class="flex-align-center gap-4 mt-10">
                <img class="h-40 w-40 rounded-8"
                  src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
                <el-select v-model="aiTypeVal" placeholder="未配置角色">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button :icon="MoreFilled" style="padding-left: 8px;padding-right: 8px;border-radius: 8px;" />
              </div>
              <Empty v-if="1 == 2" text="暂未选择场景道具" />
            </div>
          </div>
        </div>
      </section>
      <section class="flex-1 flex flex-col bg-fff rounded-16 p-10 mt-10 right">
        <div class="flex-between-center">
          <span>分镜视频生成</span>
          <el-icon color="#888" size="12">
            <DocumentCopy />
          </el-icon>
        </div>
        <div class="flex h-b100 mt-10 gap-10">
          <div class="flex-3 flex flex-col rounded-16 p-10 card1">
            <div class="flex gap-4">
              <div v-if="fileList.length > 0" class="relative w-40 h-40 rounded-4 overflow-hidden imgbox" v-for="(item, index) in fileList" :key="index" >
                <img :src="item.url" class="w-b100 h-b100" />
                <el-icon class="absolute right-2 top-2 del cursor-pointer" @click="delImg(index)"><CircleCloseFilled /></el-icon>
              </div>
              <el-upload
                v-model:file-list="fileList"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                list-type="picture-card"
                class="custom-upload"
                :show-file-list="false"
              >
                <el-icon size="18"><Plus /></el-icon>
              </el-upload>
            </div>
            <div class="flex-1"></div>
            <div class="">不阿斯卡斯卡</div>
          </div>
          <div class="flex-2 flex flex-col rounded-12 card2 overflow-hidden" style="background: #fafbfd">
            <video src="@/static/imgs/mp4.mp4" class="w-b100 bg-2b303a flex-1" controls></video>
            <div class="flex-center gap-4 px-20 mt-10">
              <div v-for="(item, index) in 2" :key="index" class="fjitem flex rounded-8 cursor-pointer" @click="changeVideo(item, index)" :class="videoIndex === index ? 'active': ''">
                <img class="h-36 w-50 rounded-6"
                  src="https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </section>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Plus, DocumentCopy, CopyDocument,CircleCloseFilled, MoreFilled, Delete } from '@element-plus/icons-vue'
import Empty from './Empty.vue';

const fenjDesc = ref('')
const aiTypeVal = ref('')
const options = [
  {
    value: '1',
    label: '林霞',
  }
]
const fileList = ref([
  {
    name: 'food.jpeg',
    url: 'https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png',
  },
  {
    name: 'food1.jpeg',
    url: 'https://res.volccdn.com/obj/volc-console-fe/dramart/static/image/PIC3.22e42366.png',
  }
])

const delImg = (index: number) => {
  fileList.value.splice(index, 1)
}

const videoIndex = ref(0)
const changeVideo = (item: any, index: number) => {
  videoIndex.value = index
}
</script>
<style lang="scss" scoped>
.box {
  border: 1px solid #ddd;

  .bg-f4f6ff {
    background-color: #f4f6ff;
  }

  .bg-e3e9ff {
    background-color: #e3e9ff;
  }

  .btnsborder {
    border: 1px solid #eeeeff;
  }
  .child {
    flex: 0 0 calc(50% - 5px);
  }

  .h-548 {
    height: 548px;
    overflow-y: auto;
  }

  .right {
    .card1 {
      border: 1px solid #5252ff;
      box-shadow: 0px 0px 3px 1px rgba(177, 177, 255, 1.3);
    }

    .fjitem {
      border: 1px solid #ddd;
      padding: 1px;
      &.active {
        border: 1px solid #5252ff;
      }
    }
  }
  .imgbox {
    .del {
      display: none;
    }
    &:hover{
      .del{
        display: inline-block;
      }
    }
  }
}

.bg-2b303a {
  background-color: #2b303a;
}

:deep(.el-select__wrapper) {
  border-radius: 8px;
}

/* 控制上传卡片的大小 */
.custom-upload :deep(.el-upload--picture-card) {
  width: 40px;
  height: 40px;
  --el-upload-picture-card-size: 40px; /* 修改 Element Plus 变量 */
}

</style>