<template>
  <div class="page flex justify-around">
    <!-- 遮罩层 -->
    <div class="mask" v-show="showChooseModel"></div>
    <!-- 左侧栏 -->
    <div class="left">
      <!-- 选择模版弹出框 -->
      <div class="chooseModelBox" :class="showChooseModel ? '' : 'noModel'">
        <!-- 箭头 -->
        <div
          v-if="showChooseModel && videoType"
          class="openChooseModel"
          @click="showChooseModel = false"
        >
          <img src="../../assets/img/arrowLeft.png" alt="" />
        </div>
        <div
          v-if="!showChooseModel"
          class="closeChooseModel"
          @click="showChooseModel = true"
        >
          <img src="../../assets/img/arrowRight.png" alt="" />
        </div>
        <!-- tab栏 -->
        <div class="tab" v-show="showChooseModel">
          <div
            class="tabItem"
            :class="modelTabItemActive == 0 ? 'tabItemActive' : ''"
            @click="changeTabSex(0)"
          >
            全部
          </div>
          <div
            class="tabItem"
            :class="modelTabItemActive == 1 ? 'tabItemActive' : ''"
            @click="changeTabSex(1)"
          >
            男性
          </div>
          <div
            class="tabItem"
            :class="modelTabItemActive == 2 ? 'tabItemActive' : ''"
            @click="changeTabSex(2)"
          >
            女性
          </div>
        </div>
        <!-- 模版列表 -->
        <div
          class="modeListBox"
          v-show="showChooseModel"
          v-infinite-scroll="loadMoreModel"
          :infinite-scroll-disabled="overLoadModel"
        >
          <div
            class="modeListBoxItme"
            v-for="item in modeList"
            :key="item.id"
            @click="clickModelItem(item)"
          >
            <img class="boxCentreImg" :src="item.coverImg" alt="" />
          </div>
        </div>
      </div>
      <!-- 展示区 -->
      <div class="showModelImgBox">
        <img :src="modelImg" alt="" />
        <!-- 保存视频和生成视频 -->
        <div class="btnBox" v-show="!showChooseModel">
          <div class="customBtn" style="margin-right: 15px">
            {{ $t("createVideo.saveVideo") }}
          </div>
          <div class="customBtn">{{ $t("createVideo.generateVideo") }}</div>
        </div>
      </div>
    </div>
    <!-- 右侧栏 -->
    <div class="right">
      <!-- tab栏 -->
      <div class="tab">
        <div
          class="tabItem"
          :class="tabItemActive == 1 ? 'tabItemActive' : ''"
          @click="tabItemActive = 1"
        >
          文案
        </div>
        <div
          class="tabItem"
          :class="tabItemActive == 2 ? 'tabItemActive' : ''"
          @click="tabItemActive = 2"
        >
          背景
        </div>
        <div
          class="tabItem"
          :class="tabItemActive == 3 ? 'tabItemActive' : ''"
          @click="tabItemActive = 3"
        >
          素材
        </div>
        <div
          class="tabItem"
          :class="tabItemActive == 4 ? 'tabItemActive' : ''"
          @click="tabItemActive = 4"
        >
          字幕
        </div>
      </div>
      <!-- 文案 -->
      <div v-show="tabItemActive == 1" class="tabContent tab1">
        <!-- 标题 -->
        <div class="title">
          <el-input
            style="width: 90%"
            maxlength="15"
            v-model="title"
            :placeholder="$t('createVideo.typeTitle')"
          />
          <el-icon class="icon-edit"><i-ep-edit /></el-icon>
        </div>
        <!-- 文本域 -->
        <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>
      </div>
      <!-- 背景 -->
      <div v-show="tabItemActive == 2" class="tabContent tab2">
        <div class="tab">
          <div
            class="tabItem"
            :class="bjTabItemActive == 1 ? 'tabItemActive' : ''"
            @click="bjTabItemActive = 1"
          >
            系统背景
          </div>
          <div
            class="tabItem"
            :class="bjTabItemActive == 2 ? 'tabItemActive' : ''"
            @click="bjTabItemActive = 2"
          >
            个人背景
          </div>
        </div>
        <!-- 背景图片展示 -->
        <div
          class="bjSystemBox"
          v-infinite-scroll="loadMoreSystemBGI"
          :infinite-scroll-disabled="overLoadSystemBG"
        >
          <div class="bjSystemBoxItem" v-for="item in 15" :key="item">
            <img class="boxCentreImg" src="" alt="" />
          </div>
        </div>
      </div>
      <!-- 素材 -->
      <div v-show="tabItemActive == 3" class="tabContent">
        <div class="tab">
          <div
            class="tabItem"
            :class="scTabItemActive == 1 ? 'tabItemActive' : ''"
            @click="scTabItemActive = 1"
          >
            系统素材
          </div>
          <div
            class="tabItem"
            :class="scTabItemActive == 2 ? 'tabItemActive' : ''"
            @click="scTabItemActive = 2"
          >
            个人素材
          </div>
        </div>
      </div>
      <!-- 字幕 -->
      <div v-show="tabItemActive == 4" class="tabContent"></div>
    </div>
    <!-- 试听的mp3 -->
    <div style="opacity: 0; width: 0">
      <audio autoplay :src="previewAudioUrl" id="audio"></audio>
    </div>
  </div>
