<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="display: flex">
                <el-form-item label="学校名称" prop="title">
                    <el-input v-model="queryParams.title" placeholder="请输入资讯标题" clearable size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </div> -->
            <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="schoolList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="手机号" align="center" prop="phone" />
            <el-table-column label="教学方向" align="center" prop="teaching" />
            <el-table-column label="职称" align="center" prop="title" />
            <el-table-column label="经验" align="center" prop="experience" />
            <el-table-column label="简介" align="center" prop="profile" />
            <el-table-column label="是否对外显示" align="center" prop="isEmploy" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="modify(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="720px"
            append-to-body
            @close="colsedia"
        >
            <el-form :model="form" :rules="rules" ref="form" label-width="110px" inline>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="教学方向" prop="teaching">
                    <el-input v-model="form.teaching" placeholder="请输入教学方向"></el-input>
                </el-form-item>
                <el-form-item label="职称" prop="title">
                    <el-input v-model="form.title" placeholder="请输入职称"></el-input>
                </el-form-item>
                <el-form-item label="经验" prop="experience">
                    <el-input v-model="form.experience" placeholder="请输入经验"></el-input>
                </el-form-item>
                <el-form-item label="是否对外显示" prop="isEmploy">
                    <el-input v-model="form.isEmploy" placeholder="请输入是否对外显示"></el-input>
                </el-form-item>

                <br />
                <el-form-item label="图片" prop="avatar">
                    <ImageUpload
                        ref="imgupload"
                        v-model="form.avatar"
                        listtype="picture-card"
                        fileName="publicize"
                        :limit="1"
                    />
                </el-form-item>
                <el-form-item label="简介" prop="profile">
                    <el-input v-model="form.profile" placeholder="请输入简介" type="textarea" :rows="3"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitto('confirm')">确 定</el-button>
                <el-button @click="colsedia">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { listTeacher, addTeacher, updateTeacher, deleteTalent } from '@/api/trainService/index.js'
import ImageUpload from '@/components/ImageUpload/index.vue'
export default {
    name: 'peixunbaoming',
    components: { ImageUpload },
    data() {
        return {
            imgbase: process.env.VUE_APP_BASE_TARGET,
            loading: false,
            schoolList: [],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            title: '新增教师',
            visibleopen: false,
            form: {},
            rules: {
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                teaching: [{ required: true, message: '请输入教学方向', trigger: 'blur' }],
                title: [{ required: true, message: '请输入职称', trigger: 'blur' }],
                isEmploy: [{ required: true, message: '请输入是否对外显示', trigger: 'blur' }],
                avatar: [{ required: true, message: '请上传头像', trigger: 'change' }],
            },
        }
    },

    mounted() {},
    methods: {
        async getList() {
            const res = await listTeacher(this.queryParams)
            this.total = res.total
            this.schoolList = res.rows
        },
        //新增资讯的弹窗
        addsign() {
            this.title = '新增教师'
            this.visibleopen = true
        },
        //修改资讯的弹窗
        async modify(row) {
            this.title = '修改教师'
            this.visibleopen = true
            this.form = row
            if (this.form.avatar) {
                this.form.avatar = this.imgbase + this.form.avatar
            }
        },
        async delrow(row) {
            this.$confirm('是否确认删除教师', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(function () {
                    return deleteTalent(row.talentId)
                })
                .then(() => {
                    this.getList()
                    this.$message.success('删除成功')
                })
        },
        // 提交
        submitto() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.talentId) {
                        // 修改
                        const url = this.form.avatar
                        const index = url.indexOf('/profile')
                        this.form.avatar = url.substring(index)
                        console.log(this.form)
                        updateTeacher(this.form).then((res) => {
                            this.$message.success('修改成功')
                            this.colsedia()
                            this.getList()
                        })
                    } else {
                        addTeacher(this.form).then((res) => {
                            this.$message.success('新增成功')
                            this.colsedia()
                            this.getList()
                        })
                    }
                }
            })
        },
        // 关闭
        colsedia() {
            this.visibleopen = false
            this.$refs['form'].resetFields()
        },
        handleQuery() {
            this.getList()
        },
        resetQuery() {
            this.resetForm('queryForm')
            this.getList()
        },
    },
    created() {
        this.getList()
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-textarea__inner {
    width: 500px;
}
</style>
