<template>
  <div class="aiTranslate">
    <div class="ai-left">
      <div class="left-title">{{courseName}}</div>
      <ul class="ai-list">
        <li class="ai-item" v-for="(item, index) in videoList" @click="currentVideo = item" :class="{'active': currentVideo.id === item.id}" :key="index">
          <div class="ai-item-title">{{item.name}}</div>
        </li>
      </ul>
    </div>
    <div class="ai-right">
      <div class="right-title">
        <h3>{{currentVideo.name}}</h3>
        <div>
          <el-button type="primary" @click="status = 1">下架本课程AI翻译</el-button>
        </div>
      </div>
      <div class="ai-content">
        <div class="videoBox">
          <videoPlayer :src="testUrl" style="height: auto;"> </videoPlayer>
          <div class="video-content">
            <div class="select-lang">
              <img src="@/assets/images/course/languageIcon.png" alt="" width="10" height="10">
              <span>本课程支持语种：</span>
              <el-button type="primary" @click="setLanguage()" icon="el-icon-connection">设置语种</el-button>
            </div>
            <div class="lang-content">
              <div class="lang-item" v-for="(item, index) in selectedLang" :key="index">
                <span>{{ item.label }}</span>
                <span :class="item.aiTranslate == 1 ? 'custom-putaway' : 'custom-takeout'">{{ item.aiTranslate == 1 ? '已上架' : '已下架' }}</span>
                <el-button  type="text" @click="item.aiTranslate = item.aiTranslate == 1 ? 0 : 1">{{ item.aiTranslate == 1 ? '下架' : '上架' }}</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="videoOperation">
          <div class="opera-title">
            <span>目标语种</span>
             <el-select v-model="value" placeholder="请选择目标语种" style="flex: 1;">
              <el-option
                v-for="item in selectAllLang"
                :key="item.srclang"
                :label="item.label"
                :value="item.srclang"
                >
              </el-option>
            </el-select>
            <el-button type="primary" @click="status = 2">加载字幕</el-button>
          </div>
          <div class="opera-content">
            <div class="bg-gray" v-show="status != 4">
              <p v-show="status == 1" v-html="aiTranslate"></p>
              <p v-show="status == 2" style="color: rgba(207, 207, 207, 1);text-align: center;margin-top: 48%;">AI 翻译重新生成中，过程可能耗时较长，<br>无需在此等待哦～</p>
              <img v-show="status == 3" src="@/assets/images/course/generationFailed.png" alt="" width="150" height="159" style="display: flex;margin: 35% auto 0 auto;">
              <img v-show="status == 5" src="@/assets/images/course/selectLanguage.png" alt="" width="112" height="130" style="display: flex;margin: 35% auto 0 auto;">
            </div>
            <el-input v-show="status == 4"
              type="textarea"
              placeholder="请输入内容"
              autosize
              v-model="aiTranslate">
            </el-input>
            <div class="opera-btn">
              <el-button v-show="status == 1" type="primary" plain round size="mini" @click="updateDialogVisible = true">重新生成</el-button>
              <el-button v-show="status == 1" type="primary" plain round size="mini" @click="status = 4">编辑</el-button>
              <el-button v-show="status == 4" plain round size="mini" @click="status = 1">取消</el-button>
              <el-button v-show="status == 4" type="primary" plain round size="mini" @click="status = 1">确认</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="确认同步更新吗"
      :visible.sync="updateDialogVisible"
      width="420px"
      style="border-radius: 10px;"
      center>
      <p style="text-align: center;">系统将根据当前最新中文内容重新生成其他语种的翻译，您此前对翻译的修改将会丢失！</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button style="margin-left: 60px;" type="primary" @click="updateDialogVisible = false">确认同步更新</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="AIf翻译"
      :visible.sync="selectDialogVisible"
      width="500px"
      class="select-dialog">
      <div class="select-dialog-content">
        <p>请选择该课程所支持语种</p>
        <el-select v-model="selectLang" placeholder="请选择目标语种" style="width: 100%;" multiple>
          <el-option
            v-for="item in selectAllLang"
            :key="item.srclang"
            :label="item.label"
            :value="item.srclang"
            >
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectDialogVisible = false">取 消</el-button>
        <el-button style="" type="primary" @click="selectDialogVisible = false">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import videoPlayer from "@/components/VideoPlayer/index.vue";
