<template>
  <div class="page flex justify-around">
    <!-- 左侧栏 -->
    <div class="left">
      <!-- 顶部 -->
      <!-- 选中AiFace -->
      <div class="left-top" v-show="showUploadBtn == 1">
        <el-row class="justify-between">
          <!-- title框 -->
          <div
            v-show="!submitImgBtn"
            class="flex justify-between"
            style="width: 300px"
          >
            <el-input
              maxlength="15"
              v-model="title"
              :placeholder="$t('createVideo.typeTitle')"
            />
            <el-icon class="icon-edit"><i-ep-edit /></el-icon>
          </div>
        </el-row>
        <!-- 中间展示大图 -->
        <div class="bigImg inmiddle">
          <img :src="imgUrl" alt="" class="inmiddle" />
        </div>
      </div>
      <!-- 选中需要上传的图片前 -->
      <div class="left-top" v-show="showUploadBtn == 2">
        <!-- 中间展示大图 -->
        <div class="noImg">
          <my-loading
            style="margin-top: 150px"
            :isLoading="compressionImgLoad"
          ></my-loading>
          <div v-if="!compressionImgLoad" class="trueImg inmiddle">
            <div class="imgBox">
              <img src="../../assets/img/trueImg.png" alt="" />
            </div>
            <div class="icon">✔</div>
          </div>
          <div v-if="!compressionImgLoad" class="upload inmiddle">
            +
            <input accept="image/*" type="file" @change="lookImg" />
          </div>
          <div v-if="!compressionImgLoad" class="falseImg inmiddle">
            <div>
              <div class="imgBox">
                <img src="../../assets/img/false1.png" alt="" />
              </div>
              <div class="icon">×</div>
            </div>
            <div>
              <div class="imgBox">
                <img src="../../assets/img/false2.png" alt="" />
              </div>
              <div class="icon">×</div>
            </div>
            <div>
              <div class="imgBox">
                <img src="../../assets/img/false3.png" alt="" />
              </div>
              <div class="icon">×</div>
            </div>
          </div>
        </div>
      </div>
      <!-- loading -->
      <div class="left-top" v-show="showUploadBtn == 3">
        <!-- 中间展示大图 -->
        <div class="noImg">
          <my-loading
            style="margin-top: 150px"
            :isLoading="compressionImgLoad"
          ></my-loading>
          <div v-if="!compressionImgLoad" class="trueImg inmiddle">
            <div class="imgBox">
              <img src="../../assets/img/trueImg.png" alt="" />
            </div>
            <div class="icon">✔</div>
          </div>
          <div v-if="!compressionImgLoad" class="upload inmiddle">
            +
            <input accept="image/*" type="file" @change="lookImg" />
          </div>
          <div v-if="!compressionImgLoad" class="falseImg inmiddle">
            <div>
              <div class="imgBox">
                <img src="../../assets/img/false1.png" alt="" />
              </div>
              <div class="icon">×</div>
            </div>
            <div>
              <div class="imgBox">
                <img src="../../assets/img/false2.png" alt="" />
              </div>
              <div class="icon">×</div>
            </div>
            <div>
              <div class="imgBox">
                <img src="../../assets/img/false3.png" alt="" />
              </div>
              <div class="icon">×</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 选中需要上传的图片后 -->
      <div class="left-top" v-show="showUploadBtn == 4">
        <el-row style="display: flex; justify-content: flex-end">
          <!-- 上传按钮 废弃了-->
          <!-- <div v-if="false" class="btnBox" v-show="submitImgBtn"> -->
          <div v-if="false" class="btnBox">
            <button class="uploadBtn">
              {{ $t("createVideo.reselect") }}
              <input accept="image/*" type="file" @change="lookImg" />
            </button>
            <button class="uploadBtn" @click="changeFile">
              {{ $t("createVideo.sureUpload") }}
            </button>
          </div>
        </el-row>
        <!-- 中间展示大图 -->
        <div class="bigImg inmiddle">
          <img :src="imgUrl" alt="" class="inmiddle" />
        </div>
      </div>
      <!-- AI生成图片展示区 -->
      <div class="left-top" v-show="showUploadBtn == 5">
        <div class="editAiPicBox">
          <div class="edit">
            <div class="TagBox"></div>
          </div>
          <div class="AIpicBox">
            <div class="picBox">
              <img src="../../assets/img/trueImg.png" alt="" />
            </div>
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <div class="left-bottom">
        <!-- tab栏 -->
        <div class="tab flex">
          <div
            class="pointer"
            :class="showFace == 0 ? 'tabAvtive' : ''"
            @click="chooSystemImg"
          >
            {{ $t("createVideo.availableMould") }}
          </div>
          <div
            v-if="AccessToken"
            class="pointer"
            :class="showFace == 1 ? 'tabAvtive' : ''"
            @click="chooseMyImg"
          >
            {{ $t("createVideo.personalWarehouse") }}
          </div>
          <div
            v-if="AccessToken"
            class="pointer aiPicTab"
            :class="showFace == 2 ? 'tabAvtive' : ''"
            @click="chooseAiPic"
          >
            <div class="subscript subscript1">
              <span>AI &nbsp;</span>
              <img src="../../assets/img/star.png" alt="" />
            </div>
            {{ $t("createVideo.Aipicture") }}
          </div>
        </div>
        <!-- 系统相册 -->
        <div
          class="faceList"
          v-if="showFace == 0"
          v-infinite-scroll="loadMoreAiFaceSystem"
          :infinite-scroll-disabled="overLoadSystem"
        >
          <!-- 上传图片组件 -->
          <div v-if="showFace == 1" class="faceItem" @click="clickAddBtn">
            <span class="uploadImg">+ </span>
          </div>
          <my-loading :isLoading="feceItemLoading"></my-loading>
          <!-- face列表 -->
          <div
            :class="faceItemActive == item.id ? 'faceItemActive' : ''"
            class="faceItem pointer"
            @click="setImgUrl(item.material, item.id)"
            v-for="item in AiFaceList"
            :key="item.id"
          >
            <div class="imgBox">
              <img :src="item.material" alt="" />
            </div>
            s
          </div>
        </div>
        <!-- 个人相册 -->
        <div
          class="faceList"
          v-if="showFace == 1"
          v-infinite-scroll="loadMoreAiFaceUser"
          :infinite-scroll-disabled="overLoadUser"
        >
          <!-- 上传图片组件 -->
          <div v-if="showFace == 1" class="faceItem" @click="clickAddBtn">
            <span class="uploadImg">+ </span>
          </div>
          <my-loading :isLoading="feceItemLoading2"></my-loading>
          <!-- face列表 -->
          <div
            :class="faceItemActive == item.id ? 'faceItemActive' : ''"
            class="faceItem pointer"
            @click="setImgUrl(item.material, item.id)"
            v-for="item in userAiFaceList"
            :key="item.id"
          >
            <div class="imgBox">
              <img :src="item.material" alt="" />
            </div>
            <div
              v-if="faceItemActive == item.id"
              @click="deleteFaceImg(item.id)"
              class="deleteIcon"
            >
              ✖︎
            </div>
          </div>
        </div>
        <!-- AI生成图片 -->
        <div
          class="Aipicture"
          v-if="showFace == 2"
          v-infinite-scroll="loadMoreAiFaceUser"
          :infinite-scroll-disabled="overLoadUser"
        >
          <div class="title">
            <el-icon><i-ep-Lock /></el-icon>
            {{ $t("createVideo.comingSoon") }}
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧栏 -->
    <div class="right">
      <div v-if="AccessToken" class="subscript">
        <span>GPT</span>
        <img src="../../assets/img/star.png" alt="" />
      </div>
      <el-tabs type="border-card" class="tabs">
        <!-- ----------------------------- 1 -->
        <el-tab-pane :label="$t('createVideo.typeScript')">
          <div class="card1">
            <div class="text">
              <!-- 文本域 -->
              <el-input
                maxlength="3000"
                id="textInputId"
                v-model="textareaContent"
                :rows="15"
                type="textarea"
                :placeholder="$t('createVideo.aiText')"
              />
              <span
                class="pointer"
                @click="getPreviewAudio"
                style="margin-right: 10px; font-size: 20px"
                >🔊</span
              >
              <span class="pointer" @click="insertIcon">🕗</span>
            </div>
            <p>{{ $t("createVideo.languages") }}</p>
            <!-- 语言 -->
            <el-select
              @change="chooseType"
              v-model="language"
              :placeholder="$t('createVideo.select')"
              style="width: 100%"
            >
              <el-option
                v-for="item in languageOptions"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
                <img
                  :src="item.img"
                  alt=""
                  style="
                    width: 20px;
                    margin-right: 10px;
                    vertical-align: text-top;
                  "
                />
                <span style="line-height: 20px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <p>{{ $t("createVideo.voices") }}</p>
            <!-- 声音 -->
            <el-select
              @change="chooseStyle"
              :disabled="language ? false : true"
              v-model="sound"
              :placeholder="$t('createVideo.select')"
              style="width: 100%"
            >
              <el-option
                v-for="item in soundOptions"
                :key="item.value"
                :label="item.displayName"
                :value="item.id"
              />
            </el-select>
            <p>{{ $t("createVideo.styles") }}</p>
            <!-- 风格 -->
            <el-select
              :disabled="soundStyleOptions ? false : true"
              v-model="soundStyle"
              :placeholder="$t('createVideo.select')"
              style="width: 100%"
            >
              <el-option
                v-for="item in soundStyleOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
            <!-- 保存视频 -->
            <el-button
              @click="saveOrUpdate(1, 'saveVideo')"
              color="#000"
              type="primary"
            >
              <my-loading :isLoading="createLoading"></my-loading>
              <span v-if="!createLoading">{{
                $t("createVideo.saveVideo")
              }}</span></el-button
            >
            <!-- 生成视频 -->
            <el-button
              style="margin-left: 0"
              @click="saveOrUpdate(1)"
              color="#000"
              type="primary"
            >
              <my-loading :isLoading="createLoading"></my-loading>
              <span v-if="!createLoading">{{
                $t("createVideo.generateVideo")
              }}</span></el-button
            >
          </div>
        </el-tab-pane>
        <!-- ------------------------ 2 -->
        <el-tab-pane :label="$t('createVideo.uploadAudio')">
          <div class="card2">
            <!-- 上传音频 -->
            <p>
              <el-icon class="icon-Headset"><i-ep-Headset /></el-icon>
              {{ $t("createVideo.uploadAudio") }}
            </p>
            <div class="uploadVideo">
              +
              <input
                accept="audio/*"
                type="file"
                ref="fileInput"
                @click="e.target.value = null"
                @change="handleFileChange"
              />
            </div>
            <!-- 录制MP3上传语音 -->
            <p>
              <el-icon class="icon-Mic"><i-ep-Mic /></el-icon>
              {{ $t("createVideo.recordedAudio") }}
            </p>
            <div class="uploadAudio">
              <div class="btnBox">
                <button
                  class="pointer"
                  :disabled="!isRecording"
                  @click="startRecording"
                >
                  {{ $t("createVideo.startRecorded") }}
                </button>
                <button
                  class="pointer"
                  @click="stopRecording"
                  :disabled="isRecording"
                >
                  {{ $t("createVideo.stopRecorded") }}
                </button>
              </div>
            </div>
            <div class="AudioBox" v-if="audioUrl">
              <audio controls :src="audioUrl" id="uploadAudio"></audio>
            </div>
            <!-- 保存视频 -->
            <el-button
              @click="saveOrUpdate(2, 'saveVideo')"
              color="#000"
              type="primary"
            >
              <my-loading :isLoading="createLoading"></my-loading>
              <span v-if="!createLoading">{{
                $t("createVideo.saveVideo")
              }}</span></el-button
            >
            <!-- 生成视频 -->
            <el-button
              style="margin-left: 0"
              @click="saveOrUpdate(2)"
              color="#000"
              type="primary"
            >
              <my-loading :isLoading="createLoading"></my-loading>
              <span v-if="!createLoading">{{
                $t("createVideo.generateVideo")
              }}</span>
            </el-button>
          </div>
        </el-tab-pane>
        <!-- ----------------------- 3 -->
        <el-tab-pane :label="$t('createVideo.music')">
          <div class="card3">
            <!-- 选择音乐 -->
            <p>
              <el-icon class="icon-Headset"><i-ep-Headset /></el-icon>
              {{ $t("createVideo.chooseMusic") }}
            </p>
            <!-- tab栏 -->
            <div class="musicTab">
              <div
                class="musicTabItem"
                :class="musicTabActive == 1 ? 'musicTabItemActive' : ''"
                @click="musicTabActive = 1"
              >
                {{ $t("createVideo.hotMusic") }}
              </div>
              <div
                v-if="AccessToken"
                class="musicTabItem"
                :class="musicTabActive == 2 ? 'musicTabItemActive' : ''"
                @click="musicTabActive = 2"
              >
                {{ $t("createVideo.personalWarehouse") }}
              </div>
            </div>
            <!-- 上传音乐 -->
            <div v-if="musicTabActive == 2" class="uploadVideo">
              +
              <input
                accept="audio/*"
                type="file"
                ref="fileMusicInput"
                @click="e.target.value = null"
                @change="uploadMusic"
              />
            </div>
            <!-- 系统音乐列表展示 -->
            <div v-if="musicTabActive == 1" class="musicList">
              <div
                @click="chooseMusicUrl(item.url, item.id)"
                class="musicItem"
                :class="musicItemAction == item.id ? 'musicItemAvtive' : ''"
                v-for="item in musicListSystem"
                :key="item.id"
              >
                <span class="musicNmae"> 🎵{{ item.name }}</span>
                <span class="musicTime"> {{ handleTime(item.time) }}</span>
              </div>
            </div>
            <!-- 个人音乐列表展示 -->
            <div v-if="musicTabActive == 2" class="musicList">
              <div
                @click="chooseMusicUrl(item.url, item.id)"
                class="musicItem"
                :class="musicItemAction == item.id ? 'musicItemAvtive' : ''"
                v-for="item in musicListPerson"
                :key="item.id"
              >
                <span class="musicNmae"> 🎵{{ item.name }}</span>
                <span class="musicTime"> {{ handleTime(item.time) }}</span>
              </div>
            </div>
            <!-- 系统分页 -->
            <div v-if="musicTabActive == 1" class="pagination">
              <el-pagination
                v-model:current-page="musicListPageNumSystem"
                v-model:page-size="musicListPageSize"
                :small="false"
                :disabled="false"
                :background="true"
                layout="total, prev, pager, next, jumper"
                :total="musicListTotalSystem"
                @current-change="musicListPageNumSystemChange"
              />
            </div>
            <!-- 个人分页 -->
            <div v-if="musicTabActive == 2" class="pagination">
              <el-pagination
                v-model:current-page="musicListPageNumPerson"
                v-model:page-size="musicListPageSize"
                :small="false"
                :disabled="false"
                :background="true"
                layout="total, prev, pager, next, jumper"
                :total="musicListTotalPerson"
                @current-change="musicListPageNumPersonChange"
              />
            </div>
            <div class="AudioBox" v-if="audioMusicUrl">
              <audio controls :src="audioMusicUrl" id="uploadAudio"></audio>
            </div>
            <!-- 保存视频 -->
            <el-button
              @click="saveOrUpdate(3, 'saveVideo')"
              color="#000"
              type="primary"
            >
              <my-loading :isLoading="createLoading"></my-loading>
              <span v-if="!createLoading">{{
                $t("createVideo.saveVideo")
              }}</span></el-button
            >
            <!-- 生成视频 -->
            <el-button
              style="margin-left: 0"
              @click="saveOrUpdate(3)"
              color="#000"
              type="primary"
            >
              <my-loading :isLoading="createLoading"></my-loading>
              <span v-if="!createLoading">{{
                $t("createVideo.generateVideo")
              }}</span>
            </el-button>
          </div>
        </el-tab-pane>
        <!-- ----------------------- 4 -->
        <el-tab-pane v-if="AccessToken" :label="$t('createVideo.aiScript')">
          <div class="card4">
            <div class="text">
              <!-- 文本域 -->
              <el-input
                maxlength="3000"
                id="textInputId"
                v-model="textareaContent"
                :rows="15"
                type="textarea"
                :placeholder="$t('createVideo.aiText')"
              />
              <span
                class="pointer"
                @click="getPreviewAudio"
                style="margin-right: 10px; font-size: 20px"
                >🔊</span
              >
              <span class="pointer" @click="insertIcon">🕗</span>
            </div>
            <p>{{ $t("createVideo.languages") }}</p>
            <!-- 语言 -->
            <el-select
              @change="chooseType"
              v-model="language"
              :placeholder="$t('createVideo.select')"
              style="width: 100%"
            >
              <el-option
                v-for="item in languageOptions"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
                <img
                  :src="item.img"
                  alt=""
                  style="
                    width: 20px;
                    margin-right: 10px;
                    vertical-align: text-top;
                  "
                />
                <span style="line-height: 20px">{{ item.name }}</span>
              </el-option>
            </el-select>
            <p>{{ $t("createVideo.voices") }}</p>
            <!-- 声音 -->
            <el-select
              @change="chooseStyle"
              :disabled="language ? false : true"
              v-model="sound"
              :placeholder="$t('createVideo.select')"
              style="width: 100%"
            >
              <el-option
                v-for="item in soundOptions"
                :key="item.value"
                :label="item.displayName"
                :value="item.id"
              />
            </el-select>
            <p>{{ $t("createVideo.styles") }}</p>
            <!-- 风格 -->
            <el-select
              :disabled="soundStyleOptions ? false : true"
              v-model="soundStyle"
              :placeholder="$t('createVideo.select')"
              style="width: 100%"
            >
              <el-option
                v-for="item in soundStyleOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
            <!-- 保存视频 -->
            <el-button
              @click="saveOrUpdate(1, 'saveVideo')"
              color="#000"
              type="primary"
            >
              <my-loading :isLoading="createLoading"></my-loading>
              <span v-if="!createLoading">{{
                $t("createVideo.saveVideo")
              }}</span></el-button
            >
            <!-- 生成视频 -->
            <el-button
              style="margin-left: 0"
              @click="saveOrUpdate(1)"
              color="#000"
              type="primary"
            >
              <my-loading :isLoading="createLoading"></my-loading>
              <span v-if="!createLoading">{{
                $t("createVideo.generateVideo")
              }}</span></el-button
            >
          </div>
        </el-tab-pane>
        <!-- -------------------------脚标 -->
      </el-tabs>
    </div>
    <!-- 试听的mp3 -->
    <div style="opacity: 0; width: 0">
      <audio autoplay :src="previewAudioUrl" id="audio"></audio>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import {
  personPhotoList,
  personPhotoUserListList,
  awsImgUpload,
  delImgApi,
  videoUpload,
  saveImgApi,
  uploadProgressApi,
  saveAudioApi,
  voiceTotalApi,
  chooseTypeApi,
  saveOrUpdateApi,
  createVideoApi,
  previewAudioApi,
  findByIdApi,
  musicListSystemApi,
  musicListPersonApi,
  saveMusicApi,
} from "@/apis/createVideo";
import { useI18n } from "vue-i18n";
import Recorder from "js-audio-recorder"; //mp3插件
import imageCompression from "browser-image-compression"; //压缩图片插件
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const { locale } = useI18n();
const lanChange = ref(locale);

