<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-container-lt">
        <el-form :inline="true" label-position="left" :model="listQuery">
          <el-form-item>
            <el-input clearable v-model="listQuery.sku" placeholder="搜索SKU"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="listQuery.type" clearable filterable placeholder="全部类型">
              <el-option
                v-for="item in typesOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <excel-import :upload-url="action" 
              :headers="{
                'Authorization': 'Bearer ' + token
              }"
              :upload-data="{ type: 'import' }" @on-success="handleImportSuccess">
              <template slot="upload-text">
                导入
              </template>
            </excel-import>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table-container">
      <el-table  style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id"
        stripe border fit highlight-current-row>
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="SKU" min-width="100" align="center" prop="sku" />
        <el-table-column label="商品图" min-width="130" align="center">
          <template slot-scope="scope">
            <div class="image-black">
              <el-image 
                class="video-img"
                style="width: 80px;aspect-ratio: 3 / 4;"
                :src="scope.row.productUrl" 
                :preview-src-list="[scope.row.productUrl]">
              </el-image>
              <i class="el-icon-zoom-in" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品名" min-width="100" align="center" prop="name" />
        <el-table-column label="商品分类" min-width="100" align="center" prop="category" />
        <el-table-column label="商品ID" min-width="100" align="center" prop="productId" />
        <!-- <el-table-column label="天猫热词" min-width="100" align="center" prop="hotWords" /> -->
        <el-table-column label="视频" width="350" align="center">
          <template slot-scope="scope" v-if="scope.row.aiVideoInfoVOList && scope.row.aiVideoInfoVOList.length">
            <div class="video-black">
              <ul>
                <li v-for="(acc, idx) in scope.row.aiVideoInfoVOList" :key="idx">
                  <div v-if="isVideoFormat(acc.videoUrl)" class="video"
                    @click="handlePlay(acc.videoUrl)">
                    <img :src="acc.videoCoverImageUrl" class="video-img" />
                    <i class="el-icon-video-play" />
                  </div>
                  <div class="video" v-else>
                    <el-image class="video-last-img video" :src="acc.videoUrl"
                      :preview-src-list="[acc.videoUrl]" :lazy="true"/>
                    <i class="el-icon-zoom-in" />
                  </div>
                  <span class="tags" v-if="acc.type == 1">口播</span>
                  <span class="tags" v-if="acc.type == 2">走秀</span>
                  <span class="tags" v-if="acc.type == 3">换脸</span>
                </li>
              </ul>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <swPage v-if="total > 0" key="2" :listQuery="listQuery" :total="total" pos="btmRight" @retPage="retPage" />
    <!-- 视频播放 -->
    <video-player ref="videoPlayer" :video-url="currentVideoUrl" :video-title="currentVideoTitle"
      @close="handlePlayerClose" />
    <el-image ref="elImage" style="width: 0; height: 0;" :src="imageUrl" :preview-src-list="[imageUrl]">
    </el-image>
  </div>
</template>

<script>
import { api } from "@/api/api";
import waves from "@/directive/waves";
import swPage from "@/views/common/swPage";
import { getToken } from '@/utils/auth'
import { auditStatus } from "@/constants/index";
import { getValueByKey } from "@/utils/index";
import { shopConfigInfoList } from "@/api/AIAssetSearch";
import permission from "@/directive/permission";
import VideoPlayer from "@/components/VideoPlayer";
import ExcelImport from "@/components/ExcelImport";

export default {
  name: "AIAssetSearch",
  directives: {
    waves,
    permission
  },
  components: {
    swPage,
    VideoPlayer,
    ExcelImport
  },
  data() {
    return {
      action: api.importExcel,
      auditStatus,
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      downloadingRows: {},
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        sku: null,
        type: null 
      },
      currentVideoUrl: null,
      currentVideoTitle: null,
      currentVideo: {},
      imageUrl: null
    };
  },
  //页面创建的时候执行
  created() {
    this.getList();
  },
  computed: {
    token() {
      return getToken();
    },
    typesOptions() {
      return [
        {value: 1, label: 'AI口播视频'},
        {value: 2, label: 'AI走秀视频'},
        {value: 3, label: 'AI换脸视频'}
      ]
    }
  },
  methods: {
    getValueByKey,
    isVideoFormat(url) {
      if (!url) return false;
      const extension = url
        .toLowerCase()
        .split(".")
        .pop();
      return["mp4", "mov",].includes(extension);
    },
    handlePlay(url) {
      if (!url) {
        this.$message.error("媒体地址不存在");
        return;
      }

      if (this.isVideoFormat(url)) {
        // 视频播放逻辑
        this.currentVideoUrl = url;
        this.currentVideoTitle =  url.split("/").pop();
        this.$refs.videoPlayer.show();
      } else if (this.isImageFormat(url)) {
        // 新增图片格式判断
        this.$nextTick(() => {
          this.imageUrl = url;
          this.$refs.elImage.clickHandler();
        });
      } else {
        this.$message.error("不支持的文件格式");
      }
    },
    handlePlayerClose() {
      this.currentVideoUrl = "";
      this.currentVideoTitle = "";
    },
    getList() {
      this.listLoading = true;
      const params = {}
      for (const key in this.listQuery) {
        const value = this.listQuery[key]
        if (value !== null && value !== '' && value !== undefined) {
          params[key] = value
        }
      }
      shopConfigInfoList(params).then(res => {
        if (200 == res.code) {
          this.total = res.data.total;
          this.list = res.data.rows;
        }
        this.listLoading = false;
      });
    },
    retPage() {
      //分页
      this.getList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleImportSuccess(response) {
      if (response.code == 200) {
        this.getList();
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/styles/layout.scss";

.button {
  .el-button {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
.video-black {
  display: flex;
  justify-content: center;
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
  }
  li {
    position: relative;
    list-style: none;
    width: 80px;
    aspect-ratio: 3 / 4;
    height: 100%;
  }
  .video {
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    width: 80px;
    aspect-ratio: 3/4;

    &:hover {
      i {
        opacity: 1;
        pointer-events: none;
      }

      .video-img {
        opacity: 0.6;
      }
    }

    &-img {
      width: 80px;
      border: 1px solid #eee;
      object-fit: cover;
      object-position: top;
      cursor: pointer;
    }

    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 20px;
      height: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      opacity: 0;
      cursor: pointer;
    }
  }
  .tags {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ae8877;
    font-size: 12px;
    color: #fff;
    height: auto;
    display: block;
  }
}
.image-black {
  position: relative;
  display: flex;
  align-content: center;
  justify-content: center;
  cursor: pointer;

  &:hover {
    i {
      opacity: 1;
      pointer-events: none;
    }

    .video-img {
      opacity: 0.6;
    }
  }

  &-img {
    width: 80px;
    border: 1px solid #eee;
    object-fit: cover;
    object-position: top;
    cursor: pointer;
  }

  i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    opacity: 0;
    cursor: pointer;
  }
  .tags {

  }
}
</style>
