<template>
  <div :class="inPage ? 'page active' : 'page'">
    <div id="top"></div>
    <HeadTop />
    <!-- 中间内容区 -->
    <div class="vantLoadingBox" style="height: 550px" v-show="contentLoading">
      <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
    </div>
    <div v-show="!contentLoading" class="content">
      <!-- 展示图片 -->
      <div class="shouModelImg">
        <div id="editPosition" class="editPosition" :class="videoType == 2 ? 'verticalmodel' : ''">
          <EditPosition ref="EditPosition" :proportion="proportion" :imgUrl="imgUrl" :materialList="materialList" :videoType="videoType"></EditPosition>
        </div>
        <!-- <img :src="imgUrl" alt="" /> -->
        <!-- 字幕 -->
        <!-- <div
          v-html="textareaContent"
          v-show="showSubtitle"
          class="shouModelImg-subtitle"
        ></div> -->
      </div>
      <!-- 文字 -->
      <div class="addText">
        <div class="addText-title">
          <img src="../../assets/icon/icon-text.png" alt="" />
          添加文案
        </div>
        <div class="desalinate">
          <span>已录入{{ textareaContent.length }}字</span>
          &nbsp;&nbsp;
          <!-- <span>视频时长:&nbsp;00:16</span> -->
        </div>
      </div>
      <!-- 标题框 -->
      <div class="textInput">
        <div class="textInput-in">
          <!-- 标题 -->
          <el-input v-model="inputTitle" placeholder="请输入标题">
            <template slot="append">
              <img src="../../assets/icon/icon-pencil.png" alt="" />
            </template>
          </el-input>
          <div class="divider" />
          <!-- 语音内容 -->
          <el-input placeholder="请输入文案" @change="loadVoice" rows="4" type="textarea" v-model="textareaContent"></el-input>
        </div>
      </div>
      <!-- 播报声音 -->
      <div class="addText">
        <div class="addText-title">
          <img src="../../assets/icon/icon-sound.png" alt="" />
          选择播报声音
          <!-- <span class="redWord">(必选)</span> -->
        </div>
        <!-- 只有一级没有二级时 soundChoose.subTitle-->
        <div v-if="soundChoose.speakTypeStr && !soundChoose2">{{ soundChoose.title }} — {{ soundChoose.speakTypeStr }}</div>
        <!-- 有二级时 -->
        <div v-if="soundChoose2.speakTypeStr">{{ soundChoose2.title }} — {{ soundChoose2.speakTypeStr }}</div>
      </div>
      <button class="chooseSound" @click="clickBottomTab(1)">
        <img class="img" src="../../assets/icon/icon-microphone.png" alt="" />
        <span>选择声音</span>
      </button>

      <!-- 合成按钮 -->
      <div class="makeVideo" @click="submit(1)">立即制作</div>
      <!-- 上移下移 -->
      <div class="upAndBottomBtn">
        <div class="moveLayer" :class="videoType == 2 ? 'moveLayer1' : ''">
          <div class="btnContent" @click="$refs.EditPosition.controlImg(3)">
            <!-- <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" alt="" /> -->
            <img src="../../assets/icon/icon-up.png" alt="" />
            上移一层
          </div>
        </div>
        <div class="moveLayer below" :class="videoType == 2 ? 'below1' : ''">
          <div class="btnContent" @click="$refs.EditPosition.controlImg(4)">
            <!-- <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" alt="" /> -->
            <img src="../../assets/icon/icon-down.png" alt="" />
            下移一层
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div v-show="!contentLoading" class="bottom">
      <van-tabbar class="bottom-tab">
        <!-- <van-tabbar-item @click="clickBottomTab(1)">
          <span>选择声音</span>
          <template #icon="props">
            <img src="../../assets/icon/icon-microphone.png" />
          </template>
        </van-tabbar-item> -->
        <van-tabbar-item @click="clickBottomTab(2)">
          <span>更改背景</span>
          <template #icon="props">
            <img src="../../assets/icon/icon-background.png" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item @click="clickBottomTab(3)">
          <span>添加素材</span>
          <template #icon="props">
            <img src="../../assets/icon/icon-material.png" />
          </template>
        </van-tabbar-item>
        <!-- <van-tabbar-item @click="clickBottomTab(4)" disabled>
          <span v-show="showSubtitle">取消字幕</span>
          <span v-show="!showSubtitle">添加字幕</span>
          <template #icon="props">
            <img src="../../assets/icon/icon-subtitle.png" />
          </template>
        </van-tabbar-item> -->
      </van-tabbar>
    </div>

    <!-- 合成视频进度条 -->
    <div v-if="showSynthesisDialog" class="synthesisDialog" @touchmove.prevent="noScroll">
      <div class="synthesisDialog-in">
        <van-progress :percentage="percentageData" color="#7264F5" define-back-color="#f0effe" stroke-width="12" class="progress" />
        <div class="synthesisDialog-text">正在生成视频，请耐心等待！</div>
        <van-button type="default" @click="$router.push('/myPage')">回到主页</van-button>
      </div>
    </div>

    <!-- 点击tab栏弹出框 -->
    <van-action-sheet class="tabSheet" v-model="showTabSheet">
      <!-- 声音 -->
      <div v-show="bottomTabActive == 1">
        <!-- 顶部文字 -->
        <div class="tabSheet-title">
          <div>
            <img class="img" src="../../assets/icon/icon-microphone.png" alt="" />
            <span v-show="!showSoundList2">选择声音</span>
            <span v-show="showSoundList2">选择情绪</span>
          </div>
          <div @click="showTabSheet = !showTabSheet" v-show="showSoundList2">
            <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
          </div>
        </div>

        <!-- 主要内容 -->
        <div class="tabSheet-content">
          <!-- tab栏 -->
          <van-tabs v-if="!showSoundList2" color="#7264F5" line-width="46" line-height="6" title-inactive-color="#666" title-active-color="#333" v-model="soundListAction" swipeable>
            <van-tab v-for="(item, index) in soundTabList" :title="item" :key="index">
              <!-- 展示页 -->
              <div class="vantLoadingBox" style="height: 150px" v-show="soundLoading1">
                <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
              </div>
              <div class="list" v-show="!soundLoading1">
                <div v-if="textareaContent.length == 0">输入文案后才可以选择声音哦~ ~</div>
                <div v-if="soundItemList.length == 0 && textareaContent.length != 0">{{ soundTips ? soundTips : '试试输入长一点的句子吧~ ~' }}</div>

                <template v-if="soundItemList.length != 0">
                  <div @click="clickSoundItem(index, item)" class="listItem" :class="{ active: soundItemListAction == index }" v-for="(item, index) in soundItemList" :key="index">
                    <img src="../../assets/icon/icon-earphone.png" alt="" />
                    <div>
                      {{ item.subTitle }}-{{ item.title }}
                      <br />
                      {{ item.ageTypeStr }}
                    </div>
                  </div>
                </template>
              </div>
            </van-tab>
          </van-tabs>

          <!-- 二级列表显示 -->
          <div v-if="showSoundList2" class="SoundList2">
            <div class="vantLoadingBox" style="height: 150px" v-show="soundLoading2">
              <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
            </div>
            <div class="list" v-show="!soundLoading2">
              <div v-if="soundItemList2.length == 0">暂无数据</div>
              <template v-if="soundItemList.length != 0">
                <div @click="clickSoundItem2(index, item)" class="listItem" :class="{ active: soundItemListAction2 == index }" v-for="(item, index) in soundItemList2" :key="index">
                  <img src="../../assets/icon/icon-earphone.png" alt="" />
                  <div>{{ item.title }}-{{ item.speakTypeStr }}</div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>

      <!-- 背景 -->
      <div v-show="bottomTabActive == 2">
        <!-- 顶部文字 -->
        <div class="tabSheet-title">
          <div>
            <img class="img" src="../../assets/icon/icon-background.png" alt="" />
            更改背景
          </div>
          <div @click="sureImg">
            <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
          </div>
        </div>
        <!-- 主要内容 -->
        <div class="tabSheet-content">
          <!-- tab栏 -->
          <div class="myTab">
            <div @click="changeShowBGIList(0)" class="myTab-item" :class="{ active: bjAction == 0 }">
              <img src="../../assets/icon/icon-folder@2x.png" alt="" />
              背景库
            </div>
            <div @click="changeShowBGIList(1)" class="myTab-item" :class="{ active: bjAction == 1 }">
              <img src="../../assets/icon/icon-upload@2x.png" alt="" />
              我上传的
            </div>
          </div>
          <!-- 展示 -->
          <!-- <div v-if="systemBGIList.length == 0">暂无数据</div> -->
          <div class="myTab-show">
            <div class="myTab-show-title">
              图片
              <i></i>
            </div>
            <!-- <div class="vantLoadingBox" style="height: 50px" v-show="bjLoading1">
              <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
            </div> -->
            <div class="myTab-show-list">
              <!-- 上传 -->
              <div v-if="bjAction == 1" class="myTab-show-list-upload">
                <img src="../../assets/icon/icon-upload@2x.png" alt="" />
                <!-- 上传背景组件 -->
                <CutImg @getMyBGIListApi="getMyBGIListApi" class="CutImg" :type="4" :videoType="videoType"></CutImg>
              </div>
              <!-- 图片列表 -->
              <div @click="chooseImg(index, 'bj')" class="myTab-show-list-item" v-for="(item, index) in showBGIList" :key="index">
                <div :class="{ 'myTab-show-list-active': bjImgAction == index }">
                  <div class="whiteBox"></div>
                </div>
                <!-- 删除上传素材 -->
                <div @click="delImg(item.id)" class="icon-error" v-if="bjAction == 1 && bjImgAction == index">×</div>
                <!-- 中间图片 -->

                <img :src="item.material" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 素材 -->
      <div v-show="bottomTabActive == 3">
        <!-- 顶部文字 -->
        <div class="tabSheet-title">
          <div>
            <img class="img" src="../../assets/icon/icon-material.png" alt="" />
            添加素材
          </div>
          <div @click="sureImg">
            <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
          </div>
        </div>
        <!-- 主要内容 -->
        <div class="tabSheet-content">
          <!-- tab栏 -->
          <div class="myTab">
            <div @click="changeShowBGIList(2)" class="myTab-item" :class="{ active: scAction == 0 }">
              <img src="../../assets/icon/icon-folder@2x.png" alt="" />
              素材库
            </div>
            <div @click="changeShowBGIList(3)" class="myTab-item" :class="{ active: scAction == 1 }">
              <img src="../../assets/icon/icon-upload@2x.png" alt="" />
              我上传的
            </div>
          </div>
          <!-- 展示 -->
          <!-- <div v-if="showScList.length == 0">暂无数据</div> -->
          <div class="myTab-show">
            <div class="myTab-show-title">
              图片
              <i></i>
            </div>
            <div class="myTab-show-list">
              <!-- 上传 -->
              <div v-if="scAction == 1" class="myTab-show-list-upload">
                <img src="../../assets/icon/icon-upload@2x.png" alt="" />
                <!-- 上传图片组件 -->
                <CutImg class="CutImg" :type="5" @getMyScListApi="getMyScListApi"></CutImg>
              </div>
              <!-- 图片列表 -->
              <div @click="chooseImg(index, 'sc')" class="myTab-show-list-item" v-for="(item, index) in showScList" :key="index">
                <div :class="{ 'myTab-show-list-active': scImgAction == index }">
                  <div class="whiteBox"></div>
                </div>
                <!-- 删除上传素材 -->
                <div @click="delImg(item.id)" class="icon-error" v-if="scAction == 1 && scImgAction == index">×</div>
                <!-- 中间图片 -->
                <img :src="item.material" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-action-sheet>

    <!-- 试听的mp3 -->
    <audio autoplay :src="audioUrl"></audio>

    <!-- 切图 -->

    <!-- <CutImg
      ref="CutImgBg"
      id="CutImgBg"
      @getMyBGIListApi="getMyBGIListApi"
      class="CutImg"
      :type="4"
      :videoType="videoType"
    ></CutImg> -->
  </div>
