<template>
  <section class="flex-center flex-col relative">
    <div v-if="showNotice" class="flex-align-center justify-between absolute top-0 left-0 right-0 z-1 pt-8 pb-10 px-20" style="background: #f5f7ff">
      <div class="flex-align-center">
        <svg t="1779268717567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="9414" width="18" height="18">
          <path
            d="M416 267.392l-124.544 91.936H192v318.272h81.28l142.72 79.04V267.36z m-142.944 16.544l108.96-80.416c29.952-22.08 69.44-11.456 88.224 23.84 6.4 12 9.76 25.856 9.76 40v489.28c0 41.6-28.64 75.36-64 75.36-9.408 0-18.72-2.432-27.232-7.168l-129.792-71.84H192c-35.36 0-64-33.76-64-75.392V359.36c0-41.632 28.64-75.392 64-75.392h81.056z"
            fill="#5252ff" p-id="9415"></path>
          <path
            d="M739.392 731.136l-19.648 12.768a32 32 0 0 1-44.288-9.408l-1.184-1.824a32 32 0 0 1 9.408-44.288l28.8-18.688a32.32 32.32 0 0 1 3.648-2.048 198.336 198.336 0 0 0 88.384-165.184 198.336 198.336 0 0 0-90.88-166.816 32.448 32.448 0 0 1-2.176-1.12l-30.016-16.64a32 32 0 0 1-12.48-43.52l1.056-1.888a32 32 0 0 1 43.52-12.48l5.312 2.976a264.704 264.704 0 0 1 20.544 468.16z"
            fill="#5252ff" p-id="9416"></path>
          <path
            d="M578.816 612.672a128.128 128.128 0 0 0 0-221.792v221.792z m34.88 53.76l-20.096 13.056a32 32 0 0 1-34.848-53.696l20.064-13.024v-221.76l-19.296-11.584a32 32 0 1 1 32.96-54.848l14.304 8.608a191.264 191.264 0 0 1 15.2 9.216 192.064 192.064 0 0 1-8.256 324z"
            fill="#5252ff" p-id="9417"></path>
        </svg>
        <span class="fs-14 ml-6">公告：视频生成在使用视频素材作为输入时，积分计算逻辑已更新。针对不同的视频输出时长，现设有最低积分消耗限制，详情请参见 视频生成计费说明。</span>
      </div>
      <svg t="1779269053756" class="icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="10649" width="10" height="10" @click="showNotice = false">
        <path
          d="M886.784 746.496q29.696 30.72 43.52 56.32t-4.608 58.368q-4.096 6.144-11.264 14.848t-14.848 16.896-15.36 14.848-12.8 9.728q-25.6 15.36-60.416 8.192t-62.464-34.816l-43.008-43.008-57.344-57.344-67.584-67.584-73.728-73.728-131.072 131.072q-60.416 60.416-98.304 99.328-38.912 38.912-77.312 48.128t-68.096-17.408l-7.168-7.168-11.264-11.264-11.264-11.264q-6.144-6.144-7.168-8.192-11.264-14.336-13.312-29.184t2.56-29.184 13.824-27.648 20.48-24.576q9.216-8.192 32.768-30.72l55.296-57.344q33.792-32.768 75.264-73.728t86.528-86.016q-49.152-49.152-93.696-93.184t-79.872-78.848-57.856-56.832-27.648-27.136q-26.624-26.624-27.136-52.736t17.92-52.736q8.192-10.24 23.552-24.064t21.504-17.92q30.72-20.48 55.296-17.92t49.152 28.16l31.744 31.744q23.552 23.552 58.368 57.344t78.336 76.288 90.624 88.576q38.912-38.912 76.288-75.776t69.632-69.12 58.368-57.856 43.52-43.008q24.576-23.552 53.248-31.232t55.296 12.8q1.024 1.024 6.656 5.12t11.264 9.216 10.752 9.728 7.168 5.632q27.648 26.624 27.136 57.856t-27.136 57.856q-18.432 18.432-45.568 46.08t-60.416 60.416-70.144 69.632l-77.824 77.824q37.888 36.864 74.24 72.192t67.584 66.048 56.32 56.32 41.472 41.984z"
          p-id="10650"></path>
      </svg>
    </div>
    <div class="flex-center fs-40 pt-82">翻开剧本，创作<span class="c-5337C7">精品短剧</span></div>



    <section class="card mt-44 bg-fff rounded-20 p-12">
      <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        directory multiple :on-change="handleChange" :show-file-list="false">
        <img src="@/static/imgs/fileupload.png" class="w-120" alt="">
        <div class="el-upload__text mt-24">
          点击或拖拽剧本文件到这里，支持 doc、docx、txt、pdf、md，大小不超过 20M;也可以先跳过，下一页手动输入刷本
        </div>
      </el-upload>
      <section class="mt-12">
        <el-dropdown>
          <el-button plain class="nav-button w-102 gap-10">
            <div class="flex-between-center">
              <div class="flex-align-center">
                <el-icon size="18">
                  <SwitchFilled />
                </el-icon>
                <span class="mt-2 fw-500">{{ aspectRatio }}</span>
              </div>
              <el-icon size="12">
                <ArrowDownBold />
              </el-icon>
            </div>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu class="w-140">
              <div class="text-999 ml-16 py-6">比例</div>
              <el-dropdown-item @click="aspectRatio = '16:9'">
                <div class="w-20 mr-10 flex-center">
                  <div class="w-20 h-12 rounded-4 border-1"></div>
                </div> <span class="fw-bold fs-12 text-333">16:9</span>
              </el-dropdown-item>
              <el-dropdown-item @click="aspectRatio = '4:3'">
                <div class="w-20 mr-10 flex-center">
                  <div class="w-20 h-16 rounded-4 border-1"></div>
                </div> <span class="fw-bold fs-12 text-333">4:3</span>
              </el-dropdown-item>
              <el-dropdown-item @click="aspectRatio = '3:4'">
                <div class="w-20 mr-10 flex-center">
                  <div class="w-16 h-20 rounded-4 border-1"></div>
                </div> <span class="fw-bold fs-12 text-333">3:4</span>
              </el-dropdown-item>
              <el-dropdown-item @click="aspectRatio = '9:16'">
                <div class="w-20 mr-10 flex-center">
                  <div class="w-12 h-20 rounded-4 border-1"></div>
                </div> <span class="fw-bold fs-12 text-333">9:16</span>
              </el-dropdown-item>
              <el-dropdown-item @click="aspectRatio = '21:9'">
                <div class="w-20 mr-10 flex-center">
                  <div class="w-20 h-9 rounded-4 border-1"></div>
                </div> <span class="fw-bold fs-12 text-333">21:9</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown class="ml-8">
          <el-button plain class="nav-button w-90 gap-10">
            <div class="flex-between-center">
              <div class="flex">
                <span class="mt-2 fw-500">{{ resolvingPower }}</span>
              </div>
              <el-icon size="12">
                <ArrowDownBold />
              </el-icon>
            </div>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu class="w-120">
              <div class="text-999 ml-16 py-6">分辨率</div>
              <el-dropdown-item @click="resolvingPower = '720p'">
                <span class="fw-bold fs-12 text-333">720p</span>
              </el-dropdown-item>
              <el-dropdown-item @click="resolvingPower = '1080p'">
                <span class="fw-bold fs-12 text-333">1080p</span>
              </el-dropdown-item>
              <el-dropdown-item @click="resolvingPower = '480p'">
                <span class="fw-bold fs-12 text-333">480p</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown class="ml-8">
          <el-button plain class="nav-button w-140 gap-10">
            <div class="flex-between-center">
              <div class="flex-align-center">
                <div class="bg-success rounded-4 w-20 h-20 min-w-20 mr-6"></div>
                <span class="mt-2 fw-500">{{ videoStyle }}</span>
              </div>
              <el-icon size="12">
                <ArrowDownBold />
              </el-icon>
            </div>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu class="w-140">
              <el-dropdown-item @click="videoStyle = '真人短剧视觉'">
                <span class="fw-bold fs-12 text-333">真人短剧视觉</span>
              </el-dropdown-item>
              <el-dropdown-item @click="videoStyle = '2D日漫'">
                <span class="fw-bold fs-12 text-333">2D日漫</span>
              </el-dropdown-item>
              <el-dropdown-item @click="videoStyle = '2D韩漫都市'">
                <span class="fw-bold fs-12 text-333">2D韩漫都市</span>
              </el-dropdown-item>
              <el-dropdown-item @click="videoStyle = '2D国漫'">
                <span class="fw-bold fs-12 text-333">2D国漫</span>
              </el-dropdown-item>
              <el-dropdown-item @click="videoStyle = '3D国风仙侠'">
                <span class="fw-bold fs-12 text-333">3D国风仙侠</span>
              </el-dropdown-item>
              <el-dropdown-item @click="videoStyle = 'CG电影感'">
                <span class="fw-bold fs-12 text-333">CG电影感</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </section>
    </section>
    <section class="mt-62">
      <div class="btnjb w-200 h-40 rounded-8 flex-center gap-4 text-fff cursor-pointer" @click="gopto">
        <img src="@/static/imgs/icon1.png" class="w-18 h-14 mt-2" alt="">
        <span>创建短剧项目</span>
      </div>
    </section>

  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import type { UploadFile, UploadFiles } from 'element-plus'
import { ArrowDownBold, SwitchFilled } from '@element-plus/icons-vue'


const router = useRouter();
const aspectRatio = ref('16:9');
const resolvingPower = ref('720p');
const videoStyle = ref('真人短剧视觉');
const showNotice = ref(true);

const gopto = () => {
  router.push('/about');
}

const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

</script>

<style scoped lang="scss">
.c-5337C7 {
  color: #5337C7;
}

.border-1 {
  border: 2px solid #333;
}

.card {
  width: 800px;

  .upload-demo {
    background-color: #F8F9FC;
    border: 1px dashed #ddd;
    border-radius: 16px;
    transition: all 0.2s;

    &:hover {
      border-color: #5337C7;
    }

    :deep(.el-upload-dragger) {
      background-color: transparent;
      border: none;
    }

    .el-upload__text {
      color: #00000063;
    }
  }
}

.btnjb {
  background: linear-gradient(to right, #2A5DF6, #7227F5);
}

.nav-link,
.nav-button {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  background: none;
  border: 1px solid #E6EAED;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  padding-left: 7px;
  padding-right: 7px;
  height: 32px;

  :deep(span) {
    width: 100% !important;
    display: block !important;
  }
}
</style>
