<template>
    <div>
        <el-card shadow="hover" class="mgb20">
            <div class="flex-between">
                <div class="per_title" v-preventReClick @click="goback()">
                    <i class="el-icon-arrow-left"></i>
                    <span class="per_back">返回</span>
                    <span class="per_school">老师评语</span>
                </div>
            </div>              
        </el-card>

        <el-card shadow="hover" class="mgb20">
            <div>
                <p class="mgb20">评语模板名称</p>
                <el-input
                    placeholder="请输入评语模板名称"
                    clearable
                    class="inline-input"
                ></el-input>
            </div>
        </el-card>

        <el-card shadow="hover" class="mgb20">
            <div class="flex-between mgb20">
                <p class="l-title">老师寄语</p>
                <el-switch></el-switch>
            </div>
            <div class="mgb20" style="display: flex;justify-content: flex-end;">
                <div>
                    <el-button type="primary" size="small" round>导入</el-button>
                    <el-button type="primary" size="small" round>删除</el-button>
                </div>
            </div>
            <el-table :data="listData" class="table" stripe header-align="center" row-key="id">
                <el-table-column type="index" width="100" label="序号" align="center">
                    <template slot-scope="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="分数" align="center">
                    <template slot-scope="scope">
                        <div class="inline">
                            <el-select v-model="scope.row.score1" size="mini">
                                <el-option v-for="item in scoreList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                            </el-select>
                            <span>——</span>
                            <el-select v-model="scope.row.score2" size="mini">
                                <el-option v-for="item in scoreList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="评语" align="center">
                    <template slot-scope="scope">
                        <el-input type="textarea" rows="2" v-model="scope.row.comment"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div class="plus" @click="addData">
                <i class="el-icon-circle-plus-outline"></i>
            </div>
        </el-card>

        <el-card shadow="hover" class="mgb20">
            <div class="flex-between mgb20">
                <p class="l-title">老师签名</p>
                <el-switch></el-switch>
            </div>
            <div class="ags">
                <div class="item">
                    <el-radio v-model="autograph" label="1">已有签名</el-radio>
                    <el-select v-model="agVal" size="mini">
                        <el-option v-for="item in autographList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <el-upload
                        class="avatar-uploader"
                        accept=".jpg,.png,.jpeg,.gif"
                        :on-remove="handleRemove"
                        :on-error="uploadError"
                        :on-success="uploadSuccess"
                        :before-remove="beforeRemove"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :action="this.api.fileupload"
                        name="file"
                    > 
                        <img v-if="coverUrl" :src="coverUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <div class="item">
                    <el-radio v-model="autograph" label="2">重新上传</el-radio>
                    <el-select v-model="agVal" size="mini">
                        <el-option v-for="item in autographList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                    <el-upload
                        class="avatar-uploader"
                        accept=".jpg,.png,.jpeg,.gif"
                        :on-remove="handleRemove"
                        :on-error="uploadError"
                        :on-success="uploadSuccess"
                        :before-remove="beforeRemove"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :action="this.api.fileupload"
                        name="file"
                    > 
                        <img v-if="coverUrl" :src="coverUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </div>
            
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'teachercomment',
    data() {
        return {
            scoreList: [
                {
                    id: 1,
                    label: 1
                },{
                    id: 2,
                    label: 2
                },{
                    id: 3,
                    label: 3
                },
            ],
            listData: [
                {
                    id: 1,
                    score1: 1,
                    score2: 10,
                    comment: ''
                },
                {
                    id: 2,
                    score1: 1,
                    score2: 10,
                    comment: ''
                },
            ],
            autograph: '1',
            agVal: 1,
            autographList: [
                {
                    id: 1,
                    name: '签名一'
                },{
                    id: 2,
                    name: '签名二'
                },
            ]
        };
    },
    mounted() {
        // this.getData()
    },
    methods: {
        getData() {
            // let data = {
            //     countries: this.form.countries,
            //     provinceId: this.form.provinces,
            //     cityId: this.form.city,
            //     searchContent: this.form.keyword,
            //     pageNo: this.pageNo,
            //     pageSize: this.pageSize
            // }
            // this.$get(this.api.queryCustomer,data).then(res => {
            //     this.listData = res.message.rows
            //     this.totals = res.message.total
            // }).catch(res => {});
        },
        entry(){
            this.$router.push('report')
        },
        goback() {
            this.$confirm('确定返回？未更新的信息将不会保存。', '提示', {
                type: 'warning'
            })
            .then(() => {
                this.$router.back()
            })
            .catch(() => {});
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` 
            );
        },
        uploadSuccess(res, file, fileList) {
            this.coverUrl = res.data.filesResult.fileUrl
        },
        uploadLgSuccess(res, file, fileList) {
            this.carouselUrl = res.data.filesResult.fileUrl
        },
        uploadError(err, file, fileList) {
            this.$message({
                message: "上传出错，请重试！",
                type: "error",
                center: true
            });
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleRemove(file, fileList) {
            this.uploadList = fileList
        },
        addData(){
            this.listData.push({
                id: '',
                score1: '',
                score2: '',
                comment: '',
            })
        }
    }
};
</script>

<style lang="scss" scoped>
    .inline-input{
        width: 200px;
    }
    .inline{
        display: flex;
        justify-content: center;
        align-items: center;
        .el-select{
            width: 100px;
            margin: 0 10px;
        }
    }
    .plus{
        padding: 10px 0;
        text-align: center;
        background-color: #9278FF;
        cursor: pointer;
        i{
            font-size: 24px;
            color: #fff;
        }
    }
    .ags{
        display: flex;

        .item:first-child{
            padding-right: 20px;
            margin-right: 20px;
            border-right: 1px dashed #ccc;
        }
        .el-radio{
            margin-bottom: 10px;
        }
        /deep/.el-select{
            .el-input{
                width: 150px;
            }
        }
    }
    .avatar-uploader{
        margin-top: 15px;
    }
    .avatar-uploader /deep/.el-upload {
        width: 220px;
        height: 140px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader-lg /deep/.el-upload {
        width: 100%;
        height: 300px;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #cb221c;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px !important;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 220px;
        height: 140px;
        display: block;
    }
    .avatar-lg {
        width: 100%;
        height: 300px;
        display: block;
    }
</style>