</template>

<script>
// 组件
import Vue from 'vue';
import { Toast, Dialog } from 'vant';
import { mapState, mapActions } from 'vuex';
import HeadTop from './../../components/common/head.vue';
import CutImg from '../../components/CutImg.vue';
import EditPosition from '../../components/editPosition.vue';

// 工具
import { scrollToID } from '../../utils';
// 语言检测插件
import { franc } from 'franc';
// 接口
import {
  doCreateVideo,
  doFindVideoById,
  getVoiceList, // 获取声音列表,废弃
  getBackGroundList,
  doFindInviteCode,
  saveOrUpdateUserVideo
} from '@/api/generateVideo';
import { videoDetial, voiceList, voiceList2Api, systemBGIListApi, myBGIListApi, systemScListApi, myScListApi, delImgApi } from '@/api/editModel';
import { getModelDetailById } from '../../api/getPaper.js';

Vue.use(-Toast);
export default {
  components: {
    HeadTop,
    CutImg,
    EditPosition
  },
  data() {
    return {
      contentLoading: true,
      soundLoading1: true,
      soundLoading2: true,
      bjLoading1: true,
      bjLoading2: true,
      scLoading1: true,
      scLoading2: true,

      soundTips: '',

      timer: null,
      id: null,
      timeOuter: null,
      percentageData: 1, // 进度条的值
      pageNum: 1,
      pageSize: 20,
      proportion: null, //编辑页面的比例
      videoType: null, //判断横屏2还是竖屏1
      audioUrl: null, // 声音试听
      inPage: false,
      imgUrl: false, // 背景图
      materialList: {
        BGI: {},
        scList: [],
        virtual: {}
      }, // 传给组件的素材,背景,数字人数据

      personMouldId: null, //选择数字人id
      mouldSmId: null,
      saveID: null, // 作品id
      inputTitle: '您的新数字人', // 作品标题
      textareaContent: '', // 输入框内容
      //底部
      bottomTabActive: 2, // 底部导航高亮
      showSubtitle: false, // 是否展示字幕
      showSynthesisDialog: false, //合成进度条窗口显示隐藏
      showTabSheet: false, //tab栏弹出框显隐
      showSoundList2: false, //声音的二级显隐
      soundTabList: ['全部'], // 声音tab栏标题
      soundListAction: -1, //声音tab栏标题高亮
      soundItemList: [], // 声音展示一级列表
      soundItemList2: [], // 声音展示二级列表
      soundItemListAction: -1, // 声音展示列表高亮
      soundItemListAction2: -1, // 声音展示列表高亮二级
      soundChoose: {}, //选中的音频
      soundChoose2: {}, //选中的音频二级
      //编辑
      bjAction: 0, // 背景:素材库和上传高亮
      bjImgAction: -1, // 选中背景图高亮
      scAction: 0, // 素材:素材库和上传高亮
      scImgAction: -1, // 选中素材图高亮
      showBGIList: [], // 渲染时代替下面2个列表
      systemBGIList: [], // 背景库列表
      myBGIList: [], // 我上传的背景库列表
      showScList: [], // 渲染时代替下面2个列表
      systemScList: [], // 素材库列表
      myScList: [] // 我上传的素材库列表
    };
  },
  computed: {
    ...mapState({
      characters: state => state.publicObj.characters
    })
  },

  methods: {
    ...mapActions(['setCharacters']),
    // aaa() {
    //   console.log('aaa')
    //   this.$nextTick(() => {
    //     // document.getDetailById
    //     // this.$refs.CutImgBg.$refs.uploader.clickUpload()
    //     this.$refs.CutImgBg.$refs.uploader.beforeRead()
    //   })
    // },
    // 禁止滚动
    noScroll(e) {
      e.preventDefault();
    },
    // 点击底部tab栏
    clickBottomTab(index) {
      if (index == 1) {
        if (this.textareaContent == 0) {
          Toast.fail('输入文案后才可以选择声音哦~~');
          return;
        }
        this.showSoundList2 = false;
      }
      if (index != 4) {
        this.bottomTabActive = index;
        if (this.textareaContent.length == 0) {
          this.soundItemList = []; //清空处理
          this.soundItemList2 = []; //清空处理
        }
        console.log(this.bottomTabActive);
        this.showTabSheet = !this.showTabSheet;
      } else {
        //字幕切换
        this.showSubtitle = !this.showSubtitle;
      }
    },
    // 获取声音列表
    async loadVoice() {
      this.soundTips = '';
      if (this.textareaContent.length != 0) {
        const language = franc(this.textareaContent);
        console.log(language, '语种');
        const data = {
          personMouldId: this.personMouldId,
          paperwork: this.textareaContent
        };
        try {
          this.soundLoading1 = true;
          const res = await voiceList(data);
          console.log(res, '获取声音列表');
          this.soundItemList = res.data.list;
          this.soundLoading1 = false;
        } catch (error) {
          this.soundItemList = [];
          if (error.message == '暂不支持该语种') {
            this.soundTips = error.message;
          }
          this.soundLoading1 = false;
          console.log(error, 'error');
          Toast.fail(error.message);
        }
      } else {
        Toast('您还没有输入文案');
      }
    },
    // 点击声音列表中的某一项
    async clickSoundItem(index, item) {
      if (this.soundItemListAction != index) {
        this.soundItemListAction = index; //高亮
        this.soundChoose = item;

        this.showSoundList2 = true;
        this.soundLoading2 = true;
        const res = await voiceList2Api(item.id);

        let list = res.data.subVoiceMould ? res.data.subVoiceMould : [];
        console.log(list);
        let obj = JSON.parse(JSON.stringify(res));
        delete obj.data.subVoiceMould;
        let list2 = [{ ...obj.data }, ...list];

        this.soundItemList2 = list2 || [];
        this.soundLoading2 = false;
        // console.log(this.soundItemList2)
        // this.audioUrl = res.data.videoUrl
      } else {
        this.soundItemListAction = -1;
        this.soundChoose = {};
      }
    },
    // 点击声音列表中的某一项2级
    async clickSoundItem2(index, item) {
      if (this.soundItemListAction2 != index) {
        this.soundItemListAction2 = index; //高亮
        this.soundChoose2 = item;
        // 得到试听文件
        const res = await videoDetial(item.exampleVideoId);

        this.audioUrl = res.data.videoUrl;
      } else {
        this.soundItemListAction2 = -1;
        this.soundChoose2 = {};
      }
    },

    // 提交合成视频
    submit(type) {
      // type代表时保存还是点击生成视频按钮
      // 组装参数
      console.log(this.soundChoose.id);
      // 素材列表处理
      const scList = this.materialList.scList.map(item => {
        return {
          id: item.id,
          type: 5,
          material: item.material,
          x: item.x,
          y: item.y,
          z: item.z,
          w: item.w,
          h: item.h
        };
      });
      // 数字人处理
      const shuziren = {
        id: this.materialList.virtual.id,
        type: 1,
        material: this.materialList.virtual.material,
        x: this.materialList.virtual.x,
        y: this.materialList.virtual.y,
        z: this.materialList.virtual.z,
        w: this.materialList.virtual.w,
        h: this.materialList.virtual.h
      };
      const data = {
        id: this.id,
        videoType: this.videoType, //横屏竖屏
        personMouldId: this.materialList.virtual.id, //数字人id
        voiceMouldIds: [this.soundChoose2.id ? this.soundChoose2.id : this.soundChoose.id], //声音id
        title: this.inputTitle, //标题
        paperwork: this.textareaContent, //语音内容
        backgroundId: this.materialList.BGI.id + '', //背景id
        personJson: JSON.stringify(shuziren), // 数字人
        materialAllJson: JSON.stringify([...scList]) // 素材
      };
      console.log(data, '最终提交的参数');
      if (type == 1) {
        Toast.loading({
          duration: 5000,
          message: '加载中...',
          forbidClick: true
        });
        if (!this.textareaContent) {
          Toast.fail('请输入文案内容！');
          return;
        }
        // 当没有选择声音参数时
        if (!this.soundChoose.id) {
          Toast.fail('请选择声音！');
          return;
        }
        // 当没有选择声音参数时
        // if (!this.soundChoose2.id) {
        //   Toast.fail('请选择声音！');
        //   return;
        // }
        // if (!this.inputTitle) {
        //   Toast.fail('请输入文案标题！')
        //   return
        // }
      }
      // 先保存草稿,里面再调生成视频的接口
      this.saveOrUpdate(data, type);
    },

    /**
     * @description:保存或修改用户作品
     */
    async saveOrUpdate(data, type) {
      console.log(data);
      try {
        const res = await saveOrUpdateUserVideo(data);
        console.log(res, '保存或修改用户作品');
        // this.createVideo({ id: this.saveID })
        if (type == 1) {
          this.createVideo({ id: this.$route.query.id });
        }
      } catch (error) {
        if (error.message != '视频生成中') {
          console.log(error, 'error');
          Toast.fail(error.message);
        }
      }
    },
    /**
     * @description:生成视频
     */
    async createVideo(data) {
      let that = this;
      try {
        const res = await doCreateVideo(data);
        console.log(res, '生成视频');
        Toast.success('提交成功！');
        // *#06#
        that.showSynthesisDialog = true; //显示进度条

        this.timeOuter = setTimeout(() => {
          this.isShowCover = true;
        }, 2000);
        that.timer = setInterval(() => {
          if (that.percentageData < 98) {
            that.percentageData += 1;
          } else {
            that.percentageData == 98;
          }
          // 重复调取此接口直到videoStatus == 2 || 3
          this.getVideo(that.$route.query.id);
          // if (this.timerOver) {
          //   clearInterval(timer)
          //   this.isShowCover = false
          // }
        }, 1000);
      } catch (error) {
        console.log(error, 'error');
        Toast.fail(error.message);
      }
    },
    /**
     * @description:通过id获取视频
     */
    async getVideo(id) {
      try {
        const res = await doFindVideoById(id);
        console.log(res, '通过id获取视频');
        if (res.data.videoStatus == 2) {
          this.percentageData == 99;
          this.showSynthesisDialog = false; //隐藏进度条
          this.percentageData = 0;
          clearInterval(this.timer);
          this.timer = null;
          this.isShowCover = false;
          clearTimeout(this.timeOuter);
          Toast.success('视频生成成功！');
          const url = res.data.videoPathUri + res.data.videoPath;
          console.log(url, 'url');
          this.$router.push({
            // path: '/downloadVideo',
            path: '/videoDownload',
            query: {
              id: this.$route.query.id,
              videoId: res.data.videoId,
              videoUrl: url
            }
          });
          // this.timerOver = true
          return;
        } else if (res.data.videoStatus == 3) {
          console.log(res.data.videoStatus, '看看id是不是3');
          this.showSynthesisDialog = false; //隐藏进度条
          this.percentageData = 0;
          Toast.fail(`视频生成失败！失败原因：${res.data.videoMsg}`);
          // this.timerOver = true
          clearTimeout(this.timer);
          this.timer = null;
          // clearTimeout(this.timeOuter)
          this.isShowCover = false;
          return;
        }
      } catch (error) {
        console.log(error, 'error');
        Toast.fail(error.message);
      }
    },
    // 根据作品ID获取信息
    async getDetailById(id) {
      try {
        this.contentLoading = true;
        const res = await getModelDetailById(id);

        // console.log(JSON.parse(res.data.personMouldSm))
        console.log();
        this.materialList.BGI = JSON.parse(res.data.backgroundSm) || {};
        // this.materialList.BGI.id = JSON.parse(res.data.backgroundSm).id + '';
        this.materialList.BGI.id = res.data.backgroundId + '';
        this.materialList.scList = res.data.materialAllJson ? JSON.parse(res.data.materialAllJson) : [];
        this.materialList.virtual = JSON.parse(res.data.personJson) || {};
        if (!this.materialList.virtual.w) {
          this.materialList.virtual = {
            ...this.materialList.virtual,
            x: 100,
            y: 0,
            z: 0,
            w: 1,
            h: 1
          };
        }

        this.videoType = res.data.videoType;
        this.id = res.data.id;
        // this.imgUrl = res.data.personMould.coverImg
        this.personMouldId = res.data.personMouldId;
        this.mouldSmId = res.data.personMouldSmId;
        this.inputTitle = res.data.title ? res.data.title : '您的新数字人';
        this.textareaContent = res.data.paperwork || '';
        this.soundChoose.id = res.data.voiceMouldId;
        this.soundChoose.mouldSmId = res.data.voiceMouldSmId;
        // console.log(res.data.voiceMouldSm, 111111111111111);
        this.soundChoose.title = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).title : '';
        this.soundChoose2.subTitle = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).subTitle : '';
        this.soundChoose2.title = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).title : '';
        this.soundChoose2.speakTypeStr = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).speakTypeStr : '';
        this.soundChoose2.id = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).id : '';
        // console.log(this.soundChoose.title, this.soundChoose2.speakTypeStr, '112233');
        if (this.textareaContent.length != 0) {
          await this.loadVoice(); // 获取音频列表
        }
        this.soundItemListAction = this.soundItemList.findIndex(item => {
          return item.id == this.soundChoose.id;
        }); //高亮处理
        this.contentLoading = false;
        // backgroundMouldId: '', // 背景id
        // backgroundMouldSmId: '', //背景标识
        // 如果视频生成了
        // if ([2, 4, 5, 6].includes(res.data.videoStatus)) {
        //   this.$router.push({
        //     // path: '/downloadVideo',
        //     path: '/videoDownload',
        //     query: {
        //       id: this.$route.query.id
        //     }
        //   });

        //   return;
        // }
        // if ([1].includes(res.data.videoStatus)) {
        //   this.$router.push('/myPage');
        //   return;
        // }
      } catch (error) {
        console.log(error, 'error');
        Toast.fail(error.message);
      }
    },
    // 点击选中背景图或者素材
    chooseImg(index, type) {
      if (type == 'bj') {
        if (this.bjImgAction == -1 || this.bjImgAction != index) {
          this.bjImgAction = index;
        } else if (this.bjImgAction == index) {
          this.bjImgAction = -1;
        }
      }
      if (type == 'sc') {
        if (this.scmgAction == -1 || this.scImgAction != index) {
          this.scImgAction = index;
        } else if (this.scImgAction == index) {
          this.scImgAction = -1;
        }
      }
    },
    // 点击对钩确定背景或者素材图
    sureImg() {
      let that = this;
      // 背景
      if (this.bottomTabActive == 2 && this.bjImgAction != -1) {
        // Dialog.confirm({
        //   // title: '退出登录',
        //   message: '您确定要用这张背景图吗？'
        // })
        //   .then(() => {
        if (that.bjAction == 0) {
          that.materialList.BGI = that.systemBGIList.find((item, index) => {
            return index == that.bjImgAction;
          });
        } else if (that.bjAction == 1) {
          that.materialList.BGI = that.myBGIList.find((item, index) => {
            return index == that.bjImgAction;
          });
        }
        this.showTabSheet = false;
        // })
        // .catch(() => {
        //   console.log('false')
        //   this.showTabSheet = false
        //   return
        // })
      }
      // 素材
      else if (this.bottomTabActive == 3 && this.scImgAction != -1) {
        // Dialog.confirm({
        //   // title: '退出登录',
        //   message: '您确定要用这张素材图吗？'
        // })
        //   .then(() => {
        if (that.scAction == 0) {
          let scItem = that.systemScList.find((item, index) => {
            return index == that.scImgAction;
          });
          that.materialList.scList.push({
            ...scItem,
            x: 0,
            y: 0,
            z: 0,
            w: 1,
            h: 1
          });
        } else if (that.scAction == 1) {
          let scItem = that.myScList.find((item, index) => {
            return index == that.scImgAction;
          });
          that.materialList.scList.push({
            ...scItem,
            x: 0,
            y: 0,
            z: 0,
            w: 1,
            h: 1
          });
        }
        this.showTabSheet = false;
        // })
        // .catch(() => {
        //   console.log('false')
        //   this.showTabSheet = false
        //   return
        // })
      }
      // 啥没选
      else {
        this.showTabSheet = false;
      }
    },
    // 切换背景图/素材图的展示列表
    changeShowBGIList(type) {
      if (type == 0) {
        this.bjAction = 0;
        this.bjImgAction = -1;
        this.showBGIList = this.systemBGIList;
      }
      if (type == 1) {
        this.bjAction = 1;
        this.bjImgAction = -1;
        this.showBGIList = this.myBGIList;
      }
      if (type == 2) {
        this.scAction = 0;
        this.scImgAction = -1;
        this.showScList = this.systemScList;
      }
      if (type == 3) {
        this.scAction = 1;
        this.scImgAction = -1;
        this.showScList = this.myScList;
      }
    },
    /**
     * @description:获取系统背景图
     */
    async getSystemBGIList() {
      try {
        this.bjLoading1 = true;
        const res = await systemBGIListApi(this.pageNum, this.pageSize, this.videoType);
        this.systemBGIList = res.data.list;
        this.showBGIList = this.systemBGIList;
        this.bjLoading1 = false;
      } catch (error) {
        console.log(error);
        this.bjLoading1 = false;
      }
    },

    /**
     * @description:获取我上传的背景图
     */
    async getMyBGIListApi() {
      try {
        this.bjLoading2 = true;
        const res = await myBGIListApi(this.pageNum, this.pageSize, this.videoType);
        this.myBGIList = res.data.list;
        this.bjLoading2 = false;
      } catch (error) {
        console.log(error);
        this.bjLoading2 = false;
      }
    },

    /**
     * @description:获取系统素材
     */
    async getSystemScList() {
      try {
        this.scLoading1 = true;
        const res = await systemScListApi(this.pageNum, this.pageSize);
        this.systemScList = res.data.list;
        this.showScList = this.systemScList;
        this.scLoading1 = false;
      } catch (error) {
        console.log(error);
        this.scLoading1 = false;
      }
    },

    /**
     * @description:获取我上传的素材
     */
    async getMyScListApi() {
      try {
        this.scLoading2 = true;
        const res = await myScListApi(this.pageNum, this.pageSize);
        this.myScList = res.data.list;
        this.scLoading2 = false;
      } catch (error) {
        console.log(error);
        this.scLoading2 = false;
      }
    },

    /**
     * @description:删除上传的背景或素材
     */
    async delImg(id) {
      Dialog.confirm({
        message: '确认删除吗？'
      })
        .then(async () => {
          const res = await delImgApi(id);
          if (this.bottomTabActive == 2) {
            await this.getMyBGIListApi();
            this.changeShowBGIList(1);
          }
          if (this.bottomTabActive == 3) {
            await this.getMyScListApi();
            this.changeShowBGIList(3);
          }
        })
        .catch(() => {});
    },

    go(url) {
      this.$router.push(url);
    }
  },
  created() {},
  async mounted() {
    this.inPage = true;
    scrollToID('top');

    await this.getDetailById(this.$route.query.id);
    this.getSystemBGIList();
    this.getMyBGIListApi();
    this.getSystemScList();
    this.getMyScListApi();

    const elementWidth = document.getElementById('editPosition').clientWidth;
    console.log(elementWidth);
    // 根据横竖屏来确定比例   1竖2横
    if (this.videoType == 1) {
      this.proportion = 1080 / elementWidth;
      console.log(this.proportion);
    } else if (this.videoType == 2) {
      this.proportion = 1920 / elementWidth;
      console.log(this.proportion);
    }
  },
  async beforeDestroy() {
    this.timeOuter = null; // 清除定时器
    clearInterval(this.timer);
    this.timer = null; // 清除定时器
    await this.submit(2); // 保存草稿
    console.log('保存了');
  }
};
</script>

