<template>
    <div class="container" style="padding: 30px">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
            style="display: flex;margin-left: 5px">
            <div style="margin-top: 5px;margin-bottom:20px;margin-right: 5px">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="option({}, 'add')">新增课程</el-button>
            </div>
            <!-- <el-form-item label="学校名称" prop="schoolName">
                <el-select v-model="queryParams.schoolName">
                    <el-option v-for="it in schoolList" :key="it.schoolId" :label="it.schoolName"
                        :value="it.schoolName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级名称" prop="trainClassName">
                <el-input v-model="queryParams.trainClassName" placeholder="请输入班级名称" clearable size="small" />
            </el-form-item> -->
        </el-form>

        <el-table v-loading="loading" :data="courseList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="课堂名称" align="center" prop="courseName" />
            <el-table-column label="所属班级" align="center" prop="className">
                <template slot-scope="scope">
                    {{ scope.row.classType }}
                </template>
            </el-table-column>
            <el-table-column label="课程链接" align="center">
                <template slot-scope="scope">
                    {{ scope.row.courseLink }}
                </template>
            </el-table-column>
            <el-table-column label="课程资料" align="center" prop="courseSource" />
            <el-table-column label="签到情况" align="center">
                <template slot-scope="scope">
                    {{ scope.row.signIn }} / 70
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="option(scope.row, 'motify')">修改</el-button>
                    <el-button size="mini" type="text" @click="option(scope.row, 'delete')">删除</el-button>
                    <el-button size="mini" type="text" @click="option(scope.row, 'signIn')">签到</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <el-dialog class="diaform" :title="title" :visible.sync="visibleopen" :close-on-click-modal="false"
            width="700px" append-to-body @close="colsedia">
            <div v-if="title == '签到码'">
                <vueQr :signInInfo="signInInfo"></vueQr>
            </div>
            <el-form v-else :model="swiperInfo" :rules="rules" ref="form" label-width="150px" text-align:center>

                <el-form-item label="所属班级" prop="filePath">
                    <el-select v-model="swiperInfo.entityId" placeholder="请选择班级" clearable>
                        <el-option v-for="item in classList" :key="item.train_class_id" :label="item.train_class_name"
                            :value="item.train_class_id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="课程名称" prop="fileName">
                    <el-input v-model="swiperInfo.fileName"></el-input>
                </el-form-item>

                <el-form-item label="课堂老师" prop="fileType">
                    <el-radio-group v-model="swiperInfo.fileType">
                        <el-radio label="pc"></el-radio>
                        <el-radio label="app"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="课程资料">
                    <div>
                        <ImageUpload ref="imgupload" v-model="swiperInfo.filePath" listtype='picture-card'
                            class="widthFix" fileName="publicize" :limit="1" />
                    </div>

                </el-form-item>
                <el-form-item label="课时">
                    <el-select v-model="swiperInfo.entityId" placeholder="请选择班级" clearable>
                        <el-option v-for="item in classList" :key="item.train_class_id" :label="item.train_class_name"
                            :value="item.train_class_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课时链接">
                    <el-select v-model="swiperInfo.entityId" placeholder="请选择班级" clearable>
                        <el-option v-for="item in classList" :key="item.train_class_id" :label="item.train_class_name"
                            :value="item.train_class_id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item style="margin-top: 80px; text-align: center; margin-left: -150px">
                    <el-button type="primary" style="width: 135px; font-size: 16px; height: 39px; line-height: 11px"
                        @click="submitto('confirm')">确认</el-button>
                    <el-button style="width: 135px; font-size: 16px; height: 39px; line-height: 11px; margin-left: 30px"
                        @click="colsedia">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { getSwiperInfo, addSwiperInfo, getSwiperClass, delteSwiper } from '@/api/trainService/index'
import ImageUpload from '@/components/ImgUpload/index.vue'
import vueQr from '@/components/vueQr/index.vue'
import { deepClone } from '@/utils'
const titleMap = {
    "motify": "修改",
    "delete": "删除",
    "signIn": "签到码",
    "add": "新增"
}
export default {
    name: 'peixunbaoming',
    components: { ImageUpload, vueQr },
    data() {
        return {
            imgAction: process.env.VUE_APP_BASE_API + '/upload',
            loading: false,
            // 传递给二维码的信息
            signInInfo: {},
            courseList: [
                {
                    'courseName': 1,
                    'className': 1,
                    'classType': 1,
                    'courseLink': 1,
                    'courseSource': 1,
                    'signIn': 1
                }
            ],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            swiperInfo: {
                fileName: 1,
                entityId: '',
                fileType: '',
                filePath: []
            },
            classList: [],
            title: '新增图片',
            visibleopen: false,
            rules: {
                filePath: [
                    { required: true, message: '请上传图片', trigger: 'blur' },
                ],
                fileName: [
                    { required: true, trigger: 'blur', message: "请输入排序" },
                    { pattern: /^\d+$/, message: "请输入正整数", trigger: "blur" }
                ],
                fileType: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],

            },
            currentImage: '',
        }
    },
    methods: {
        async getList() {
            const res = await getSwiperInfo()
            this.imageList = res.data
            const classRes = await getSwiperClass()
            console.log(classRes);
            this.classList = classRes.data
        },
        addCourse() {
            this.title = '新增图片'
            this.visibleopen = true
        },
        previewImage(params) {
            this.title = '图片预览'
            console.log(params);
            this.currentImage = process.env.VUE_APP_BASE_API + params.filePath
            this.visibleopen = true
        },
        //修改资讯的弹窗
        async modify(row) {
            this.title = '修改图片'
            this.visibleopen = true
            this.form = row
        },
        async option(row, type) {
            this.title = titleMap[type]
            if (type === 'motify') {

            } else if (type === 'delete') {

            } else if (type === 'add') {

            } else if (type === 'signIn') {
                this.generateSignIn(row)
            }
            this.visibleopen = true
        },
        // 提交
        submitto() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.submit()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },
        async submit() {
            const data = deepClone(this.swiperInfo)
            data.filePath = data.filePath[data.filePath.length - 1].toString()
            data.entityId = data.entityId * 1
            const res = await addSwiperInfo(data)
            if (res.code == 200) {
                this.$message.success('新增成功')
                this.colsedia()
                this.getList()
            }
        },
        // 关闭
        colsedia() {
            this.$refs['form'].resetFields()
            this.swiperInfo = {
                fileName: '',
                entityId: '',
                fileType: '',
                filePath: []
            }
            this.$refs.imgupload.clearImages()
            this.currentImage = ""
            this.visibleopen = false
        },
        // 生成二维码信息
        generateSignIn(row) {
            const time = new Date().getTime().toString()
            this.signInInfo = { 'time': time, ...row }
            this.title = '签到码'
            this.visibleopen = true
        },
    },

    created() {
        this.getList()
    },
}
</script>

<style lang="scss" scoped>
.el-upload-list--picture-card .el-upload-list__item {
    width: 100% !important;
}
</style>