</template>

<script setup>
//#region  导入
import { getCurrentInstance } from "vue";
import {
  modeListApi,
  voiceTotalApi,
  chooseTypeApi,
  previewAudioApi,
  systemBGIListApi,
  personBGIListApi,
  systemSCIListApi,
  personSCIListApi,
} 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";
//#endregion   -----------------------------------

const route = useRoute();
const router = useRouter();
const { locale } = useI18n();
const lanChange = ref(locale);

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

//#region 选择模版弹出框
const videoType = ref(null); //判断横屏2还是竖屏1
const showChooseModel = ref(true); // 控制弹窗显示隐藏
const modeList = ref([]); //模版列表
const modelImg = ref(null); //模版回显图
const modelTabItemActive = ref(0); //模版tab栏
const modelPageNum = ref(1);
const modelPageSize = ref(20);
const overLoadModel = ref(true); //禁用模版加载更多
// 获取模版列表
async function getModeList(sex, pageNum, pageSize) {
  const res = await modeListApi(sex, pageNum, pageSize);
  modeList.value = res.data.list;
  overLoadModel.value = false;
}
// 点击模版
function clickModelItem(item) {
  modelImg.value = item.coverImg;
  showChooseModel.value = false;
  videoType.value = item.videoType;
}
// tab栏切换
function changeTabSex(index) {
  modeList.value = [];
  modelPageNum.value = 1;
  modelTabItemActive.value = index;
  overLoadModel.value = false;
  if (index == 0) {
    getModeList("", modelPageNum.value, modelPageSize.value);
  } else {
    getModeList(index, modelPageNum.value, modelPageSize.value);
  }
}
async function loadMoreModel(params) {
  modelPageNum.value += 1;
  if (modelTabItemActive.value == 0) {
    const res = await modeListApi("", modelPageNum.value, modelPageSize.value);
    modeList.value.push(...res.data.list);
    if (res.data.list.length == 0) {
      overLoadModel.value = true;
      modelPageNum.value = modelPageNum.value - 1;
    }
  } else {
    const res = await modeListApi(
      modelTabItemActive.value,
      modelPageNum.value,
      modelPageSize.value
    );
    modeList.value.push(...res.data.list);
    if (res.data.list.length == 0) {
      overLoadModel.value = true;
      modelPageNum.value = modelPageNum.value - 1;
    }
  }
}
//#endregion ----------------------------

//#region 右侧tab栏切换
const tabItemActive = ref(1);
//#endregion ----------------------------