<style lang="scss" scoped>
.chooseSound {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  width: 225px;
  height: 50px;
  text-align: center;
  font-size: 20px;
  line-height: 50px;
  border: 1px solid #85a5f9;
  .img {
    margin-top: -3px;
    margin-right: 3px;
    width: 16px;
    height: 16px;
  }
}
.editPosition {
  position: relative;
  // transform: scale(0.2);
  width: 216px;
  height: 384px;
  // width: 1080px;
  // height: 1920px;
  border-radius: 12px;
  overflow: hidden;
  background-color: pink;
}
.verticalmodel {
  width: 384px !important;
  height: 216px !important;
  // width: 1920px !important;
  // height: 1080px !important;
  margin-bottom: 50px;
}
.CutImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page {
  // transform会导致其子元素固定定位失效
  // transform: translateX(30%);
  opacity: 0;
  transition: all 0.5s; // global-transition

  &.active {
    opacity: 1;
    // transform: translateX(0);
  }
}

.content {
  position: relative;
  margin-top: 10px;
  padding: 0 10px;
  padding-bottom: 190px;

  .shouModelImg {
    display: flex;
    position: relative;
    justify-content: center;
    width: 100%;

    img {
      width: 200px;
      height: 351px;
      border-radius: 12px;
    }

    &-subtitle {
      position: absolute;
      top: 220px;
      left: 50%;
      transform: translateX(-50%);
      padding: 2px 6px;
      width: 160px;
      height: 24px;
      line-height: 20px;
      background: rgba(0, 0, 0, 0.5);
      font-size: 14px;
      color: #fff;
      border-radius: 3px;
    }
  }

  .addText {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    &-title {
      font-size: 16px;
      font-weight: 600;
      color: #000;
      img {
        width: 24px;
        height: 24px;
        margin-right: 5px;
      }
    }
  }

  .textInput {
    margin-top: 10px;
    padding: 1px;
    width: 100%;
    background: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1));
    border-radius: 6px;

    &-in {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 6px;

      ::v-deep .el-input-group__append {
        padding: 0;
      }

      img {
        float: right;
        width: 16px;
        height: 16px;
        margin: 10px;
      }
    }

    .divider {
      transform: scaleY (0.25);
      width: 100%;
      height: 1px;
      border-top: 1px solid;
      border-image: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1)) 1 1;
    }

    ::v-deep .el-input__inner {
      border: none;
      background-color: #faf9fe;
    }

    ::v-deep .el-textarea__inner {
      border: none;
      background-color: #faf9fe;
    }
  }

  .makeVideo {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    // margin: 15px 20px 0;
    width: 325px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    color: #fff;
    background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
    border-radius: 25px;
  }

  .upAndBottomBtn {
    .moveLayer {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 20%;
      right: 5px;
      // padding-left: 10px;
      width: 70px;
      height: 22px;
      font-size: 10px;
      line-height: 28px;
      text-align: center;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
      background-color: rgba(255, 255, 255, 1);
      border-radius: 11px;
    }
    .moveLayer1 {
      top: 35% !important;
      left: 20% !important;
    }
    img {
      vertical-align: middle;
      width: 10px;
      height: 11px;
      margin: 1px 0 2px 0;
    }

    .below {
      top: 25%;
    }
    .below1 {
      top: 35% !important;
      left: 60% !important;
    }

    .active {
      // opacity: 0.5;
    }
  }
}

