<template>
  <div>
    <!-- 通用弹框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <!-- 表单 -->
      <el-form :model="dialogForm" ref="dialogForm" size="small" label-width="80px" inline>
        <el-form-item :label="labelName" prop="keyWord">
          <el-input v-model="dialogForm.keyWord" :placeholder="'请输入' + labelName" clearable v-no-whitespace style="width: 200px" />
        </el-form-item>
        <!-- 查询, 重置 -->
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        ref="dataTable"
        fit
        highlight-current-row
        style="width: 100%"
        row-key="coursewareId"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
          :index="indexContinuous(dialogForm.pageNum, dialogForm.pageSize)"
        />
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          align="center"
          show-overflow-tooltip
        >
          <!-- 插槽  -->
          <template v-slot="scope" v-if="column.prop === 'coursewareSize'">
            <span>{{ scope.row.coursewareSize || 0 }}MB</span>
          </template>
          <template v-slot="scope" v-else-if="column.prop === 'studyTime'">
            <span>{{ (scope.row.studyTime / 60).toFixed(2) }}分钟</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="dialogForm.pageNum"
        :limit.sync="dialogForm.pageSize"
        @pagination="getList"
      />

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="handleConfirm" v-preventReClick="3000">确定添加</el-button>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCoursewareTreeTableByTask, getExamTemplateLists } from '@/api/educationalTraining/resourceAdministration'
import { indexContinuous } from '@/utils/bonus'
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    labelName: {
      type: String,
      default: '',
    },
    // 表格头
    columns: {
      type: Array,
      default: () => [],
    },
    // 勾选数据
    selectionRows: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogVisible: false,
      total: 0,
      dialogForm: {
        pageNum: 1,
        pageSize: 10,
        keyWord: '', // 关键字
        coursewareName: '', // 课件名称
        examTemplateName: '', // 试卷名称/练习名称
        templateType: '', // 1.考试 2.练习
        hasQuestion: '', // 1.有题目 2.无题目
      },
      isType: 0, // 0: 课件 1: 考试 2: 练习
      // 表格数据
      tableData: [],
      // 勾选数据
      selectionData: [],
    }
  },
  methods: {
    indexContinuous,
    // 打开弹框
    async openDialog(type) {
      this.isType = type
      this.selectionData = []
      await (this.dialogVisible = true)
      // 重置表单
      this.$refs.dialogForm.resetFields()
      this.dialogForm.pageNum = 1
      // 获取列表
      await this.getList()
      if (this.selectionRows.length > 0) {
        console.log('🚀 ~ openDialog ~ this.selectionRows:', this.selectionRows)
        this.$refs.dataTable.clearSelection()
        this.selectionData = this.selectionRows
        console.log('🚀 ~ getList ~ this.selectionRows-选中的:', this.selectionRows)
        this.selectionData.forEach(row => {
          this.tableData.forEach(item => {
            if (this.isType === 0) {
              if (item.coursewareId === row.coursewareId) {
                this.$refs.dataTable.toggleRowSelection(item, true)
              }
            } else {
              if (item.examTemplateId === row.examTemplateId) {
                this.$refs.dataTable.toggleRowSelection(item, true)
              }
            }
          })
        })
      } else {
        this.selectionData = []
        // 清除勾选
        this.$refs.dataTable.clearSelection()
      }
    },
    handleConfirm() {
      console.log('🚀 ~ handleConfirm ~ this.selectionData:', this.selectionData)
      if ((this.isType == 1 || this.isType == 2) && this.selectionData.length > 1) {
        this.$message.error('只能选择一条数据')
        return
      }
      this.$emit('getDialogData', this.isType, this.selectionData)
      this.dialogVisible = false
    },
    // 查询
    handleQuery() {
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.dialogForm.resetFields()
      this.dialogForm.keyWord = ''
      this.dialogForm.coursewareName = ''
      this.dialogForm.examTemplateName = ''
      this.getList()
    },
    // 获取列表
    async getList() {
      // 考试/练习-列表
      try {
        const params = {
          ...this.dialogForm,
          coursewareName: this.isType == 0 ? this.dialogForm.keyWord : '',
          examTemplateName: this.isType == 0 ? '' : this.dialogForm.keyWord,
          templateType: this.isType == 0 ? '' : this.isType,
          hasQuestion: this.isType == 0 ? '' : 1,
        }
        let res = {}
        if (this.isType === 0) {
          res = await getCoursewareTreeTableByTask(params)
        } else {
          res = await getExamTemplateLists(params)
        }
        // console.log('🚀 ~ getList ~ 列表:', res)
        this.tableData = res.rows
        this.total = res.total
        this.$nextTick(() => {
          if (this.selectionRows.length > 0) {
            // this.$refs.dataTable.clearSelection()
            this.selectionData = this.selectionRows
            console.log('🚀 ~ getList ~ this.selectionRows-选中的:', this.selectionRows)
            this.selectionData.forEach(row => {
              this.tableData.forEach(item => {
                if (this.isType === 0) {
                  if (item.coursewareId === row.coursewareId) {
                    this.$refs.dataTable.toggleRowSelection(item, true)
                  }
                } else {
                  if (item.examTemplateId === row.examTemplateId) {
                    this.$refs.dataTable.toggleRowSelection(item, true)
                  }
                }
              })
            })
          } else {
            // this.selectionData = []
            // 清除勾选
            // this.$refs.dataTable.clearSelection()
          }
        })
        console.log('🚀 ~ getExamTemplateLists ~ res-列表:', res)
      } catch (error) {
        console.log('🚀 ~ getExamTemplateLists ~ error:', error)
      }
    },
    // 选择
    selectionChange(val) {
      console.log('🚀 ~ val:', val)
      this.selectionData = val
    },
  },
}
</script>

<style lang="scss" scoped></style>
