<script setup>
import { ref, onMounted, watch, computed } from "vue";

import { PalyTable } from "../tableTabs";
import { raiVideoApi } from "@/api/api.js";

const props = defineProps({
  playDetailsVisible: {
    default: false,
    required: true,
    type: Boolean,
  },
  playDetailsList: {
    default: {},
    required: true,
    type: Object,
  },
  tabActive: {
    required: true,
    type: Number,
  },
});
const dataList = ref([]);

const tableColums = computed(() => {
  return PalyTable;
});

watch(
  () => props.playDetailsList.VideoId,
  () => {
    if (newval) {
      props.tabActive == 4 && getVideoDeatil();
    }
  }
);

watch(
  () => props.playDetailsList.FileName,
  () => {
    if (newval) {
      if (newval) {
        newval == "视频" && activityVideoDeatil();
        newval == "音频" && getVoiceDeatil();
      }
    }
  }
);

watch(
  () => props.playDetailsList.AskserieVideoId,
  () => {
    if (newval) {
      if (newval) {
        askserieVideoHistoryList();
      }
    }
  }
);

const $emit = defineEmits();

function cancelHandle() {
  $emit("update:playDetailsVisible", false);
  $emit("update:playDetailsList", {});
  dataList.value = [];
}
async function getVideoDeatil() {
  const res = await raiVideoApi.videoDeatil({ VideoId: props.playDetailsList.VideoId });
  if (res.Ret === 200) {
    dataList.value = res.Data || [];
  }
}
async function getVoiceDeatil() {
  const res = await raiVideoApi.voiceDeatil({ VideoId: props.playDetailsList.VideoId });
  if (res.Ret === 200) {
    dataList.value = res.Data || [];
  }
}
async function activityVideoDeatil() {
  const res = await raiVideoApi.activityVideoDeatil({ VideoId: props.playDetailsList.VideoId });
  if (res.Ret === 200) {
    dataList.value = res.Data || [];
  }
}
async function askserieVideoHistoryList() {
  const res = await raiVideoApi.askserie_videoHistory_list({ AskserieVideoId: props.playDetailsList.AskserieVideoId });
  if (res.Ret === 200) {
    dataList.value = res.Data.List || [];
  }
}
function handleRowContent(row, key) {
  if (key == "PlaySeconds") {
    if (!row[key] || row[key] == 0) return "--";
    let m = parseInt(row[key] / 60);
    let s = parseInt(row[key] % 60);
    let ms = `${m > 9 ? m : "0" + m}分${s > 9 ? s : "0" + s}秒`;
    return ms;
  } else {
    return row[key];
  }
}
</script>

<template>
  <div class="container paly-details-dlg">
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="播放详情" v-model="props.playDetailsVisible" width="1242px" :before-close="cancelHandle">
      <el-table :data="dataList" style="width: 100%" border height="400">
        <template v-for="item in tableColums">
          <el-table-column :key="item.label" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center" v-if="props.tabActive == 4 && item.key != 'PlaySeconds'">
            <template #default="{ row }">
              <span>{{ handleRowContent(row, item.key) }}</span>
            </template>
          </el-table-column>
          <el-table-column :key="item.label" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center" v-else-if="props.tabActive != 4">
            <template #default="{ row }">
              <span>{{ handleRowContent(row, item.key) }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.paly-details-dlg {
  .el-table {
    margin-bottom: 30px;
  }
}
</style>
