@extends('layouts.base')
@section('title', '基础设置')
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/answer-reward/views/admin/index.css')}}">
<style>

</style>
    <div class="all">
        <div id="app" v-cloak>
            <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                <div class="vue-crumbs">
                    短视频积分
                    > 
                    基础设置
                </div>
                <div class="vue-main">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">题目编辑</div>
                    </div>
                    <div class="vue-main-form">
                        <el-form-item label="题目" prop="title">
                            <el-input v-model="form.title" style="width:70%;" placeholder="请输入题目名称"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <div style="width:70%;border:1px solid #ccc;margin-left:30px">
                                <div>
                                    <div style="background:#f4f4f4;display:flex;padding:10px;text-align: center;">
                                        <div style="width:80px">选项</div>
                                        <div style="flex:1"></div>
                                        <div style="width:120px">正确答案</div>
                                    </div>
                                    <div style="display:flex;padding:10px;text-align: center;width:100%">
                                        <div style="width:100px">选项一</div>
                                        <div style="flex:1">
                                            <el-input v-model="content1"></el-input>
                                        </div>
                                        <el-radio v-model="is_true" :label="1" style="width:150px">&nbsp;</el-radio>
                                    </div>
                                    <div style="display:flex;padding:10px;text-align: center;width:100%">
                                        <div style="width:100px">选项二</div>
                                        <div style="flex:1">
                                            <el-input v-model="content2"></el-input>
                                        </div>
                                        <el-radio v-model="is_true" :label="2" style="width:150px">&nbsp;</el-radio>
                                    </div>
                                    <div style="display:flex;padding:10px;text-align: center;width:100%">
                                        <div style="width:100px">选项三</div>
                                        <div style="flex:1">
                                            <el-input v-model="content3"></el-input>
                                        </div>
                                        <el-radio v-model="is_true" :label="3" style="width:150px">&nbsp;</el-radio>
                                    </div>
                                    <div style="display:flex;padding:10px;text-align: center;width:100%">
                                        <div style="width:100px">选项四</div>
                                        <div style="flex:1">
                                            <el-input v-model="content4"></el-input>
                                        </div>
                                        <el-radio v-model="is_true" :label="4" style="width:150px">&nbsp;</el-radio>
                                    </div>
                                        
                                    
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="选择视频" prop="is_open">
                            <div style="width:70%">
                                <el-tag v-for="(item,index) in choosed_list" :key="index" closable @close="handleClose(item,index)" style="margin:0 3px;"> [[item.title]]</el-tag>
                            </div>
                            <el-button size="mini" @click="openVideo">选择视频</el-button>
                            <div class="tip">已被添加的视频，将不会被搜索出来</div>
                        </el-form-item>
                        <el-form-item label="会员答对题奖励" prop="uid_reward_value">
                            <el-input v-model="form.uid_reward_value" style="width:70%;" placeholder="请输入会员答对题奖励">
                                <template slot="append">积分</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="答对题上级奖励" prop="parent_reward_value">
                            <el-input v-model="form.parent_reward_value" style="width:70%;" placeholder="请输入答对题上级奖励">
                                <template slot="append">积分</template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="会员答对题奖励" prop="uid_reward_integral">
                            <el-input v-model="form.uid_reward_integral" style="width:70%;" placeholder="请输入会员答对题奖励">
                                <template slot="append">消费积分</template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="答对题上级奖励" prop="parent_reward_integral">
                            <el-input v-model="form.parent_reward_integral" style="width:70%;" placeholder="请输入答对题上级奖励">
                                <template slot="append">消费积分</template>
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                
            </el-form>
            <!--视频-->
            <el-dialog :visible.sync="video_show" width="60%" center  title="选择视频">
                <div>
                    <div>
                        <el-form :model="search_video" >
                            <el-form-item label="">
                                <el-input v-model="video_title" placeholder="视频标题" style="width:70%"></el-input>
                                <el-button type="primary" @click="searchVideo(1)">搜索</el-button>
                            </el-form-item>
                        </el-form>
                        
                    </div>
                    <el-table :data="video_list" style="width: 100%;height:500px;overflow:auto" id="video-list">
                        <el-table-column label="视频ID" prop="id" align="center" width="150px"></el-table-column>
                        <el-table-column label="视频">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items: center">
                                    
                                    <div style="flex:1">
                                        <div style="color:#333;font-weight:500">[[scope.row.title]]</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button v-if="choosed_ids.indexOf(scope.row.id)==-1" type="pramary" size="mini" @click="choosed(scope.row)">选取</el-button>
                                <div v-else type="pramary" style="color:#29ba9b;text-align:center">已选</div>
                            </template>
                        </el-table-column>
                        
                    </el-table>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="video_show = false">取 消</el-button>
                    <!-- <el-button type="primary" @click="sureVideo">确 定 </el-button> -->
                </span>
            </el-dialog>
            <!--end-->
            <!-- 分页 -->
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
        </div>
    </div>

    <script>
    
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    is_true:0,
                    content1:"",
                    content2:"",
                    content3:"",
                    content4:"",
                    id:0,
                    choosed_list:[],
                    choosed_ids:[],
                    form:{
                        is_open:0,
                        uid_reward_value:"",
                        parent_reward_value:"",
                        uid_reward_integral:"",
                        parent_reward_integral:"",
                    },
                    search_video:{},
                    video_show:false,
                    video_title:"",
                    video_list:[],


                    rules:{
                        name:{ required: true, message: '请输入'}
                    },

                }
            },
            created() {
                

            },
            mounted() {
                this.id = this.getParam('id');
                if(this.id) {
                    this.getData();
                }
            },
            methods: {
                
                submitForm(formName) {
                    console.log(this.form)
                    let that = this;
                    if(this.is_true == 0) {
                        this.$message.error("请选择正确答案！")
                        return;
                    }
                    let json = {
                        data:{
                            title:this.form.title,
                            uid_reward_value:this.form.uid_reward_value,
                            parent_reward_value:this.form.parent_reward_value,
                            uid_reward_integral:this.form.uid_reward_integral,
                            parent_reward_integral:this.form.parent_reward_integral,
                            answer:[],
                            video_id:this.choosed_ids,
                        }
                    };
                    json.data.answer.push({content:this.content1,answer:0},{content:this.content2,answer:0},{content:this.content3,answer:0},{content:this.content4,answer:0},)
                    json.data.answer[this.is_true-1].answer = 1;
                    if(this.id) {
                        json.id = this.id;
                    }
                    console.log(json);
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                            this.$http.post('{!! yzWebFullUrl('plugin.answer-reward.admin.subject.edit') !!}',json).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.goBack();
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                getData() {
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post("{!! yzWebFullUrl('plugin.answer-reward.admin.subject.edit') !!}",{id:this.id}).then(function (response) {
                            if (response.data.result){
                                if(response.data.data!=null) {
                                    console.log(response.data.data)
                                    let datas = response.data.data;
                                    this.form = {
                                        title:response.data.data.title,
                                        parent_reward_value: response.data.data.parent_reward_value,
                                        uid_reward_value: response.data.data.uid_reward_value,
                                        uid_reward_integral: response.data.data.uid_reward_integral,
                                        parent_reward_integral: response.data.data.parent_reward_integral,
                                    }
                                    
                                    datas.has_many_answer.forEach((item,index) => {
                                        if(item.answer == 1) {
                                            this.is_true = index+1;
                                        }
                                    })
                                    if(datas.has_many_answer.length>=4) {
                                        this.content1 = datas.has_many_answer[0].content;
                                        this.content2 = datas.has_many_answer[1].content;
                                        this.content3 = datas.has_many_answer[2].content;
                                        this.content4 = datas.has_many_answer[3].content;
                                    }
                                    if(response.data.data.has_many_video_subject!=null) {
                                        let videos = response.data.data.has_many_video_subject;
                                        videos.forEach((item,index) => {
                                            this.choosed_ids.push(item.video_id);
                                            this.choosed_list.push({id:item.video_id,title:item.has_one_video?item.has_one_video.title:"该视频不存在"})
                                        })

                                    }
                                }
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        }
                    );
                },

                openVideo() {
                    this.video_show = true;
                },
                searchVideo() {
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post("{!! yzWebFullUrl('plugin.answer-reward.admin.subject.get-video') !!}",{search:{title:this.video_title}}).then(function (response) {
                            if (response.data.result){
                                this.video_list = response.data.data;
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        }
                    );
                },
                choosed(row) {
                    this.choosed_list.push({id:row.id,title:row.title});
                    this.choosed_ids.push(row.id);
                },
                handleClose(tag,index) {
                    console.log(tag);
                    this.choosed_ids.splice(index,1);
                    this.choosed_list.splice(index,1);
                },
                getParam(name) { 
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
                    var r = window.location.search.substr(1).match(reg); 
                    if (r != null) return unescape(r[2]); 
                    return null; 
                },
                goBack() {
                    history.go(-1)
                },
                
                
                
            },
        })

    </script>
@endsection