const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录

//#region 头像区的逻辑
// 获取AI头像
const AiFaceList = ref([]); //系统相册列表
const userAiFaceList = ref([]); //个人相册列表
const feceItemLoading = ref(false);
const feceItemLoading2 = ref(false);

function getAiFaceList(pageNum, pageSize, sendType) {
  feceItemLoading.value = true;
  personPhotoList(pageNum, pageSize, sendType)
    .then((res) => {
      AiFaceList.value = res.data.list;
      feceItemLoading.value = false;
    })
    .catch((err) => {
      feceItemLoading.value = false;
      console.log(err, "err");
    });
}
function getAiFaceUserList(pageNum, pageSize, sendType) {
  feceItemLoading2.value = true;
  personPhotoUserListList(pageNum, pageSize, sendType)
    .then((res) => {
      userAiFaceList.value = res.data.list;
      feceItemLoading2.value = false;
    })
    .catch((err) => {
      feceItemLoading2.value = false;
      console.log(err, "err");
    });
}
const pageNumSystem = ref(1);
const overLoadSystem = ref(false); //禁用系统相册加载更多
const pageNumUser = ref(1);
const overLoadUser = ref(false); //禁用个人相册加载更多
//系统相册触底加载更多
function loadMoreAiFaceSystem() {
  pageNumSystem.value += 1;
  personPhotoList(pageNumSystem.value, 10, 1)
    .then((res) => {
      AiFaceList.value.push(...res.data.list);
      if (res.data.list.length == 0) {
        overLoadSystem.value = true;
        pageNumSystem.value = pageNumSystem.value - 1;
      }
    })
    .catch((err) => {
      console.log(err, "err");
    });
}
//个人相册触底加载更多
function loadMoreAiFaceUser() {
  pageNumUser.value += 1;
  personPhotoUserListList(pageNumUser.value, 10, 3)
    .then((res) => {
      if (res.data.list.length == 0) {
        overLoadUser.value = true;
        pageNumUser.value = pageNumUser.value - 1;
      }
      userAiFaceList.value.push(...res.data.list);
    })
    .catch((err) => {
      console.log(err, "err");
    });
}
// 选择显示的face列表
const showFace = ref("0");
function ChangeShowFaceList(index) {
  showFace.value = index;
}
const faceItemActive = ref(); //高亮处理和当前选择图片的ID
// 点击aifece
function setImgUrl(url, id) {
  faceItemActive.value = id;
  imgUrl.value = url;
  showUploadBtn.value = 1;
  submitImgBtn.value = false;
}
// 删除个人相册照片
async function deleteFaceImg(id) {
  const msg =
    lanChange.value == "zh-cn"
      ? `确定要删除这张图片吗? `
      : `Are you sure to delete this image ? `;
  const notice = lanChange.value == "zh-cn" ? "提示" : "Notice";
  const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm";
  const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel";
  ElMessageBox.confirm(msg, notice, {
    confirmButtonText: confirm,
    cancelButtonText: cancel,
  }).then(async () => {
    try {
      const res = await delImgApi(id);
      imgUrl.value = null;
      faceItemActive.value = null;
      userAiFaceList.value = [];
      getAiFaceUserList(1, 10, 3);
      pageNumUser.value = 1;
      overLoadUser.value = false;
    } catch (error) {
      ElMessage.error(errpr);
    }
  });
}
//#endregion  ------------------------------

