<template>
  <div class="df aic">
    <div
      @click="changeMediaStatus(0)"
      :class="
        audit == 0
          ? 'currentbtn radio-btns left-radius'
          : 'radio-btns left-radius'
      "
    >
      待审核
    </div>
    <div
      @click="changeMediaStatus(1)"
      :class="audit == 1 ? ' radio-btns currentbtn' : 'radio-btns '"
      style="border-right: none; border-left: none"
    >
      审核通过
    </div>
    <div
      @click="changeMediaStatus(2)"
      :class="
        audit == 2
          ? ' radio-btns right-radius currentbtn'
          : 'radio-btns right-radius '
      "
      style="margin-right: 40px"
    >
      审核未通过
    </div>
  </div>
  <div class="container-title">图片/视频</div>
  <div class="line-container-p24 df aic ffw">
    <el-card
      style="
        width: 240px;
        height: 360px;
        margin-left: 20px;
        margin-bottom: 15px;
      "
      v-for="(item, index) in media"
      :key="item"
      shadow="hover"
    >
      <div class="card-note">
        {{ item.shipName }} 拍摄于
        <br />
        {{ item.createTime }}
      </div>
      <div class="media-box" style="position: relative">
        <el-image
          v-if="item.mediaType == 1"
          style="width: 100%; height: 100%"
          fit="contain"
          :src="item.downloadUrl"
          :preview-src-list="previewSrcList"
        ></el-image>
        <video
          style="width: 100%; height: 100%"
          v-else
          :src="item.downloadUrl"
        ></video>
        <img
          @click="openVideoModal(item.downloadUrl, index, item.id, item.audit)"
          v-if="item.mediaType == 2"
          src="../../assets/icon-player.png"
          style="
            object-fit: contain;
            width: 40px;
            height: 40px;
            position: absolute;
            top: calc(50% - 20px);
            left: calc(50% - 20px);
            background: #fff;
            border-radius: 50%;
          "
          alt=""
        />
      </div>
      <div class="checkbox-group df aic jcsa">
        <el-checkbox
          @change="auditMedia(item.id, 1, index, item.mediaType)"
          :model-value="item.audit == 1"
          label="通过"
        ></el-checkbox>
        <el-checkbox
          @change="auditMedia(item.id, 2, index, item.mediaType)"
          :model-value="item.audit == 2"
          label="未通过"
        ></el-checkbox>
      </div>
    </el-card>
    <div style="width: 100%; text-align: right; margin-top: 43px">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChange"
      />
    </div>
  </div>

  <el-dialog
    v-model="videoModal"
    title="视频审核"
    width="30%"
    :before-close="videoClose"
  >
    <video
      autoplay
      controls
      style="width: 100%; height: 100%"
      :src="currentUrl"
    ></video>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogAuditVideo(1)">通过</el-button>
        <el-button type="warning" @click="dialogAuditVideo(2)">
          未通过
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref, toRefs, reactive } from "_vue@3.2.20@vue";
import { ElNotification } from "element-plus";
import api from "../../apis/fetch";
export default {
  setup() {
    let checkedBox = ref();
    let audit = ref(0);
    let currentPage = ref(1);
    let media = ref([]);
    let photos = ref([]);
    let videoes = ref([]);
    let previewSrcList = ref([]);
    let total = ref();

    async function getMediaList() {
      let res = await api.getMediaList({
        audit: audit.value,
        currentPage: currentPage.value,
        size: 10,
      });
      if (res.data.status == 0) {
        total.value = res.data.total;
        media.value = res.data.result;
        for (let i of media.value) {
          if (i.mediaType == 1) {
            previewSrcList.value.push(i.downloadUrl);
          }
        }
      } else {
        console.log(res);
      }
    }

    function pageChange(e) {
      currentPage.value = e;
      getMediaList();
    }

    function changeMediaStatus(s) {
      currentPage.value = 1;
      photos.value = [];
      videoes.value = [];
      audit.value = s;
      getMediaList();
    }

    async function auditMedia(mediaId, a, index, mediaType) {
      if (a == audit.value) return;
      let res = await api.auditMedia({
        mediaId,
        audit: a,
      });
      if (res.data.status == 0) {
        videoModal.value = false;
        ElNotification({
          title: res.data.msg,
          message: `${a == 1 ? "通过" : "未通过"}`,
          type: `${a == 1 ? "success" : "info"}`,
        });
        media.value.splice(index, 1);
        if (mediaType == 1) {
          previewSrcList.value.splice(index, 1);
        }
      } else {
        ElNotification({
          title: "Error!",
          message: res.data.msg,
          type: "error",
        });
      }
      console.log(res);
    }
    let videoModal = ref(false);
    let currentIndex = ref();
    let currentId = ref();
    let currentAudit = ref();
    let currentUrl = ref();
    function openVideoModal(url, i, id, a) {
      currentIndex.value = i;
      currentId.value = id;
      currentAudit.value = a;
      currentUrl.value = url;
      videoModal.value = true;
    }

    function dialogAuditVideo(a) {
      console.log(a);
      console.log(currentAudit.value);
      if (a == currentAudit.value) {
        videoModal.value = false;
      } else {
        auditMedia(currentId.value, a, currentIndex.value, 2);
      }
    }

    function videoClose() {}
    getMediaList();

    return {
      audit,
      getMediaList,
      changeMediaStatus,
      photos,
      videoes,
      checkedBox,
      previewSrcList,
      auditMedia,
      media,
      videoModal,
      openVideoModal,
      dialogAuditVideo,
      currentUrl,
      total,
      pageChange,
    };
  },
};
</script>
<style scoped>
.radio-btns {
  height: 38px;
  width: 103px;
  border: 1px solid #1486f9;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
  cursor: pointer;
}

.left-radius {
  border-top-left-radius: 19px;
  border-bottom-left-radius: 19px;
}

.right-radius {
  border-top-right-radius: 19px;
  border-bottom-right-radius: 19px;
}
.currentbtn {
  background: #1486f9;
  color: #fff;
}

.seach-btn {
  display: inline-block;
  width: 60px;
  height: 38px;
  background: #0094fe;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 38px;
  margin-left: 10px;
  cursor: pointer;
}

.card-note {
  height: 30px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #777777;
}

.media-box {
  width: 200px;
  height: 200px;
  margin-top: 20px;
}

.checkbox-group {
  width: 200px;
  height: 50px;
  margin-top: 20px;
}
</style>
