<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
        <el-form-item prop="courseTopic">
          <template slot="label">{{ tsT("queryCourseTopic") }}</template>
          <el-select
            v-model="queryParams.courseTopic"
            :placeholder="tsCommon('pleaseSelect')"
            clearable
            filterable
            style="width: 200px"
          >
            <el-option v-for="item in courseTopicOptions" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item prop="courseTitle">
          <template slot="label">{{ tsT("queryCourseTitle") }}</template>
          <el-input
            v-model="queryParams.courseTitle"
            :placeholder="tsT('queryCourseTitlePh')"
            clearable
            style="width: 220px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ tsCommon("search") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ tsCommon("reset") }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <br />

    <el-card shadow="never">
      <el-table v-loading="loading" :data="tableList" border>
        <el-table-column :label="tsT('colCourseTitle')" prop="courseTitle" align="center" min-width="140" :show-overflow-tooltip="true" />
        <el-table-column :label="tsT('colCourseIntro')" align="center" min-width="180" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ introSummary(scope.row.courseIntro) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="tsT('colCourseTopic')" align="center" width="120" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ courseTopicLabel(scope.row.courseTopic) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="tsT('colVideoFile')" align="center" min-width="140" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ videoFileLabel(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="tsCommon('colOp')" align="center" class-name="small-padding fixed-width" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['techService:onlineTrainingCourse:query']"
              type="text"
              size="mini"
              @click="handleView(scope.row)"
            >{{ tsCommon("view") }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="!loading && total === 0" class="online-course-empty">{{ emptyListHint }}</div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog :title="tsCommon('viewTitle')" :visible.sync="viewOpen" width="720px" append-to-body @close="onViewClose">
      <el-descriptions v-if="viewRow.id" :column="1" border size="small">
        <el-descriptions-item :label="tsT('viewCourseTitle')">{{ viewRow.courseTitle || dash }}</el-descriptions-item>
        <el-descriptions-item :label="tsT('viewCourseTopic')">{{ courseTopicLabel(viewRow.courseTopic) }}</el-descriptions-item>
        <el-descriptions-item :label="tsT('viewCourseIntro')">
          <span class="view-text-pre">{{ viewRow.courseIntro || dash }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="tsT('viewCover')">
          <image-preview v-if="viewRow.coverFileUrl" :src="viewRow.coverFileUrl" :width="160" :height="100" />
          <span v-else>{{ dash }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="tsT('viewVideoFile')">
          <div v-if="viewRow.videoFileUrl" class="online-course-video-wrap">
            <div class="online-course-video-name">{{ viewRow.videoFileName || dash }}</div>
            <video
              :key="viewRow.id + '-' + viewRow.videoFileUrl"
              :src="viewRow.videoFileUrl"
              controls
              class="online-course-video"
              @error="onVideoError"
            />
            <div v-if="videoLoadError" class="online-course-video-err">{{ tsT("msgVideoPlayFail") }}</div>
          </div>
          <span v-else>{{ tsT("msgVideoUnavailable") }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="tsT('viewPublishTime')">
          {{ viewRow.publishTime ? parseTime(viewRow.publishTime) : dash }}
        </el-descriptions-item>
        <el-descriptions-item :label="tsCommon('colCreate')">
          {{ viewRow.createTime ? parseTime(viewRow.createTime) : dash }}
        </el-descriptions-item>
        <el-descriptions-item :label="tsT('viewUpdateTime')">
          {{ viewRow.updateTime ? parseTime(viewRow.updateTime) : dash }}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewOpen = false">{{ tsCommon("close") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import techServiceLocaleMixin from "@/mixins/techServiceLocaleMixin"
import { listOnlineTrainingCourse, getOnlineTrainingCourse } from "@/api/techService/onlineTrainingCourse"
import { listInformationCategoryChildren } from "@/api/category/informationCategory"

const INTRO_SUMMARY_LEN = 50
const COURSE_TOPIC_PARENT_CODE = "005"
const COURSE_TOPIC_CATEGORY_TYPE = "8"

export default {
  name: "OnlineTrainingCourse",
  mixins: [techServiceLocaleMixin],
  data() {
    return {
      tsNs: "onlineTrainingCourse",
      loading: false,
      viewOpen: false,
      viewRow: {},
      videoLoadError: false,
      total: 0,
      tableList: [],
      courseTopicOptions: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        courseTitle: undefined,
        courseTopic: undefined
      }
    }
  },
  computed: {
    dash() {
      return this.$t("techService.status.dash")
    },
    hasActiveFilter() {
      const title = this.queryParams.courseTitle != null ? String(this.queryParams.courseTitle).trim() : ""
      const topic = this.queryParams.courseTopic != null ? String(this.queryParams.courseTopic).trim() : ""
      return !!(title || topic)
    },
    emptyListHint() {
      if (this.hasActiveFilter) {
        return this.tsT("emptyFilter")
      }
      return this.tsT("emptyDefault")
    }
  },
  created() {
    this.loadCourseTopics()
    this.getList()
  },
  methods: {
    loadCourseTopics() {
      listInformationCategoryChildren(COURSE_TOPIC_PARENT_CODE, COURSE_TOPIC_CATEGORY_TYPE)
        .then((res) => {
          this.courseTopicOptions = Array.isArray(res.data) ? res.data : []
        })
        .catch(() => {
          this.courseTopicOptions = []
        })
    },
    courseTopicLabel(val) {
      if (val == null || val === "") {
        return this.dash
      }
      const key = String(val).trim()
      const item = this.courseTopicOptions.find((o) => String(o.code) === key)
      if (item && item.name) {
        return item.name
      }
      return key
    },
    introSummary(text) {
      if (text == null || text === "") {
        return this.dash
      }
      const s = String(text)
      if (s.length <= INTRO_SUMMARY_LEN) {
        return s
      }
      return s.slice(0, INTRO_SUMMARY_LEN) + "…"
    },
    videoFileLabel(row) {
      if (!row) {
        return this.dash
      }
      if (row.videoFileName) {
        return row.videoFileName
      }
      return this.tsT("videoUploaded")
    },
    buildListQuery() {
      const q = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize
      }
      const title = this.queryParams.courseTitle != null ? String(this.queryParams.courseTitle).trim() : ""
      if (title) {
        q.courseTitle = title
      }
      const topic = this.queryParams.courseTopic != null ? String(this.queryParams.courseTopic).trim() : ""
      if (topic) {
        q.courseTopic = topic
      }
      return q
    },
    getList() {
      const q = this.buildListQuery()
      this.loading = true
      listOnlineTrainingCourse(q)
        .then((res) => {
          this.tableList = res.rows || []
          this.total = res.total != null ? res.total : 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams.courseTitle = undefined
      this.queryParams.courseTopic = undefined
      this.resetForm("queryForm")
      this.handleQuery()
    },
    handleView(row) {
      if (!row || row.id == null) {
        return
      }
      this.videoLoadError = false
      getOnlineTrainingCourse(row.id)
        .then((res) => {
          this.viewRow = res.data || {}
          this.viewOpen = true
        })
        .catch(() => {})
    },
    onViewClose() {
      this.viewRow = {}
      this.videoLoadError = false
    },
    onVideoError() {
      this.videoLoadError = true
    }
  }
}
</script>

<style scoped>
.view-text-pre {
  white-space: pre-wrap;
  word-break: break-word;
}
.online-course-empty {
  padding: 24px 0;
  text-align: center;
  color: #909399;
  font-size: 14px;
}
.online-course-video-wrap {
  width: 100%;
  max-width: 560px;
}
.online-course-video-name {
  margin-bottom: 8px;
  color: #606266;
  font-size: 13px;
}
.online-course-video {
  width: 100%;
  max-height: 320px;
  background: #000;
}
.online-course-video-err {
  margin-top: 8px;
  color: #f56c6c;
  font-size: 13px;
}
</style>