//#region 预览图片
const compressionImgLoad = ref(false);
async function lookImg(e) {
  if (e.target.files[0]) {
    faceItemActive.value = null;
    imgUrl.value = null;
    imgData.value = null;
    showUploadBtn.value = 3;
    submitImgBtn.value = false;
    compressionImgLoad.value = true;
    // 压缩配置
    const options = {
      maxSizeMB: 2, // 最大压缩大小为 1MB
      useWebWorker: true, // 使用 Web Worker 进行压缩，提高性能
    };
    const compressedFile = await imageCompression(e.target.files[0], options);
    imgUrl.value = URL.createObjectURL(compressedFile);
    imgData.value = compressedFile;
    showUploadBtn.value = 4;
    submitImgBtn.value = true;
    compressionImgLoad.value = false;
    await changeFile();
  } else {
    return;
  }
}
//#endregion ------------------

// 标题
const title =
  lanChange.value == "zh-cn" ? ref("未定义标题") : ref("Undefined Title");

//#region 上传图片
const imgUrl = ref(""); //图片回显路径
const imgData = ref(""); // 上传图片文件
const showUploadBtn = ref(1); //上传图片+号的显示隐藏
const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏
// 点击系统仓库tab
function chooSystemImg(params) {
  showFace.value = 0;
  showUploadBtn.value = 1;
}
// 上传图片
async function changeFile() {
  compressionImgLoad.value = true;
  showUploadBtn.value = 3;
  imgUrl.value = URL.createObjectURL(imgData.value);
  let formData = new FormData();
  const timestamp = Date.now();
  formData.append("file", imgData.value, timestamp + ".png");
  try {
    // 上传图片
    const res = await awsImgUpload(formData);
    // 保存图片
    const res2 = await saveImgApi({ material: res.data.url });
    // 重新获取列表
    compressionImgLoad.value = false;
    showUploadBtn.value = 4;
    userAiFaceList.value = [];
    getAiFaceUserList(1, 10, 3);
    pageNumUser.value = 1;
    overLoadUser.value = false;
    if (res2.code == 200) {
      ElMessage.success(
        lanChange.value == "zh-cn" ? `上传成功` : `Upload successfully`
      );
    } else {
      ElMessage.error(
        lanChange.value == "zh-cn" ? `上传失败` : `Upload failure`
      );
    }
    faceItemActive.value = res2.data.id;
    imgUrl.value = res2.data.material;
    submitImgBtn.value = false;
    console.log(123654);
    showUploadBtn.value = 1;
  } catch (error) {
    ElMessage.error(error);
  }
}
// 点击个人仓库tab
function chooseMyImg() {
  showFace.value = 1;
  showUploadBtn.value = 2;
}
// 点击AI头像区的+号
function clickAddBtn() {
  faceItemActive.value = null;
  showUploadBtn.value = 2;
}
//#endregion ---------------------------

