<template>
  <div class="page">
    <!-- 搜索框 -->
    <div class="top">
      <div class="flex justify-between" style="width: 300px">
        <el-input
          v-model="title"
          :placeholder="$t('myCreating.search')"
          @keyup.enter="searchVideoList"
        />
        <el-icon class="icon-edit" @click="searchVideoList"
          ><i-ep-search
        /></el-icon>
      </div>
    </div>
    <!-- 作品列表 -->
    <div v-if="!isLoading">
      <div v-if="videoList.length > 0" class="workList flex">
        <div class="workItem" v-for="item in videoList" :key="item.id">
          <div class="workImg">
            <img
              v-if="item.coverImg"
              class="coverImg inmiddle"
              :src="item.coverImg"
              alt=""
            />
            <img
              v-else
              class="takePlace inmiddle"
              src="@/assets/img/left-top-logo.png"
              alt=""
            />
          </div>

          <div :class="'statusName ' + item.statusName">
            {{ $t("myCreating." + item.statusName) }}
          </div>

          <div class="workInfo flex">
            <span>{{ item.title }}</span>
            <span>{{ dayjs(item.createDate).format("YYYY-MM-DD") }}</span>
          </div>
          <!-- 更多遮罩层 -->
          <div
            class="more"
            @mouseleave="mouseleave"
            @click="clickVideoItem(item)"
          >
            <el-icon
              v-if="[0].includes(item.videoStatus)"
              class="icon-videoPlay"
              ><i-ep-edit
            /></el-icon>
            <el-icon
              v-if="[1, 2, 4, 6].includes(item.videoStatus)"
              class="icon-videoPlay"
              ><i-ep-loading
            /></el-icon>
            <el-icon
              v-if="[3].includes(item.videoStatus)"
              class="icon-videoPlay"
              ><i-ep-closeBold
            /></el-icon>
            <el-icon
              v-if="[5].includes(item.videoStatus)"
              class="icon-videoPlay"
              ><i-ep-videoPlay
            /></el-icon>
            <div class="showBtn" @click.stop="mouseenter(item)">...</div>
            <div class="btns" v-show="showPopup">
              <!-- 下载按钮 -->
              <div
                class="btns-item"
                @click.stop="handleDownload(item.videoPlayUrl)"
              >
                <div class="btns-item-icon">
                  <el-icon class="icon-delete"><i-ep-download /></el-icon>
                </div>
                <div class="text">{{ $t("myCreating.download") }}</div>
              </div>
              <!-- 删除按钮 -->
              <div
                class="btns-item"
                @click.stop="handelDelete(item.id, item.title)"
              >
                <div class="btns-item-icon">
                  <el-icon class="icon-delete"><i-ep-delete /></el-icon>
                </div>
                <div class="text">{{ $t("myCreating.delete") }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="videoList.length == 0" class="noList">
        <div class="title">
          {{ $t("myCreating.noList") }}
        </div>
        <div class="goCreate" @click="goCreate">
          {{ $t("myCreating.goCreate") }}
        </div>
      </div>
    </div>
    <div v-if="isLoading" class="loadingIcon">
      <el-icon class="is-loading">
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ea893728=""
        >
          <path
            fill="currentColor"
            d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
          ></path>
        </svg>
      </el-icon>
      <span class="loadingText">{{ $t("myCreating.loading") }}</span>
    </div>
    <!-- 弹出框预览作品 -->
    <el-dialog
      destroy-on-close
      class="elDialog"
      v-model="showDialog"
      :title="presentItem.title"
      width="40%"
      center
    >
      <div class="videoBox">
        <video
          v-if="presentItem.videoPlayUrl"
          controls="true"
          class=""
          :src="presentItem.videoPlayUrl"
        ></video>
        <div v-else class="insteadVideo">
          {{ $t("myCreating." + presentItem.statusName + "Text") }}
          <span v-if="presentItem.videoStatus == 3">{{
            presentItem.videoMsg
          }}</span>
        </div>
        <!-- 有视频路径的页脚 -->
        <div class="footer" v-if="presentItem.videoPlayUrl">
          <span class="dialog-footer">
            <!-- dialog下载按钮 -->
            <button
              class="elBtn"
              type="primary"
              @click.stop="handleDownload(presentItem.videoPlayUrl)"
            >
              <el-icon class="icon-delete"><i-ep-download /></el-icon
              >{{ $t("myCreating.download") }}
            </button>
            <!-- dialog删除按钮 -->
            <button
              class="elBtn"
              @click.stop="handelDelete(presentItem.id, presentItem.title)"
            >
              <el-icon class="icon-delete"><i-ep-delete /></el-icon
              >{{ $t("myCreating.delete") }}
            </button>
          </span>
        </div>
        <!-- 无视频路径的页脚 -->
        <div class="footer" v-if="!presentItem.videoPlayUrl">
          <span class="dialog-footer">
            <!-- dialog编辑按钮 -->
            <button
              class="elBtn"
              type="primary"
              @click.stop="
                router.push({
                  path: '/createVideo',
                  query: { id: presentItem.id },
                })
              "
              v-if="[0, 3].includes(presentItem.videoStatus)"
            >
              {{ $t("myCreating.edit") }}
            </button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <div v-if="!isLoading" class="pagination">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 200]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {
  userPhotoVideoListApi,
  delUserPhotoVideoByIDApi,
} from "@/apis/myCreating";
import { timestampToTime } from "@/utils/tools";
import { useI18n } from "vue-i18n";
import { getStatus } from "./videoStatus";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
const router = useRouter();
// 当前语言状态与国际化组件
const { locale } = useI18n();
const lanChange = ref(locale);