//#region 文案及其音频
const title = ref(null);
const textareaContent = ref("");
function insertIcon() {
  const textarea = document.getElementById("textInputId");
  const icon = "🕗"; // 这里使用了一个星星作为示例图标，你可以替换为你自己的图标
  // 获取光标位置
  const startPos = textarea.selectionStart;
  const endPos = textarea.selectionEnd;
  // 在光标位置插入图标
  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 背景
const bjTabItemActive = ref(1); //系统或个人tab高亮
const systemBGIList = ref([]); //系统背景列表
const systemBGPageNum = ref(1); //系统背景页数
const overLoadSystemBG = ref(true);
async function getSystemBGIList() {
  const res = await systemBGIListApi(
    systemBGPageNum.value,
    20,
    videoType.value
  );
  systemBGIList.value = res.data.list;
  overLoadSystemBG.value = false;
}
// 加载更多系统背景图
async function loadMoreSystemBGI() {
  systemBGPageNum.value += 1;
  const res = await systemBGIListApi(
    systemBGPageNum.value,
    20,
    videoType.value
  );
  systemBGIList.value.push(...res.data.list);
  if (res.data.list.length == 0) {
    overLoadSystemBG.value = true;
    systemBGPageNum.value = modelPageNum.value - 1;
  }
}
// 当横屏竖屏改变时,重新获取背景列表
watch(
  () => videoType,
  (newValue, oldValue) => {
    console.log(123);
    systemBGPageNum.value = 1;
    getSystemBGIList();
  },
  { deep: true }
);
// 个人背景
const personBGIList = ref([]); //系统背景列表
const personBGPageNum = ref(1); //系统背景页数
const overLoadpersonBG = ref(true);
async function getpersonBGIList() {
  const res = await personBGIListApi(
    personBGPageNum.value,
    20,
    videoType.value
  );
  personBGIList.value = res.data.list;
  overLoadpersonBG.value = false;
}
// 加载更多系统背景图
async function loadMorepersonBGI() {
  personBGPageNum.value += 1;
  const res = await personBGIListApi(
    personBGPageNum.value,
    20,
    videoType.value
  );
  personBGIList.value.push(...res.data.list);
  if (res.data.list.length == 0) {
    overLoadpersonBG.value = true;
    personBGPageNum.value = modelPageNum.value - 1;
  }
}
//#endregion ----------------------------

//#region 素材
const scTabItemActive = ref(1);
//#endregion ----------------------------

//#region

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

//#region

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

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

onMounted(async () => {
  voiceTotal();
  await getModeList("", 1, 20);
});
</script>

<style lang="scss" scoped>
.page {
  height: calc(100vh - 80px);
  background-color: #fff;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 4;
  background-color: rgba(0, 0, 0, 0.5);
}
.left {
  position: relative;
  width: 68%;
  height: 100%;
  padding: 20px;
  // 选择模版弹出框
  .chooseModelBox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 90%;
    height: 100%;
    padding: 30px;
    transition: all 0.3s;
    background-color: #f1f2f6;
    z-index: 9;
    .openChooseModel,
    .closeChooseModel {
      position: absolute;
      top: 10px;
      width: 50px;
      height: 20px;
      z-index: 999;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .openChooseModel {
      right: 0px;
    }
    .closeChooseModel {
      right: -50px;
    }
    // tab栏
    .tab {
      margin: auto;
      margin-top: 10px;
      display: flex;
      width: 100%;
      height: 50px;
      background-color: #fff;
      margin-bottom: 10px;
      border-radius: 25px;
      .tabItem {
        flex: 1;
        text-align: center;
        line-height: 50px;
        border-radius: 25px;
        transition: all 0.3s;
        cursor: pointer;
      }
      .tabItemActive {
        background-color: #000;
        color: #fff;
      }
    }
    // 模版列表
    .modeListBox {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: calc(100% - 60px);
      padding: 20px;
      border-radius: 20px;
      background-color: #fff;
      overflow: hidden;
      overflow-y: scroll;
      .modeListBoxItme {
        position: relative;
        padding: 20px;
        width: 300px;
        height: 300px;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 0 10px 10px 0;
        border-radius: 15px;
        cursor: pointer;
        img {
          max-width: 100%;
          max-height: 100%;
          // max-width: 200px;
          // max-height: 200px;
        }
      }
    }
  }
  .noModel {
    width: 0;
    padding: 0;
  }
  // 展示区
  .showModelImgBox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
    z-index: 1;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 800px;
      max-height: 800px;
    }
    .btnBox {
      position: absolute;
      display: flex;
      bottom: 10px;
      right: 10px;
      width: 250px;
      .customBtn {
        width: 45%;
      }
    }
  }
}

.right {
  width: 32%;
  height: 100%;
  padding: 30px 30px 20px 30px;
  background-color: #f1f2f6;
  border-radius: 30px 0 0 0;
  position: relative;
  .tab {
    display: flex;
    width: 100%;
    height: 50px;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 25px;
    .tabItem {
      flex: 1;
      text-align: center;
      line-height: 50px;
      border-radius: 25px;
      transition: all 0.3s;
      cursor: pointer;
    }
    .tabItemActive {
      background-color: #000;
      color: #fff;
    }
  }
  .tabContent {
    padding: 20px;
    width: 100%;
    height: calc(100% - 60px);
    background-color: #fff;
    border-radius: 30px;
    .tab {
      background-color: #f1f2f6;
    }
  }
  .tab1 {
    .title {
      :deep(.el-textarea) {
        padding: 10px;
        overflow: hidden;
      }
      :deep(.el-textarea__inner) {
        border-radius: 15px;
      }
      :deep(.el-input) {
        padding-left: 10px;
        margin-bottom: 10px;
      }
      :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;
        vertical-align: middle;
      }
    }
    .text {
      padding: 10px;
      border: 1px solid #c4c8d0;
      border-radius: 15px;
      .el-button {
        float: right;
        margin-top: 10px;
      }

      :deep(.el-textarea__inner) {
        resize: none;
        box-shadow: none;
      }
    }
    p {
      margin: 7px 0;
    }
  }
  .tab2 {
    .bjSystemBox {
      display: flex;
      flex-wrap: wrap;
      height: calc(100% - 60px);
      overflow-y: scroll;
      background-color: pink;
      .bjSystemBoxItem {
        position: relative;
        margin-right: 3%;
        margin-bottom: 10px;
        width: 30%;
        height: 200px;
        background-color: red;
      }
    }
  }
}
</style>
