<template>
  <div class="fx-column">
    <mx-table v-if="total" :prop-defines="propDefines" :rows="dataList">
      <template #play="{row}">
        <el-button type="text" icon="el-icon-video-camera" @click="handleVideoPlay(row)">
          播放
        </el-button>
      </template>
    </mx-table>
    <evaluation-empty v-else></evaluation-empty>
    <pagination v-show="total > 0" :total="total"
                :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                :page-size="20" @pagination="getList"/>
    <el-dialog :title="videoItem.resourcesName" v-if="videoDialog" :visible.sync="videoDialog" width="800px"
               :append-to-body="true">
      <mx-video :ali-id-type="videoItem.aliIdType" :src="videoItem.resourcesUrl||videoItem.videoId"></mx-video>
    </el-dialog>
  </div>
</template>

<script>
import { getAiVideos } from '@/api/webApi/ai.js'

export default {
  name: 'aiVideo',
  props: {
    knowledges: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      dataList: [],
      total: 0,
      videoDialog: false,
      videoItem: {},
      propDefines: {
        'resourcesName': {
          label: '名称'
        },
        'play': {
          label: '操作',
          slot: 'play'
        }
      }
    }
  },
  watch: {
    knowledges: {
      immediate: true,
      handler: function() {
        this.getList()
      }
    }
  },
  methods: {
    getList() {
      getAiVideos({
        knowledges: this.knowledges,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize
      }).then(res => {
        this.dataList = res.rows
        this.total = res.total
      })
    },
    handleVideoPlay(row) {
      this.videoItem = row
      this.videoDialog = true
    }
  }
}
</script>

<style scoped>

</style>