const title = ref("");
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
// 弹窗显示隐藏
const showDialog = ref(false);
const isLoading = ref(true);
// 当前作品
const presentItem = ref("");
// 作品列表
const videoList = ref([]);

const handleSizeChange = (val) => {
  pageSize.value = val;
  getPhotoVideoList(pageNum.value, pageSize.value, title.value);
};

const handleCurrentChange = (val) => {
  pageNum.value = val;
  getPhotoVideoList(pageNum.value, pageSize.value, title.value);
};

// 点击作品
function clickVideoItem(item) {
  showDialog.value = true;
  presentItem.value = item;
}

// 删除框是否显示
let showPopup = ref(false);
function mouseleave() {
  showPopup.value = false;
}

function mouseenter(item) {
  presentItem.value = item;
  showPopup.value = !showPopup.value;
}
// 下载
function handleDownload(itemVideoPlayUrl) {
  if (itemVideoPlayUrl) {
    const link = document.createElement("a");
    link.href = itemVideoPlayUrl;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    ElMessage.error(
      lanChange.value == "zh-cn" ? `无法下载` : `Unable to download`
    );
  }
}

function goCreate() {
  router.push("/createVideo");
}

function searchVideoList() {
  getPhotoVideoList(pageNum.value, pageSize.value, title.value, true);
}

function handelDelete(id, title) {
  const msg =
    lanChange.value == "zh-cn"
      ? `确定要删除这个作品吗? 作品标题：${title}`
      : `Are you sure to delete this video ? Title:${title};`;
  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(() => {
    delPhotoVideo(id);
  });
}

/**
 * @description:获取我的视频作品
 * @return: data
 */
function getPhotoVideoList(pageNum, pageSize, title, searchFlag) {
  userPhotoVideoList(pageNum, pageSize, title)
    .then((res) => {
      console.log(res, "res");
      res.data.list.forEach((item) => {
        // item.createDate = timestampToTime(item.createDate) || "";
        // item.updateDate = timestampToTime(item.updateDate) || "";
        // item.createVideoDate = timestampToTime(item.createVideoDate) || "";
        item.statusName = getStatus(item.videoStatus);
      });
      videoList.value = res.data.list;
      total.value = res.data.total * 1;
      if (searchFlag) {
        const total = res.data.total;
        const msg1 =
          lanChange.value == "zh-cn"
            ? `查询成功！找到${total}条符合条件的视频`
            : `Found! Match ${total} videos`;
        const msg2 =
          lanChange.value == "zh-cn"
            ? `查询成功！没有符合条件的视频`
            : `Found! No match videos`;
        const msg3 =
          lanChange.value == "zh-cn"
            ? `查询成功！已加载全部视频`
            : `Found! Present all videos`;
        return title
          ? ElMessage.success(total > 0 ? msg1 : msg2)
          : ElMessage.success(msg3);
      }
      isLoading.value = false;
    })
    .catch((err) => {
      console.log(err, "err");
    });
}

/**
 * @description:删除视频作品
 * @param: videoID
 * @return: data
 */
function delPhotoVideo(videoID) {
  delUserPhotoVideoByID(videoID)
    .then((res) => {
      console.log(res, "res");
      const msg = lanChange.value == "zh-cn" ? `删除成功！` : `Success !`;
      ElMessage.success(msg);
      showDialog.value = false;
      getPhotoVideoList(pageNum.value, pageSize.value, title.value);
    })
    .catch((err) => {
      console.log(err, "err");
      ElMessage.error(err.message);
    });
}

onMounted(() => {
  isLoading.value = true;
  getPhotoVideoList(pageNum.value, pageSize.value, title.value);
});
</script>

