<template>
    <div class="container" style="padding: 30px">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
            style="display: flex; justify-content: space-between">
            <div style="margin-top: 5px;margin-bottom:20px">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addsign">新增</el-button>
            </div>
        </el-form>
        <el-table v-loading="loading" :data="imageList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="班级名称" align="center" prop="className" />
            <el-table-column label="班级类型" align="center" prop="">
                <template slot-scope="scope">
                    {{ classTypeObj[scope.row.classType] }}
                </template>
            </el-table-column>
            <el-table-column label="平台" align="center">
                <template slot-scope="scope">
                    {{ platform[scope.row.fileType] }}
                </template>
            </el-table-column>
            <el-table-column label="排序" align="center" prop="sort" />
            <!-- <el-table-column label="图片预览" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.imgurl.substring(scope.row.imgurl.lastIndexOf('/') + 1, scope.row.imgurl.length)
                        }}
                    </span>
                    <el-button size="mini" @click="previewImage(scope.row)">预览</el-button>
                </template>
</el-table-column> -->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="previewImage(scope.row)">预览</el-button>
                    <el-button size="mini" type="text" @click="delrow(scope.row)">删除</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 == '图片预览'">
                <img :src="currentImage" alt="" style="width: 100%;">
            </div>
            <el-form v-else :model="swiperInfo" :rules="rules" ref="form" label-width="150px" text-align:center>
                <el-form-item label="文件上传：" prop="filePath">
                    <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="排序" 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="班级">
                    <el-select v-model="swiperInfo.entityId" placeholder="请选择班级" clearable>
                        <el-option v-for="item in classList" :key="item.trainClassId" :label="item.trainClassName"
                            :value="item.trainClassId"></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 { getSchoolList, addSchool, updateSchool, delSchool } from '@/api/trainService/index.js'
import { getSwiperInfo, addSwiperInfo, getSwiperClass, delteSwiper } from '@/api/trainService/index'
import ImageUpload from '@/components/ImgUpload/index.vue'
import { deepClone } from '@/utils'
// const validateNumber = (rule, value, callback) => {
//     const rgx = /^\d+$/
//     console.log(value);
//     if (value === '') {
//         callback(new Error('请输入排序'));
//     } else {
//        setTimeout(() => {
//         alert(value)
//         alert(rgx.test(value))
//        }, 1000);

//     }
// else if(rgx.test(value)){
//   callback();

// } 
// else {
// //   if (this.ruleForm.checkPass !== '') {
// //     this.$refs.ruleForm.validateField('checkPass');
// //   }

//   callback();
// }
// };
export default {
    name: 'peixunbaoming',
    components: { ImageUpload },
    data() {
        return {
            imgAction: process.env.VUE_APP_BASE_API + '/upload',
            loading: false,
            imageList: [],
            classTypeObj: {
                "0": "校企合作班",
                "1": "线下培训进阶班",
                "2": "可靠性人才培训班",
                "3": "师资培训班"
            },
            platform: {
                "pc": "pc",
                "app": "小程序",
            },
            // 总条数
            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.total = res.total
            this.imageList = res.data
            const classRes = await getSwiperClass()
            console.log(classRes);
            this.classList = classRes.data
            // this.imageList = [
            //     { id: 3, imgurl: "./imageTemp/2.jpg" },
            //     { id: 4, imgurl: "./imageTemp/1.jpg" },
            //     { id: 1, imgurl: "./imageTemp/peixun2.png" },
            //     { id: 2, imgurl: "./imageTemp/peixun3.png" },
            // ];
        },
        // numberInput(e){
        //     if(e == '-'){
        //         this.swiperInfo.sort = ''
        //     }
        // },
        //新增资讯的弹窗
        addsign() {
            this.title = '新增图片'
            this.visibleopen = true
        },
        // fileChnage(fileName) {
        //     if (!fileName && !this.swiperInfo.fileName) {
        //         this.swiperInfo.fileName = ''
        //     } else if (!this.swiperInfo.fileName) {
        //         this.swiperInfo.fileName = fileName
        //     }
        // },
        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 delrow(row) {
            this.$confirm('是否确认删除图片', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(function () {
                    return delteSwiper(row.fileId)
                })
                .then(() => {
                    this.getList()
                    this.$message.success('删除成功')
                })
        },
        // 提交
        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
        },
        // handleQuery() {
        //     this.getList()
        // },
        // resetQuery() {
        //     this.resetForm('queryForm')
        //     this.getList()
        // },
    },
    created() {
        this.getList()
    },
}
</script>

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