//#region AI生成图片
function chooseAiPic() {
  showFace.value = 2;
  // showUploadBtn.value = 5;
}
//#endregion --------------------------

//#region card1的逻辑
const textareaContent = ref("");
function insertIcon() {
  const textarea = document.getElementById("textInputId");
  const icon = "🕗"; // 这里使用了一个星星作为示例图标，你可以替换为你自己的图标

  // 获取光标位置
  const startPos = textarea.selectionStart;
  const endPos = textarea.selectionEnd;

  console.log(startPos);
  console.log(endPos);
  // 在光标位置插入图标
  textareaContent.value =
    textareaContent.value.substring(0, startPos) +
    icon +
    textareaContent.value.substring(endPos, textareaContent.value.length);

  // 设置光标位置为插入图标后的位置
  const newCursorPos = startPos + icon.length;
  textarea.setSelectionRange(newCursorPos, newCursorPos);
  textarea.focus();
}
const language = ref(""); //选择的语言
const sound = ref(""); // 选择的声音
const soundStyle = ref(""); //选择的风格
// 语言下拉框内容
const languageOptions = ref([
  {
    id: "0",
    name: "中文",
  },
  {
    id: "1",
    name: "English",
  },
]);
async function voiceTotal() {
  const res = await voiceTotalApi();
  languageOptions.value = res.data;
}
// 声音下拉框内容
const soundOptions = ref([]);
async function chooseType() {
  const res = await chooseTypeApi(language.value);
  soundOptions.value = res.data;
  sound.value = null;
}
// 风格下拉框内容
const soundStyleOptions = ref(null);
async function chooseStyle() {
  const item = soundOptions.value.find((element) => element.id == sound.value);

  soundStyle.value = null;
  soundStyleOptions.value = item.style;
}