<style lang="scss" scoped>
.page {
  min-height: calc(100vh - 80px);
  padding: 15px 130px;
  background-color: #fff;
  border-radius: 25px 0 0;
  .top {
    margin-bottom: 35px;
  }
  .loadingIcon {
    height: 100px;
    line-height: 100px;
    text-align: center;
    transform: scale(2);
    .loadingText {
      position: relative;
      top: -2px;
      left: 4px;
    }
  }
  .workList {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    // height: 200px;
    margin-top: 5px;
    padding-bottom: 50px;
    cursor: pointer;
    .workItem {
      position: relative;
      width: 300px;
      // height: 200px;
      margin: 0 20px 20px 0;
      border: 2px solid #c2c2c2;
      border-radius: 15px;
      cursor: pointer;
      overflow: hidden;
      .workImg {
        position: relative;
        width: 100%;
        height: 170px;
        cursor: pointer;
        padding: 10px;
        overflow: hidden;
        .coverImg {
          max-width: 90%;
          max-height: 170px;
          cursor: pointer;
        }
        .takePlace {
          position: absolute;
          top: 40%;
          width: 80%;
        }
      }

      .more {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 170px;
        background-color: rgb(0 0 0 / 30%);
        cursor: pointer;
        opacity: 0;
        transition: all 0.2s;
        .icon-videoPlay {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 50px;
          height: 50px;
          font-size: 50px;
          color: #fff;
          text-align: center;
          transform: translate(-50%, -50%);
          cursor: pointer;
        }

        .showBtn {
          position: absolute;
          top: 10px;
          right: 10px;
          width: 20px;
          height: 20px;
          font-size: 20px;
          line-height: 10px;
          color: #fff;
          text-align: center;
          transition: all 0.3s;
          cursor: pointer;
          border-radius: 2px;
          &:hover {
            background-color: #00000056;
          }
        }

        .btns {
          position: absolute;
          top: 45px;
          right: 10px;
          // width: 70px;
          // height: 60px;
          overflow: hidden;
          border-radius: 10px;
          cursor: pointer;

          &-item {
            // width: 70px;
            // height: 30px;
            text-align: center;
            background-color: #fff;
            padding: 0 10px;
            transition: all 0.3s;
            cursor: pointer;
            &-icon {
              position: relative;
              display: inline-block;
              width: 20px;
              height: 20px;
              cursor: pointer;
              .icon-delete {
                position: absolute;
                top: 4px;
                left: 0;
                width: 20px;
                height: 20px;
                font-size: 16px;
                color: #000;
                text-align: center;
                cursor: pointer;
              }
            }

            .text {
              display: inline-block;
              height: 30px;
              padding-left: 5px;
              margin-top: -5px;
              line-height: 20px;
              cursor: pointer;
            }
            &:hover {
              color: #ffffff;
              background-color: #0000001a;
            }
          }
        }
      }

      .workInfo {
        justify-content: space-between;
        height: 40px;
        padding: 0 10px;
        line-height: 40px;
        border-top: 1px solid #afafaf;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
      }
      .statusName {
        position: absolute;
        top: 10%;
        left: -10%;
        width: 120px;
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        transform: rotate(-45deg);

        &.manuscript {
          /* 草稿 */
          background: linear-gradient(to right, #d7d2cc 0%, #304352 100%);
        }
        &.generating {
          /* 生成中 */
          background: linear-gradient(270deg, #4b61dc, #15d1b8);
        }
        &.generationFailed {
          /* 生成失败 */
          background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
        }
        &.generationSucceed {
          /* 生成成功 */
          background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
      }
      &:hover {
        .more {
          opacity: 1;
        }
      }
    }
  }
  .noList {
    .title {
      font-size: 30px;
      text-align: center;
      margin-top: 100px;
      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;
    }

    .goCreate {
      width: 200px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #ffffff;
      border-radius: 6px;
      background: linear-gradient(270deg, #4b61dc, #15d1b8);
      margin: 30px auto;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        transform: scale(1.1);
      }
    }
  }
  .pagination {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      background-color: #b8b8b873;
    }
  }
}

: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;
  }
}

.elDialog {
  .videoBox {
    // display: flex;
    // justify-content: space-between;
    width: 100%;
    padding: 20px;
    video {
      width: 100%;
      max-height: 600px;
      margin: auto;
    }
    .insteadVideo {
      font-size: 20px;
      font-weight: 600;
      margin: 20px auto;
      text-align: center;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: space-between;
    .elBtn {
      color: #fff;
      border-radius: 10px;
      padding: 5px 10px;
      cursor: pointer;
      background-color: #000;
      transition: all 0.3s;
      &:hover {
        background-color: #15d1b8;
      }
    }

    :deep(.el-icon) {
      margin-right: 5px;
      font-weight: 700;
    }
  }
}

:deep(.el-dialog) {
  overflow: hidden;
  border-radius: 25px;
}
// :deep(.el-dialog__header) {
// }
:deep(.el-dialog__title) {
  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;
}

:deep(.el-dialog__body) {
  padding: 0;
}

:deep(.dialog__footer) {
  padding: 0;
}
</style>