.bottom {
  ::v-deep .van-tabbar-item {
    color: rgba(51, 51, 51, 1) !important;
    font-size: 10px !important;
  }
}

.synthesisDialog {
  position: fixed;
  top: 0;
  left: 0;
  // width: 100vw;
  // height: 110vh;
  width: 100%;
  height: 100%;
  z-index: 99999;
  color: #333;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  ::v-deep .el-progress-bar {
  }
  &-in {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%);
    padding: 0 15px;
    padding-top: 40px;
    width: 315px;
    height: 145px;
    background-color: #fff;
    border-radius: 12px;
    ::v-deep .van-button {
      float: right;

      height: 40px;
      color: #fff;
      border-radius: 40px;
      background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
    }
    .progress {
      width: 280px;

      ::v-deep .el-progress__text {
        margin-left: 15px;
      }
    }
  }

  &-text {
    margin-top: 10px;
    font-size: 12px;
  }
}

.tabSheet {
  height: 280px;
  padding-bottom: 0px;
  background-color: #f9f9f9;

  &-title {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    height: 40px;
    font-size: 13px;
    line-height: 40px;
    background-color: #fff;

    .img {
      margin-top: -3px;
      margin-right: 3px;
      width: 16px;
      height: 16px;
    }

    .yesImg {
      margin-top: -3px;
      width: 24px;
      height: 16px;
    }
  }

  &-content {
    height: 220px;
    padding: 0 10px;
    background-color: #f9f9f9;

    ::v-deep .van-tab {
      background-color: #f9f9f9;
    }

    ::v-deep .van-tab--active {
      font-size: 17px;
      font-weight: 700;
    }

    .list {
      height: 170px;
      overflow-y: scroll;
      // scrollbar-width: none;
      // -ms-overflow-style: none;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;

      .listItem {
        display: flex;
        justify-content: space-between;
        padding: 12px;
        margin-bottom: 10px;
        width: 170px;
        height: 50px;
        overflow: hidden;
        background: rgba(186, 186, 189, 0.5);
        border-radius: 24px;
        color: #fff;

        img {
          width: 32px;
        }

        > div {
          flex: 1;
          margin-left: 12px;
        }
      }

      .active {
        background: #7264f5;
      }
    }

    .list::-webkit-scrollbar {
      width: 0;
    }
  }

  .SoundList2 {
    overflow: hidden;
    height: 240px;
    // padding: 10px 10px 10px;
    padding-top: 10px;
    &-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      width: 100%;
      .img {
        width: 16px;
        height: 16px;
      }

      .yesImg {
        float: right;
        margin-top: -3px;
        margin-right: 3px;
        width: 16px;
        height: 16px;
        margin-top: -3px;
        width: 24px;
        height: 16px;
      }
    }
    .list {
      height: 240px;
      margin-top: 0px;
    }
    .list::-webkit-scrollbar {
      width: 0;
      display: none;
    }
  }
  .SoundList2::-webkit-scrollbar {
    width: 0;
    display: none;
  }
  .myTab {
    display: flex;
    margin: 10px 0;
    padding: 5px;
    width: 100%;
    height: 40px;
    background-color: #eeeeee;
    border-radius: 6px;

    &-item {
      width: 50%;
      height: 30px;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      background-color: #eeeeee;
      border-radius: 6px;

      img {
        width: 20px;
        height: 16px;
        margin-right: 8px;
      }
    }

    .active {
      background-color: #fff;
    }

    &-show {
      width: 100%;
      height: 170px;

      &-title {
        font-size: 16px;

        i {
          display: block;
          margin-top: 4px;
          margin-left: 3px;
          width: 23px;
          height: 3px;
          background: #7264f5;
          border-radius: 2px;
        }
      }

      &-list {
        height: 145px;
        padding-left: 4px;
        overflow-y: scroll;
        display: flex;
        justify-content: start;
        flex-wrap: wrap;

        &-item {
          display: flex;
          align-items: center;
          position: relative;
          margin-right: 6px;
          margin-top: 10px;
          width: 80px;
          height: 142px;
          z-index: 9;
          background-color: #fff;
          border-radius: 10px;
          img {
            // background: red;
            width: 100%;
            // width: 80px;
            max-height: 142px;
            border-radius: 12px;
          }

          .icon-error {
            float: left;
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 99999;
            display: block !important;
            float: right;
            width: 12px;
            height: 12px;
            line-height: 12px;
            text-align: center;
            color: #fff;
            background: #666666;
            border-radius: 6px;
          }

          &:nth-child(4n) {
            // margin-right: 0px !important;
          }
        }

        &-active {
          position: absolute;
          top: -3px;
          left: -3px;
          padding: 1px;
          z-index: -1;
          width: 86px;
          height: 148px;
          border-radius: 12px;

          background: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1));

          .whiteBox {
            transition: all 0.5s;
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-radius: 12px;
          }
        }

        &-upload {
          position: relative;
          margin-right: 10px;
          margin-top: 10px;
          width: 80px;
          height: 142px;
          background: #ddd;
          border-radius: 10px;
          overflow: hidden;
          img {
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          input {
            width: 100%;
            height: 100%;
            opacity: 0;
          }
        }
      }
    }
  }

  // 隐藏滚动条
  .myTab-show-list::-webkit-scrollbar {
    display: none;
  }
}
</style>