// 试听
const previewAudioUrl = ref(null);
async function getPreviewAudio() {
  if (!textareaContent.value) {
    ElMessage.error(
      lanChange.value == "zh-cn"
        ? `您还没有输入文案`
        : `You have not entered the copy yet`
    );
    return;
  }
  if (!sound.value) {
    ElMessage.error(
      lanChange.value == "zh-cn"
        ? `您还没有选择声音`
        : `You have not selected the sound`
    );
    return;
  }

  try {
    const res = await previewAudioApi(
      textareaContent.value,
      sound.value,
      soundStyle.value
    );
    if (!res.data.data) {
      ElMessage.error(
        lanChange.value == "zh-cn"
          ? `暂时无法试听,请稍后重试`
          : `Unable to listen, please try again later`
      );
    }
    previewAudioUrl.value = res.data.data;
    document.getElementById("audio").play();
  } catch (error) {
    ElMessage.error(error);
  }
}
//#endregion

//#region 录制MP3上传语音
const parameter = {
  sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
  sampleRate: 8000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  numChannels: 1, // 声道，支持 1 或 2， 默认是1
};
const recorder = new Recorder(parameter);
const isRecording = ref(true);
const audioUrl = ref(null); // audio控件的url
const audioData = ref("");
const videoId = ref(null); //上传mp3的videoId,创建视频会用到

const startRecording = async () => {
  try {
    await recorder.start();
    console.log("Recording started");
    isRecording.value = false;
  } catch (error) {
    console.error(error);
  }
};

const stopRecording = async () => {
  try {
    const recording = await recorder.stop();
    audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
    audioData.value = recorder.getWAVBlob();
    isRecording.value = true;
    console.log(document.getElementById("uploadAudio").duration);
  } catch (error) {
    console.error(error);
  }
};

const playRecording = () => {
  if (audioUrl.value) {
    const audio = new Audio(audioUrl.value);
    audio.play();
  }
};
// 上传音频
async function uploadAudio(isSaveVideo) {
  createLoading.value = true;
  let formData = new FormData();
  const timestamp = Date.now();
  formData.append("file", audioData.value, timestamp + ".mp3");
  try {
    const res = await videoUpload(formData);
    videoId.value = res.data.videoId;
    if (res) {
      // ElMessage.success("上传成功!");
    } else {
      ElMessage.error(
        lanChange.value == "zh-cn" ? `上传音频失败!` : `Failed to upload audio!`
      );
      return;
    }
    // 查询进度
    intervalId = setInterval(() => {
      uploadProgress(res.data.videoId, isSaveVideo);
    }, 1000);
    // ElMessage.success("上传成功!");
  } catch (error) {
    ElMessage.error(error);
  }
}
//#endregion  ------------------------------------

//#region  上传音频功能
const fileInput = ref(null);

let intervalId = null; // 用于存储 setInterval 的返回值
const uploadAudioTime = ref(null); // 音频时长
const handleFileChange = async () => {
  const file = fileInput.value.files[0];

  if (file) {
    const videoUrl = URL.createObjectURL(file);
    audioUrl.value = videoUrl;
    audioData.value = file;
    const audio2 = new Audio();
    audio2.src = videoUrl;
    countAudioTime(audio2);
  }
};
// 计算音频的时长
const countAudioTime = async (audio) => {
  while (isNaN(audio.duration) || audio.duration === Infinity) {
    // 延迟一会 不然网页都卡死
    await new Promise((resolve) => setTimeout(resolve, 200));
    // 设置随机播放时间，模拟调进度条
    audio.currentTime = 10000000 * Math.random();
  }
  // console.log("音频的总时长:", Math.floor(audio.duration));
  uploadAudioTime.value = Math.floor(audio.duration);
};

// 获取视频上传进度
const afterSaveAudioId = ref(null);
async function uploadProgress(videoId, isSaveVideo) {
  const res = await uploadProgressApi(videoId);
  if (res.data == "complete") {
    clearInterval(intervalId);
    try {
      const res2 = await saveAudioApi({ videoId: videoId });
      afterSaveAudioId.value = res2.data.id; // 得到id
    } catch (error) {
      ElMessage.error(error);
    }
    // 定义参数
    const saveOrUpdateData = {
      id: id.value, //从草稿或者重新编辑回到创建视频时有id
      title: title.value,
      personPhotoId: faceItemActive.value, //任务照片id,
      voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板，2:来自用户上传
      paperwork: textareaContent.value, //文案
      speakTypeStr: soundStyle.value, //声音风格
      voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传
      voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传
    };
    try {
      const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
      // 这个if判断是不是仅仅保存视频
      if (isSaveVideo == "saveVideo") {
        ElMessage.success(
          lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
        );
        createLoading.value = false;
        router.push("/myCreating");
        return;
      }
      const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频
      if (res4.message == "success") {
        ElMessage.success(
          lanChange.value == "zh-cn"
            ? `视频正在生成中,请耐心等待`
            : `The video is being generated, please wait patiently`
        );
      }
      createLoading.value = false;
      router.push("/myCreating");
    } catch (error) {
      ElMessage.error(error);
      createLoading.value = false;
    }
  }
}
//#endregion --------------------------------------

