<template>
  <div>
    <div class="tools-wrapper">
      <el-button type="primary" @click="addClass">新增课时</el-button>
      <el-button type="warning" :disabled="isEditable" @click="editClass">编辑课时</el-button>
      <el-button type="danger" :disabled="isDeleteable" @click="deleteClass">删除课时</el-button>
    </div>
    <div class="table-wrpaper">
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="title"
          label="课时名称"
        />
        <el-table-column
          prop="time"
          label="课时时长"
        />
      </el-table>
    </div>
    <el-dialog
      title="新增课时"
      :visible.sync="addDialogFormVisible"
    >
      <el-form
        ref="addform"
        :model="formInfo"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item
          label="课时名称"
          prop="title"
        >
          <el-input v-model="formInfo.title" />
        </el-form-item>
        <el-form-item
          label="导入视频文件"
        >
          <div class="import-file-total-wrapper">
            <div class="import-file-wrapper">
              <label style="width: 100%;height: 100%;">
                导入文件
                <input ref="importfile" type="file" hidden @change="importFile">
              </label>
            </div>
            <div class="import-file-elprogress-wrapper">
              <el-progress :percentage="importfilePercentage" />
            </div>
          </div>
          <div v-if="fileName">{{ fileName }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="success" @click="submitFileName">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改课时"
      :visible.sync="editDialogFormVisible"
    >
      <el-form
        ref="editform"
        :model="editFormInfo"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item
          label="课时名称"
          prop="title"
        >
          <el-input v-model="editFormInfo.title" />
        </el-form-item>
        <el-form-item
          label="导入视频文件"
        >
          <div class="import-file-total-wrapper">
            <div class="import-file-wrapper">
              <label style="width: 100%;height: 100%;">
                导入文件
                <input ref="editImportfile" type="file" hidden @change="editImportFile">
              </label>
            </div>
            <div class="import-file-elprogress-wrapper">
              <el-progress :percentage="editImportantPercentage" />
            </div>
          </div>
          <div v-if="editFileName">{{ editFileName }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="success" @click="editSubmitClass">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          title: '2021年全员必看的安全生产警示片',
          time: '01:06:25'
        },
        {
          title: '年度最走心的安全生产微电影《安全是什么》',
          time: '07:51'
        },
        {
          title: '新-安全生产法',
          time: '0'
        },
        {
          title: '应急管理部政策法规司新安全生产法修改权威解读',
          time: '02:31:12'
        }
      ],
      multipleSelection: [],
      addDialogFormVisible: false,
      formInfo: {
        title: '',
        fileUrl: ''
      },
      formLabelWidth: '120px',
      fileName: '',
      importfilePercentage: 0,
      rules: {
        title: [
          {
            required: true,
            message: '请输入课程名称',
            trigger: 'blur'
          }
        ]
      },
      editDialogFormVisible: false,
      editFormInfo: {
        title: '',
        fileUrl: ''
      },
      editFileName: '',
      editImportantPercentage: 0,
      isEditable: true,
      isDeleteable: true
    }
  },
  mounted() {
    // alert(this.$route.params.name)
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.isEditable = true
      this.isDeleteable = true
      if (this.multipleSelection.length === 1) {
        this.isEditable = false
      }
      if (this.multipleSelection.length > 0) {
        this.isDeleteable = false
      }
    },
    addClass() {
      // 新增课程
      this.addDialogFormVisible = true
    },
    editClass() {
      // 赋值当前
      this.editFormInfo.title = this.multipleSelection[0].title
      this.editDialogFormVisible = true
    },
    deleteClass() {
      this.$confirm('此操作将永久删除所选课时', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    importFile() {
      if (this.$refs.importfile.files.length > 0) {
        // alert(this.$refs.importfile.files[0])
        // console.log(this.$refs.importfile.files[0].name)
        this.fileName = this.$refs.importfile.files[0].name
      } else {
        this.fileName = ''
      }
    },
    submitFileName() {
      // 判断valid
      this.$refs.addform.validate((valid) => {
        if (valid) {
          // ..
        } else {
          // ..
        }
      })
    },
    editImportFile() {
      if (this.$refs.editImportFile.files.length > 0) {
        this.editFileName = this.$refs.editImportFile.files[0].name
      } else {
        this.editFileName = ''
      }
    },
    editSubmitClass() {
      this.$refs.editform.validate((valid) => {
        if (valid) {
          // ..
        } else {
          // ..
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .import-file-total-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
  }
  .import-file-wrapper {
    /* width: 200px; */
    flex-basis: 50%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: white;
    font-size: 20px;
    background: #A1A1A1;
  }
  .import-file-elprogress-wrapper {
    flex-grow: 1;
  }
</style>
