<template>
  <div class="container paly-details-dlg">
    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="播放详情" :visible.sync="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="tabActive == 4 && item.key != 'PlaySeconds'">
            <template slot-scope="{ 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="tabActive != 4">
            <template slot-scope="{ row }">
              <span>{{ handleRowContent(row, item.key) }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-dialog>
  </div>
</template>

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

export default {
  name: "",
  components: {},
  props: {
    playDetailsVisible: {
      default: false,
      required: true,
      type: Boolean,
    },
    playDetailsList: {
      default: {},
      required: true,
      type: Object,
    },
    tabActive: {
      required: true,
      type: Number,
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  computed: {
    tableColums() {
      return PalyTable;
    },
  },
  watch: {
    "playDetailsList.VideoId": {
      handler(newval) {
        if (newval) {
          this.tabActive == 4 && this.getVideoDeatil();
        }
      },
    },
    "playDetailsList.FileName": {
      handler(newval) {
        if (newval) {
          newval == "视频" && this.activityVideoDeatil();
          newval == "音频" && this.getVoiceDeatil();
        }
      },
    },
    "playDetailsList.AskserieVideoId": {
      handler(newval) {
        if (newval) {
          this.askserieVideoHistoryList();
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    cancelHandle() {
      this.$emit("update:playDetailsVisible", false);
      this.$emit("update:playDetailsList", {});
      this.dataList = [];
    },
    async getVideoDeatil() {
      const res = await raiVideoApi.videoDeatil({ VideoId: this.playDetailsList.VideoId });
      if (res.Ret === 200) {
        this.dataList = res.Data || [];
      }
    },
    async getVoiceDeatil() {
      const res = await raiVideoApi.voiceDeatil({ VideoId: this.playDetailsList.VideoId });
      if (res.Ret === 200) {
        this.dataList = res.Data || [];
      }
    },
    async activityVideoDeatil() {
      const res = await raiVideoApi.activityVideoDeatil({ VideoId: this.playDetailsList.VideoId });
      if (res.Ret === 200) {
        this.dataList = res.Data || [];
      }
    },
    async askserieVideoHistoryList() {
      const res = await raiVideoApi.askserie_videoHistory_list({ AskserieVideoId: this.playDetailsList.AskserieVideoId });
      if (res.Ret === 200) {
        this.dataList = res.Data.List || [];
      }
    },
    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>
<style scoped lang="scss">
.paly-details-dlg {
  .el-table {
    margin-bottom: 30px;
  }
}
</style>