//#region 生成视频
// tab栏切换
const tabFrom = ref(1);
const createLoading = ref(false);
// 上传音频后,得到videoId
// 保存数据
async function saveOrUpdate(index, isSaveVideo) {
  if (createLoading.value == true) {
    return;
  }
  tabFrom.value = index; // 判断是哪一个tab栏内的生成视频按钮
  const saveOrUpdateData = {
    id: id.value, //从草稿或者重新编辑回到创建视频时有id
    title: title.value,
    personPhotoId: faceItemActive.value, //任务照片id,
    voiceFrom: tabFrom.value, //:声音来源 1:来自选择模板，2:来自用户上传
    paperwork: textareaContent.value, //文案
    speakTypeStr: soundStyle.value, //声音风格
    voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传
    voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传
    musicId: musicItemAction.value, // 选中音乐的id,voiceFrom=3 时必传
  };
  if (index == 1) {
    createLoading.value = true;
    if (!saveOrUpdateData.personPhotoId) {
      ElMessage.error(
        lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture`
      );
      createLoading.value = false;
      return;
    }
    if (!saveOrUpdateData.paperwork) {
      ElMessage.error(
        lanChange.value == "zh-cn" ? `请输入文案` : `Please enter copy`
      );
      createLoading.value = false;
      return;
    }
    if (!saveOrUpdateData.voiceMouldId) {
      ElMessage.error(
        lanChange.value == "zh-cn" ? `请选择声音` : `Please select sound`
      );
      createLoading.value = false;
      return;
    }
    try {
      const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
      if (res2.code == 1002) {
      }
      // 这个if判断是不是仅仅保存视频
      if (isSaveVideo == "saveVideo") {
        ElMessage.success(
          lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
        );
        createLoading.value = false;
        router.push("/myCreating");
        return;
      }
      const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频
      if (res3.message == "success") {
        ElMessage.success(
          lanChange.value == "zh-cn"
            ? `视频正在生成中,请耐心等待`
            : `The video is being generated, please wait patiently`
        );
      }
      createLoading.value = false;
      router.push("/myCreating");
    } catch (error) {
      // ElMessage.error($t(error.message));
      ElMessage.error(error);
      createLoading.value = false;
    }
  }
  if (index == 2) {
    if (!saveOrUpdateData.personPhotoId) {
      ElMessage.error(
        lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture`
      );
      createLoading.value = false;
      return;
    }
    if (!saveOrUpdateData.voiceMaterialId) {
      ElMessage.error(
        lanChange.value == "zh-cn"
          ? `请选择音频文件`
          : `Please select an audio file`
      );
      createLoading.value = false;
      return;
    }
    try {
      const res1 = await uploadAudio(isSaveVideo); // 上传音频
    } catch (error) {
      ElMessage.error(error);
      createLoading.value = false;
    }
  }
  if (index == 3) {
    try {
      if (!saveOrUpdateData.personPhotoId) {
        ElMessage.error(
          lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture`
        );
        createLoading.value = false;
        return;
      }
      if (!saveOrUpdateData.musicId) {
        ElMessage.error(
          lanChange.value == "zh-cn"
            ? `请选择音乐文件`
            : `Please select an music file`
        );
        createLoading.value = false;
        return;
      }
      const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据

      // 这个if判断是不是仅仅保存视频
      if (isSaveVideo == "saveVideo") {
        ElMessage.success(
          lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as manuscript`
        );
        createLoading.value = false;
        router.push("/myCreating");
        return;
      }
      console.log("ceshi");
      const res2 = await createVideoApi({ id: res1.data.id }); // 生成视频
      if (res2.message == "success") {
        ElMessage.success(
          lanChange.value == "zh-cn"
            ? `视频正在生成中,请耐心等待`
            : `The video is being generated, please wait patiently`
        );
      }
      createLoading.value = false;
      router.push("/myCreating");
    } catch (error) {
      ElMessage.error(error);
      createLoading.value = false;
    }
  }
}
//#endregion ----------------------------

//#region 根据作品id查询作品信息并回显
const id = ref(null); //作品的id
async function findById(findId) {
  const res = await findByIdApi(findId);
  id.value = res.data.id;
  title.value = res.data.title; //标题回显
  faceItemActive.value = res.data.personPhotoId; //aiface高亮和图片id
  tabFrom.value = res.data.voiceFrom; //输入文案还是上传mp3模式
  textareaContent.value = res.data.paperwork; //文案内容
  afterSaveAudioId.value = res.data.voiceMaterialId; //保存音频后得到的id
  imgUrl.value = res.data.personPhotoUrl; //图片回显
  audioUrl.value = res.data.voiceMaterialUrl; // mp3回显
  musicItemAction.value = res.data.musicId; //音乐id回显
  language.value = res.data.voiceInfo ? res.data.voiceInfo.languageId : null;
  if (language.value) {
    await chooseType(language.value);
  }
  sound.value = res.data.voiceMouldId; //声音id
  chooseStyle();
  soundStyle.value = res.data.speakTypeStr; //选择风格
}
//#endregion ----------------------------

//#region 音乐tab
const musicListSystem = ref(null); //展示音乐列表
const musicListPerson = ref(null); //展示音乐列表
const audioMusicUrl = ref(null); //选中音乐Url回显
const musicItemAction = ref(null); //选中高亮
const musicListPageNumSystem = ref(1); //系统音乐页数
const musicListTotalSystem = ref(10); //系统音乐总条数
const musicListPageNumPerson = ref(1); //个人音乐页数
const musicListTotalPerson = ref(10); //个人音乐总条数
const musicListPageSize = ref(8); //
const musicTabActive = ref(1); //热门歌曲和个人仓库高亮
const musicData = ref(null); //上传歌曲的数据
const fileMusicInput = ref(null); // 上传组件的dom
// 获取系统音乐列表
async function getmusicListSystem(pageNum, pageSize) {
  try {
    const res = await musicListSystemApi(pageNum, pageSize);
    musicListSystem.value = res.data.list;
    musicListTotalSystem.value = Number(res.data.total);
  } catch (error) {
    console.log(error);
  }
}
// 获取个人音乐列表
async function getmusicListPerson(pageNum, pageSize) {
  try {
    const res = await musicListPersonApi(pageNum, pageSize);
    musicListPerson.value = res.data.list;
    musicListTotalPerson.value = Number(res.data.total);
  } catch (error) {
    console.log(error);
  }
}
// 系统页数发生改变
const musicListPageNumSystemChange = (val) => {
  musicListPageNumSystem.value = val;
  getmusicListSystem(musicListPageNumSystem.value, musicListPageSize.value);
};
// 个人页数发生改变
const musicListPageNumPersonChange = (val) => {
  musicListPageNumPerson.value = val;
  getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value);
};
// 点击选择音乐
function chooseMusicUrl(url, id) {
  audioMusicUrl.value = url;
  musicItemAction.value = id;
}
// 转化秒为分秒
function handleTime(time) {
  let m = Math.floor(time / 60).toFixed(0);
  let s = (time % 60).toFixed(0);
  if (s < 10) {
    s = "0" + s;
  }
  return m + ":" + s;
}
// 选择文件上传音乐
async function uploadMusic() {
  const file = fileMusicInput.value.files[0];
  if (file) {
    const videoUrl = URL.createObjectURL(file);
    musicData.value = file;
    let formData = new FormData();
    formData.append("file", musicData.value, file.name + ".mp3");
    try {
      const res = await videoUpload(formData);
      if (res) {
        // ElMessage.success("上传成功!");
      } else {
        ElMessage.error(
          lanChange.value == "zh-cn"
            ? `上传音频失败!`
            : `Failed to upload audio!`
        );
        return;
      }
      // 查询进度
      intervalId = setInterval(async () => {
        const res2 = await uploadProgressApi(res.data.videoId);
        if (res2.data == "complete") {
          clearInterval(intervalId);
          try {
            const res3 = await saveMusicApi({ voiceId: res.data.videoId });
            afterSaveAudioId.value = res2.data.id; // 得到id
          } catch (error) {
            ElMessage.error(error);
          }
        }
      }, 1000);
      musicListPageNumPerson.value = 1;
      const res4 = await musicListPersonApi(
        musicListPageNumPerson.value,
        musicListPageSize.value
      );
      musicListPerson.value = res4.data.list;
      musicListTotalPerson.value = Number(res4.data.total);
      ElMessage.success(
        lanChange.value == "zh-cn" ? `上传成功!` : `Upload successfully`
      );
    } catch (error) {
      ElMessage.error(error);
    }
  }
}
//#endregion ----------------------------

//#region

//#endregion ----------------------------

//#region

//#endregion ----------------------------

// $t在script中的使用
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const string = "createVideo.typeScript";
const t = globalProperties.$t(string);

