<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <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-button type="primary" size="small" round v-preventReClick>确定</el-button>
                        </div>
                    </div>              
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div>
                        <p class="mgb20">实验报告名称</p>
                        <el-input
                            placeholder="请输入实验报告名称"
                            clearable
                            maxlength="15"
                            class="inline-input"
                        ></el-input>
                    </div>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div class="flex-center mgb20">
                        <p class="addhr_tag"></p>
                        <span>基本信息</span>
                    </div>
                    <div>
                        <el-form inline class="inline-form">
                            <div class="inner">
                                <el-form-item label="学生姓名">
                                    <el-input placeholder="" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="学生学号">
                                    <el-input placeholder="" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="学生班级">
                                    <el-input placeholder="" size="small"></el-input>
                                </el-form-item>
                            </div>
                            <div class="inner">
                                <el-form-item label="实验名称">
                                    <el-input placeholder="" size="small"></el-input>
                                </el-form-item>
                                <el-form-item label="实验学时">
                                    <el-input placeholder="" size="small"></el-input>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <div class="flex-center">
                            <p class="addhr_tag"></p>
                            <span>实验目的</span>
                        </div>
                        <div>
                            <span>得分：0/60</span>
                            <el-button class="ml10" type="primary" size="small" v-preventReClick>编辑</el-button>
                        </div>
                    </div>
                    <el-input type="textarea" rows="5" disabled></el-input>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <div class="flex-center">
                            <p class="addhr_tag"></p>
                            <span>实验原理</span>
                        </div>
                        <div>
                            <span>得分：0/60</span>
                            <el-button class="ml10" type="primary" size="small" v-preventReClick>编辑</el-button>
                        </div>
                    </div>
                    <el-input type="textarea" rows="5" disabled></el-input>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <div class="flex-center">
                            <p class="addhr_tag"></p>
                            <span>实验步骤</span>
                        </div>
                        <div>
                            <span>得分：0/60</span>
                            <el-button class="ml10" type="primary" size="small" v-preventReClick>编辑</el-button>
                        </div>
                    </div>
                    <el-input type="textarea" rows="5" disabled></el-input>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <div class="flex-center">
                            <p class="addhr_tag"></p>
                            <span>实验结果分析</span>
                        </div>
                        <div>
                            <span>得分：0/60</span>
                            <el-button class="ml10" type="primary" size="small" v-preventReClick>编辑</el-button>
                        </div>
                    </div>

                    <div class="block">
                        <div class="flex-between mb10">
                            <p class="l-title">步骤1 判断平价关系确定交易方向</p>
                            <el-switch></el-switch>
                        </div>
                        <div class="inner">
                            <el-checkbox>日期</el-checkbox>
                            <el-checkbox>品种</el-checkbox>
                        </div>
                        <div>
                            <div class="flex-between">
                                <div class="inline-flex">
                                    <el-checkbox></el-checkbox>
                                    <span>设置结论选项</span>
                                    <div class="input-wrap">
                                        <div class="input" v-for="(item,index) in conclusion1" :key="index">
                                            <el-input size="mini" v-model="item.val"></el-input>
                                            <i class="plus el-icon-circle-plus-outline" @click="addColumn(1)"></i>
                                            <i class="sub el-icon-remove-outline" v-if="conclusion1.length > 1" @click="delColumn(1,index)"></i>
                                        </div>
                                    </div>
                                </div>
                                <p>(0/0分)</p>
                            </div>
                            <div class="flex-between">
                                <div class="inline-flex">
                                    <el-checkbox></el-checkbox>
                                    <span>设置主观题</span>
                                    <el-input size="mini"></el-input>
                                </div>
                                <p>(0/0分)</p>
                            </div>
                        </div>
                    </div>

                    <div class="block">
                        <div class="flex-between mb10">
                            <p class="l-title">步骤2 选择期货期权套利策略</p>
                            <el-switch></el-switch>
                        </div>
                        <div class="inner">
                            <el-checkbox>策略</el-checkbox>
                            <el-checkbox>套利组合</el-checkbox>
                        </div>
                        <div>
                            <div class="flex-between">
                                <div class="inline-flex">
                                    <el-checkbox></el-checkbox>
                                    <span>设置结论选项</span>
                                    <div class="input-wrap">
                                        <div class="input" v-for="(item,index) in conclusion2" :key="index">
                                            <el-input size="mini" v-model="item.val"></el-input>
                                            <i class="plus el-icon-circle-plus-outline" @click="addColumn(2)"></i>
                                            <i class="sub el-icon-remove-outline" v-if="conclusion2.length > 1" @click="delColumn(2,index)"></i>
                                        </div>
                                    </div>
                                </div>
                                <p>(0/0分)</p>
                            </div>
                            <div class="flex-between">
                                <div class="inline-flex">
                                    <el-checkbox></el-checkbox>
                                    <span>设置主观题</span>
                                    <el-input size="mini"></el-input>
                                </div>
                                <p>(0/0分)</p>
                            </div>
                        </div>
                    </div>

                    <div class="block">
                        <div class="flex-between mb10">
                            <p class="l-title">步骤3 判断平价关系确定交易方向</p>
                            <el-switch></el-switch>
                        </div>
                        <div class="inner">
                            <el-checkbox>策略</el-checkbox>
                        </div>
                        <div>
                            <div class="flex-between">
                                <div class="inline-flex">
                                    <el-checkbox></el-checkbox>
                                    <span>设置结论选项</span>
                                    <div class="input-wrap">
                                        <div class="input" v-for="(item,index) in conclusion3" :key="index">
                                            <el-input size="mini" v-model="item.val"></el-input>
                                            <i class="plus el-icon-circle-plus-outline" @click="addColumn(3)"></i>
                                            <i class="sub el-icon-remove-outline" v-if="conclusion3.length > 1" @click="delColumn(3,index)"></i>
                                        </div>
                                    </div>
                                </div>
                                <p>(0/0分)</p>
                            </div>
                            <div class="flex-between">
                                <div class="inline-flex">
                                    <el-checkbox></el-checkbox>
                                    <span>设置主观题</span>
                                    <el-input size="mini"></el-input>
                                </div>
                                <p>(0/0分)</p>
                            </div>
                        </div>
                    </div>

                    <div class="block">
                        <div class="flex-between mb10">
                            <p class="l-title">步骤4 选择期权期货套利策略</p>
                            <el-switch></el-switch>
                        </div>
                        <div class="inner">
                            <el-checkbox>策略</el-checkbox>
                        </div>
                        <div>
                            <div class="flex-between">
                                <div class="inline-flex">
                                    <el-checkbox></el-checkbox>
                                    <span>设置结论选项</span>
                                    <div class="input-wrap">
                                        <div class="input" v-for="(item,index) in conclusion4" :key="index">
                                            <el-input size="mini" v-model="item.val"></el-input>
                                            <i class="plus el-icon-circle-plus-outline" @click="addColumn(4)"></i>
                                            <i class="sub el-icon-remove-outline" v-if="conclusion4.length > 1" @click="delColumn(4,index)"></i>
                                        </div>
                                    </div>
                                </div>
                                <p>(0/0分)</p>
                            </div>
                            <div class="flex-between">
                                <div class="inline-flex">
                                    <el-checkbox></el-checkbox>
                                    <span>设置主观题</span>
                                    <el-input size="mini"></el-input>
                                </div>
                                <p>(0/0分)</p>
                            </div>
                        </div>
                    </div>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <div class="flex-center">
                            <p class="addhr_tag"></p>
                            <span>实验结论</span>
                        </div>
                        <div>
                            <span>得分：0/60</span>
                        </div>
                    </div>
                    <el-input type="textarea" rows="5" placeholder="请填写实验结论"></el-input>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <div class="flex-center">
                            <p class="addhr_tag"></p>
                            <span>总结与心得体会</span>
                        </div>
                        <div>
                            <span>得分：0/60</span>
                        </div>
                    </div>
                    <el-input type="textarea" rows="5" placeholder="请填写总结与心得体会"></el-input>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data (){
            return {
                form: {
                    systemName: '',
                    systemType: '',
                    systemAttribution: ''
                },
                rules: {
                    systemName:[
                        { required: true, message: '请输入系统名称', trigger: 'blur' }
                    ],
                    systemType:[
                        { required: true, message: '请选择系统类型', trigger: 'change' }
                    ],
                    systemAttribution:[
                        { required: true, message: '请选择系统归属', trigger: 'change' }
                    ] 
                },
                conclusion1: [{val: ''}],
                conclusion2: [{val: ''}],
                conclusion3: [{val: ''}],
                conclusion4: [{val: ''}],
                conclusion5: [{val: ''}],
                conclusion6: [{val: ''}],
                conclusion7: [{val: ''}],
                conclusion8: [{val: ''}],
            }
        },
        mounted(){
            if(this.configId){
                this.getData()
            }
        },
        methods: {
            getData(){
                let data = {
                    systemId: this.configId
                }
                this.$get(this.api.queryServiceConfigDetails,data).then((res) => {
                        this.form = {
                            systemName: res.message[0].systemName,
                            systemType: res.message[0].systemType,
                            systemAttribution: res.message[0].systemAttribution,
                        }
                    }).catch((res) => {
                })
            },
            saveAdd(){
                let data = {
                    systemId: this.configId,
                    systemName: this.form.systemName,
                    systemType: this.form.systemType,
                    systemAttribution: this.form.systemAttribution,
                }
                if(this.configId){
                    this.$post(this.api.updateServiceConfig,data).then((res) => {
                            this.$message.success('编辑成功');
                            this.$router.back()
                        }).catch((res) => {
                    })
                }else{
                    this.$post(this.api.updateServiceConfig,data).then((res) => {
                            this.$message.success('添加成功');
                            this.$router.back()
                        }).catch((res) => {
                    })
                }
            },
            goback() {
                this.$confirm('确定返回？未更新的信息将不会保存。', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    this.$router.back()
                })
                .catch(() => {});
            },
            addColumn(index){
                if(this[`conclusion${index}`].length > 4){
                    this.$message.warning('最多添加5个');
                }else{
                    this[`conclusion${index}`].push({val: ''})
                }
            },
            delColumn(index,i){
                this[`conclusion${index}`].splice(i,1)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .ml10{
        margin-left: 10px;
    }
    .mb10{
        margin-bottom: 10px;
    }
    .inline-input{
        width: 200px;
    }
    .inline-form{
        display: flex;
        flex-direction: column;
        
        .inner{
            display: inline-flex;

            &:first-child{
                margin-bottom: 15px;
            }
            .el-form-item{
                width: 33.33%;
                margin: 0 20px;
                font-size: 12px;
            }
        }
    }
    .flex-center{
        font-size: 14px;
    }
    .flex-between{
        font-size: 12px;
    }
    .block{
        padding: 10px;
        margin-bottom: 15px;
        background-color: #f5f5f5;

        .l-title{
            font-size: 14px;
            font-weight: bold;
        }
        .inner{
            min-height: 100px;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px;
            border: 1px solid #ccc;
            background-color: #fff;
            box-sizing: border-box;
        }
        .inline-flex{
            display: inline-flex;
            margin-bottom: 10px;
            font-size: 12px;

            .input-wrap{
                .input{
                    margin-bottom: 5px;
                }
            }
            span{
                margin: 0 10px 0 5px;
            }
            .el-input{
                width: 400px;
            }
            i{
                font-size: 16px;
                cursor: pointer;

                &:hover{
                    opacity: .8;
                }
            }
            .plus{
                margin-left: 10px;
                color: #63e600;
            }
            .sub{
                margin-left: 5px;
                color: #636363;
            }
        }
    }
</style>