import { mapGetters } from 'vuex';
export default {
  name: 'aiTranslate',
  // ai播放器相关
  components: {
    videoPlayer
  },
  data() {
    return {
      courseName: '企业经营法则--课程单元',
      videoList: [
        {
          id: 1,
          name: '1. 开源节流1',
          aiTranslate: '人工智能（AI）是让计算机模拟人类智能的技术，核心包括机器学习、深度学习等。主要分为弱 AI（专注特定任务）和强 AI（通用智能）两类。应用涵盖医疗诊断、自动驾驶、语音助手等多个领域。它通过数据学习模式，实现预测和适应能力，正在改变生活方式和工作方式。未来发展需平衡创新与伦理考量，确保对人类社会有益。'
        },
        {
          id: 2,
          name: '2. 企业经营法则总述',
          aiTranslate: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
        },
        {
          id: 3,
          name: '3. 企业经营法则总述',
          aiTranslate: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
        },
        {
          id: 4,
          name: '4. 企业经营法则总述',
          aiTranslate: '本课程将介绍企业经营法则的总述，包括企业经营的基本原理、经营策略、经营模式等。'
        },
      ],
      testUrl: 'https://vjs.zencdn.net/v/oceans.mp4',
      currentVideo: {},
      aiTranslate: `
00:00:01/00:00:03
Hello everyone in the audience

00:00:03/00:00:05
today I want to share with you the topic of

00:00:05/00:00:09
"The Development History and Future Prospects of Computer Technology -
      `,
      status: '1', // 1: 正常 2: 生成中 3: 错误 4: 编辑中 5: 未选择语种
      selectedLang: [
        {
          label: '英文',
          srclang: 'en',
          aiTranslate: 1,
        },
        {
          label: '中文',
          srclang: 'zh',
          aiTranslate: 1,
        },
        {
          label: '日文',
          srclang: 'ja',
          aiTranslate: 1,
        },
        {
          label: '韩文',
          srclang: 'ko',
          aiTranslate: 1,
        },
        {
          label: '法文',
          srclang: 'fr',
          aiTranslate: 0,
        },
      ],
      updateDialogVisible: false,
      selectDialogVisible: false,
      selectLang: [],
    }
  },
  computed: {
      ...mapGetters(['selectAllLang']),
  },
  mounted() {
    this.currentVideo = this.videoList[0];
  },
  methods: {
    setLanguage(){
      this.selectDialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.aiTranslate{
  height: 100%;
  display: flex;
  padding: 10px;
  justify-content: space-between;
  gap: 15px;
  background: #f4f7fa;
  .ai-left{
    padding: 9px 10px;
    width: 24%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    .left-title{
      background: rgba(239, 244, 252, 1);
      padding: 15px;
      text-align: center;
      color: rgba(75, 92, 118, 1);
      font-family: Noto Sans SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 23px;
      letter-spacing: 0px;
    }
    .ai-list{
      margin: 0;
      .ai-item{
        cursor: pointer;
        padding: 15px;
        text-align: center;
        color: rgba(75, 92, 118, 1);
        font-family: Noto Sans SC;
        font-size: 16px;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: 0px;
        padding: 17px 31px;
        border-bottom: 1px solid rgba(240, 240, 240, 1);
        text-align: left;
        &:hover{
          background: rgba(240, 240, 240, 1);
        }
        &.active{
          color: rgba(64, 158, 255, 1);
          font-weight: 500;
        }
      }
    }
  }
  .ai-right{
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    .right-title{
      display: flex;
      padding: 0 28px;
      height: 76px;
      border-bottom: 1px solid rgba(229, 231, 235, 1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3{
        color: rgba(17, 24, 39, 1);
        font-family: Noto Sans SC;
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
        margin: 0;
      }
    }
    .ai-content{
      flex: 1;
      padding: 24px 30px;
      display: flex;
      gap: 30px;

      .videoBox{
        width: 55%;
        display: flex;
        flex-direction: column;
        gap: 24px;
        .video-content{
          flex: 1;
          .select-lang{
            display: flex;
            align-items: center;
            gap: 7px;
            color: rgba(107, 114, 128, 1);
            font-family: Noto Sans SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
          }
          .lang-content{
            display: flex;
            margin-top: 25px;
            align-items: center;
            gap: 25px 60px;
            flex-wrap: wrap;
            .lang-item{
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 10px;
              color: rgba(96, 98, 102, 1);
              font-family: Noto Sans SC;
              font-size: 14px;
              font-weight: 400;
              line-height: 20px;
            }
          }
        }
      }
      .videoOperation{
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
        .opera-title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 15px;
          >span{
            color: rgba(75, 92, 118, 1);
            font-family: Noto Sans SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
          }
        }
        .opera-content{
          position: relative;
          flex: 1;
          color: rgba(17, 24, 39, 1);
          font-family: Noto Sans SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          letter-spacing: 0px;
          white-space: pre-wrap;
          .bg-gray{
            border-radius: 7px;
            background: rgba(249, 250, 251, 1);
            height: 100%;
            padding: 15px;
          }
          .opera-btn{
            position: absolute;
            top: 16px;
            right: 20px;
          }
        }
      }
    }
  }
}
::v-deep .el-textarea{
  height: 100%!important;
}
::v-deep .el-textarea__inner{
  height: 100%!important;
}
::v-deep .el-dialog {
  border-radius: 10px;
}

.select-dialog{
  ::v-deep .el-dialog__header{
    border-bottom: 1px solid rgba(229, 231, 235, 1);
  }
  .select-dialog-content{
    p{
      color: rgba(17, 24, 39, 1);
      font-family: Noto Sans SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      margin-bottom: 20px;
    }
  }
}

</style>