onMounted(async () => {
  getAiFaceList(1, 10, 1);
  if (AccessToken) {
    getAiFaceUserList(1, 10, 3);
    await getmusicListPerson(
      musicListPageNumPerson.value,
      musicListPageSize.value
    );
  }
  await voiceTotal();
  if (route.query.id) {
    await findById(route.query.id);
  }
  await getmusicListSystem(
    musicListPageNumSystem.value,
    musicListPageSize.value
  );

  musicListSystem.value.forEach((item) => {
    if (item.id == musicItemAction.value) {
      audioMusicUrl.value = item.url;
    }
  });
  musicListPerson.value.forEach((item) => {
    if (item.id == musicItemAction.value) {
      audioMusicUrl.value = item.url;
    }
  });
});
</script>

<style lang="scss" scoped>
.page {
  height: 1200px;

  // height: calc(100vh - 80px);
  // padding: 20px 0 0 40px;
  background-color: #fff;
  border-radius: 25px 0 0;
}

.left {
  width: 68%;
  height: 90%;
  padding: 20px;
  :deep(.el-input__wrapper) {
    border: none;
    border-bottom: 2px solid #000;
    border-radius: 0;
    box-shadow: none;
  }

  .el-icon.icon-edit {
    width: 35px;
    height: 35px;
    font-size: 35px;
    color: #8c939d;
    text-align: center;
  }

  &-top {
    position: relative;
    width: 100%;
    // height: 65%;
    // height: 580px;
    height: 65%;

    .uploadBtn {
      position: relative;
      padding: 10px 15px;
      margin-left: 10px;
      border-radius: 5px;
      transition: all 0.3s;
      background-color: #000;
      color: #fff;
      &:hover {
        background-color: #15d1b8;
      }
    }

    .bigImg {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 80%;
      height: 88%;
      margin-top: 20px;

      img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 15px;
      }
    }

    .noImg {
      position: relative;
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 30px;
      .imgBox {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #ccc;
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          max-width: 120%;
        }
      }
      .trueImg {
        position: relative;
        top: 60px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        .icon {
          position: absolute;
          top: 0%;
          right: -5%;
          border: 2px solid #00ff95;
          color: #00ff95;
        }
      }
      .el-upload {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
      .upload {
        top: 200px;
        width: 100px;
        height: 100px;
        font-size: 50px;
        line-height: 100px;
        text-align: center;
        background-color: #ccc;
        border-radius: 50%;
      }

      .falseImg {
        top: 350px;
        // background-color: #795562;
        display: flex;
        justify-content: space-evenly;
        width: 700px;
        height: 100px;

        > div {
          position: relative;
          width: 100px;
          height: 100px;
          background-color: #ccc;
          border-radius: 50%;
          .icon {
            position: absolute;
            top: 0%;
            right: -5%;
            border: 2px solid red;
            color: red;
          }
        }
      }
    }

    // 公共类名
    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    .icon {
      position: absolute;
      right: 2px;
      width: 30px;
      height: 30px;
      font-size: 20px;
      font-weight: 700;
      line-height: 26px;
      text-align: center;
      border: 2px solid #000;
      border-radius: 50%;
    }

    .editAiPicBox {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      background-color: #f1f2f6;
      border-radius: 30px;
      overflow: hidden;
      .edit {
        width: 50%;
        height: 100%;

        background-color: #fff;
        .TagBox {
          width: 100%;
          height: 100%;

          border-radius: 0 0 30px 0;
          background-color: #f1f2f6;
        }
      }
      .AIpicBox {
        position: relative;
        width: 50%;
        height: 100%;
        border-radius: 30px 0 0 0;
        background-color: #fff;
        .picBox {
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: 30px 0 0 0;
          background-color: #fff;
          img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            max-width: 100%;
            max-height: 100%;
            border-radius: 30px;
          }
        }
      }
    }
  }

  &-bottom {
    width: 100%;
    height: 32%;
    margin-top: 10px;
    .tab {
      padding: 10px;
      > div {
        margin-right: 20px;
        padding: 10px 15px;
        transition: all 0.3s;
        border-radius: 5px;
        &:hover {
          background-color: #000;
          color: #fff;
        }
      }
      .tabAvtive {
        background-color: #000;
        color: #fff;
      }
    }
    .ai {
      width: 100%;
    }

    .faceList {
      padding: 8px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 100%;
      height: 180px;
      overflow-y: scroll;
      .faceItem {
        position: relative;
        margin-right: 30px;
        margin-bottom: 35px;
        width: 150px;
        height: 150px;
        // padding: 0 25px;
        line-height: 150px;
        text-align: center;
        border-radius: 50%;
        background-color: #fbf8f8;
        // border: 2px solid #fff;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px;
        // overflow: hidden;
        transition: all 0.3s;
        .imgBox {
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 3;
          width: 150px;
          height: 150px;
          border-radius: 50%;
          background-color: #fbf8f8;
          overflow: hidden;
          img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
          }
        }
        .deleteIcon {
          position: absolute;
          top: 0;
          right: 15px;
          z-index: 999;
          width: 25px;
          height: 25px;
          border: 2px solid #6d76ef;
          border-radius: 50%;
          color: #6d76ef;
          font-size: 20px;
          line-height: 23px;
          cursor: pointer;
        }
        .uploadImg {
          line-height: 145px;
          font-size: 50px;
          font-weight: 700;
          text-align: center;
        }
      }
      .faceItemActive {
        position: relative;
        transition: all 0.3s;
        &::before {
          content: "";
          position: absolute;
          // top: -3px;
          // right: -7px;
          // left: -3px;
          // bottom: -7px;
          top: -3px;
          right: -3px;
          left: -3px;
          bottom: -3px;
          z-index: 2;
          border-radius: 50%;
          background: linear-gradient(
            225deg,
            rgb(81 217 202 / 100%),
            rgb(114 100 245 / 100%)
          );
        }
      }
    }
    .Aipicture {
      width: 100%;
      height: 180px;
      .title {
        font-size: 30px;
        text-align: center;
        line-height: 80px;
        background-image: -webkit-linear-gradient(
          left,
          #4b61dc,
          #15d1b8 25%,
          #4b61dc 50%,
          #15d1b8 75%,
          #4b61dc
        ) !important;
        -webkit-text-fill-color: transparent !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-background-size: 200% 100% !important;
        background-size: 200% 100% !important;
        .el-icon {
          vertical-align: text-top;
          font-size: 32px;
        }
      }
    }
    .aiPicTab {
      position: relative;
      z-index: 2;
      .subscript {
        position: absolute;
        top: -20px;
        right: -20px;
        width: 40px;
        height: 40px;
        z-index: 1;
        img {
          position: absolute;
          top: 0;
          left: 0px;
          width: 100%;
          height: 100%;
          z-index: 3;
        }
        span {
          position: absolute;
          line-height: 45px;
          z-index: 4;
          padding-left: 0px;
          padding-bottom: 5px;
          font-size: 16px;
          color: #17ceb9;
          font-weight: 900;
          transform: rotate(45deg);
        }
      }
      .subscript1 {
        position: absolute;
        top: -20px;
        right: -20px;
        width: 40px;
        height: 40px;
        z-index: 1;
        img {
          position: absolute;
          top: 0;
          left: 0px;
          width: 100%;
          height: 100%;
          z-index: 3;
        }
        span {
          position: absolute;
          line-height: 45px;
          z-index: 4;
          padding-left: 6px;
          padding-bottom: 5px;
          font-size: 16px;
          color: #17ceb9;
          font-weight: 900;
          transform: rotate(45deg);
        }
      }
    }
  }
}

.right {
  width: 32%;
  min-height: 100%;
  padding: 30px 30px 20px 30px;
  background-color: #f1f2f6;
  border-radius: 30px 0 0 0;
  position: relative;
  z-index: 2;

  .subscript {
    position: absolute;
    top: 30px;
    right: 45px;
    width: 40px;
    height: 40px;
    z-index: 3;
    img {
      position: absolute;
      top: 0;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 3;
    }
    span {
      position: absolute;
      line-height: 45px;
      z-index: 4;
      padding-left: 0px;
      padding-bottom: 5px;
      font-size: 16px;
      color: #17ceb9;
      font-weight: 900;
      transform: rotate(45deg);
    }
  }
  :deep(.el-tabs--border-card) {
    font-size: 20px;
    border: none;
  }

  .tabs {
    min-height: 100%;
    padding: 20px 20px 0px 20px;
    border-radius: 20px;
    overflow-y: scroll;
    .card1 {
      .text {
        padding: 10px;
        border: 1px solid #c0c4cc;
        .el-button {
          float: right;
          margin-top: 10px;
        }

        :deep(.el-textarea__inner) {
          resize: none;
          box-shadow: none;
        }
      }

      p {
        margin: 7px 0;
      }

      > .el-button {
        width: 100%;
        height: 50px;
        margin-top: 10px;
      }

      :deep(.el-input .is-focus) {
        // box-shadow: none !important;
        // box-shadow: 0 0 0 1px #000 !important;
      }
    }
    .card2 {
      padding: 10px;
      .el-icon {
        // color: red;
        vertical-align: text-top;
      }
      > div {
        position: relative;
        margin-top: 10px;
        width: 100%;
        border: #000 1px solid;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s;
        box-shadow: #00000026 2px 2px 2px 2px;
        &:hover {
          transform: translateY(-10px);
        }
      }
      .uploadAudio {
        padding: 20px;
        // margin-top: 30px;
        margin-bottom: 20px;
        height: 70px;
        .btnBox {
          display: flex;
          justify-content: space-between;
          // justify-content: flex-end;
          margin-bottom: 10px;
        }
        audio {
          height: 50px;
          width: 100%;
        }
        button {
          border-radius: 10px;
          height: 30px;
          line-height: 22px;
          padding: 5px 10px;
          background-color: #fff;
          transition: all 0.3s;
          &:hover {
            background-color: #000;

            color: #fff;
          }
        }
      }
      .uploadAudioAvtion {
        height: 170px;
      }
      .uploadVideo {
        text-align: center;
        margin-bottom: 20px;
        height: 100px;
        font-size: 50px;
        font-weight: 700;
        line-height: 100px;
        input {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
        video {
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          width: 100%;
          height: 100%;
        }
      }
      .AudioBox {
        display: flex;
        justify-content: space-around;
        padding: 20px;
        transition: all 0.3s;
      }
      > .el-button {
        width: 100%;
        height: 50px;
        margin-top: 10px;
        // background-color: #000;
      }
    }
    .card3 {
      width: 100%;
      padding: 10px;
      .el-icon {
        vertical-align: text-top;
      }
      .musicTab {
        display: flex;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        .musicTabItem {
          background-color: #f5f7fa;
          width: 50%;
          cursor: pointer;
        }
        .musicTabItemActive {
          background-color: #000;
          color: #fff;
        }
      }
      .uploadVideo {
        position: relative;
        margin-top: 10px;
        width: 100%;
        border: #000 1px solid;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s;
        box-shadow: #00000026 2px 2px 2px 2px;
        &:hover {
          transform: translateY(-10px);
        }
        text-align: center;
        margin-bottom: 20px;
        height: 100px;
        font-size: 50px;
        font-weight: 700;
        line-height: 100px;
        input {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
      .musicList {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .musicItem {
          width: 100%;
          height: 30px;
          position: relative;
          margin-top: 10px;
          padding: 0 20px;
          border: #000 1px solid;
          border-radius: 10px;
          overflow: hidden;
          transition: all 0.3s;
          box-shadow: #00000026 2px 2px 2px 2px;
          transition: all 0.3s;
          cursor: pointer;
          .musicNmae {
            display: inline-block;
            width: 280px;
            margin-right: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .musicTime {
            display: inline-block;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .musicItemAvtive {
          background-color: #000;
          color: #fff;
        }
      }
      .pagination {
        // position: fixed;
        // bottom: 20px;
        // left: 50%;
        // transform: translateX(-50%);
        margin-top: 10px;
        background-color: #ffffff;
        padding: 10px 20px;
        border-radius: 8px;
        transition: all 0.3s;
        cursor: pointer;
        &:hover {
          background-color: #b8b8b873;
        }
      }
      .AudioBox {
        display: flex;
        justify-content: space-around;
        width: 100%;
        padding: 20px;
        transition: all 0.3s;
        audio {
          width: 100%;
        }
      }
      > .el-button {
        width: 100%;
        height: 50px;
        margin-top: 10px;
        // background-color: #000;
      }
      :deep(.el-input__wrapper) {
        border: none;
        border-bottom: 2px solid #000;
        border-radius: 0;
        box-shadow: none;
      }

      .el-icon.icon-edit {
        width: 30px;
        height: 30px;
        font-size: 30px;
        color: #8c939d;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          color: #292929;
        }
      }
    }
    .card4 {
      .text {
        padding: 10px;
        border: 1px solid #000;
        .el-button {
          float: right;
          margin-top: 10px;
        }

        :deep(.el-textarea__inner) {
          resize: none;
          box-shadow: none;
        }
      }

      p {
        margin: 7px 0;
      }

      > .el-button {
        width: 100%;
        height: 50px;
        margin-top: 10px;
      }

      :deep(.el-input .is-focus) {
        // box-shadow: none !important;
        // box-shadow: 0 0 0 1px #000 !important;
      }
    }
    :deep(.el-tabs__item.is-active) {
      color: #909393;
      background-color: #000;
    }

    :deep(.el-tabs__nav) {
      width: 100%;
    }

    :deep(.el-tabs__item) {
      width: 26%;
    }

    :deep(.el-tabs__item:hover) {
      color: #909393;
    }

    :deep(.el-tabs__content) {
      height: calc(100% - 60px);
      padding: 0;
    }
  }
}
</style>
