<template>
    <div class="container">
        <div class="row" style="padding-top:24px;">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <select class="form-control" v-model="formData.task_type">
                            <option :value="item.task_type" v-for="item in task_type">{{item.title}}</option>
                        </select>
                    </div>
                    <div class="col-md-3" v-show="formData.task_type == '1'">
                        <input type="text" class="form-control" placeholder="输入人数">
                    </div>
                    <div class="col-md-3">
                        <select class="form-control" v-model="missionType">
                            <option value="0">用户任务</option>
                            <option value="1" v-if="user && user.member_type == 1">官方任务</option>
                            <option value="2">自定义</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" placeholder="输入领域" v-show="missionType == '2'" v-model="formData.cate_name">
                        <select class="form-control" v-show="missionType != '2'" v-model="formData.cate_id">
                            <option :value="item.cate_id" v-for="(item,index) in cate_list" :selected="index === 0">{{item.cate_name}}</option>
                        </select>
                    </div>
                </div>
                <div class="row" style="margin-top:20px;">
                    <div class="col-md-12">
                        <input type="text" class="form-control" placeholder="输入标题" v-model="formData.task_title">
                    </div>
                </div>
                <div class="row" style="margin-top:12px;">
                    <div class="col-md-12">
                        <textarea class="form-control" rows="20" placeholder="原文内容" v-model="formData.task_content" @blur="contentBlur"></textarea>
                    </div>
                </div>
                <div class="row" style="margin-top:12px;">
                    <div class="col-md-12">
                        <span class="title">原文链接:</span>
                        <div class="input">
                            <input type="text" class="form-control" v-model="formData.task_url">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <form class="form-horizontal right">
                    <div class="form-group">
                        <div class="col-sm-4 col">
                            <div class="row">
                                <label class="col-sm-7 control-label col">译员等级要求</label>
                                <div class="col-sm-5 col">
                                    <select class="form-control" v-model="formData.level_id">
                                        <option :value="item.level_id" v-for="item in level_list">{{item.level_name}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col" v-show="formData.task_type == '0'">
                            <label class="col-sm-5 control-label col">翻译形式</label>
                            <div class="col-sm-7 col">
                                <select class="form-control" v-model="formData.task_form_id">
                                    <option :value="item.task_form_id" v-for="item in task_form">{{item[0]}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-4 col">
                            <label class="col-sm-5 control-label col">翻译方式</label>
                            <div class="col-sm-7 col">
                                <select class="form-control" v-model="formData.methon_id">
                                    <option :value="item.methon_id" v-for="item in methon_list">{{item.methon_title}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-4 col">
                            <div class="row">
                                <label class="col-sm-5 control-label col">字数</label>
                                <div class="col-sm-7 col">
                                    <input type="text" class="form-control" :value="formData.font_nums" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col">
                            <label class="col-sm-5 control-label col">交稿时间</label>
                            <div class="col-sm-7 col">
                                <select class="form-control" v-model="formData.task_submit_time">
                                    <option :value="item.task_submit_time" v-for="item in task_submit_time">{{item.day_title}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-4 col">
                            <label class="col-sm-5 control-label col">保密时间</label>
                            <div class="col-sm-7 col">
                                <select class="form-control" v-model="formData.day_id">
                                    <option :value="item.day_id" v-for="item in task_secrecy_time">{{item.day_title}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <textarea class="form-control" rows="5" placeholder="翻译要求" v-model="formData.task_desc"></textarea>
                        </div>
                    </div>
                </form>
                <form class="form-inline">
                    <div class="form-group" v-show="formData.task_type == '0'">
                        <label>请输入您愿意支付的稿费额度：</label>
                        <input type="text" class="form-control" style="width:80px;" v-model="formData.task_money">
                        <label>大洋</label>
                    </div>
                    <button type="button" class="btn btn-primary" style="width:120px;float:right;" @click="publishMission" :disabled="disabled">发布任务</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                formData:{
                    task_type:0,
                },
                missionType:0,
                level_list:[],
                methon_list:[],
                task_form:[],
                task_secrecy_time:[],
                task_type:[],
                cate_list:[],
                task_submit_time:[],
                disabled:false
            }
        },
        created(){
            this.$http.get('apiv1/treleasetasks').then(res => {
                console.log(res.body);
                this.level_list = res.body.level_list;
                this.methon_list = res.body.methon_list;
                this.task_form = res.body.task_form;
                this.task_secrecy_time = res.body.task_secrecy_time;
                this.task_type = res.body.task_type;
                this.cate_list = res.body.cate_list;
                this.task_submit_time = res.body.task_submit_time;
                this.$set(this.formData,'level_id',this.level_list[0].level_id);
                this.$set(this.formData,'methon_id',this.methon_list[0].methon_id);
                this.$set(this.formData,'task_form_id',this.task_form[0].task_form_id);
                this.$set(this.formData,'day_id',this.task_secrecy_time[0].day_id);
                this.$set(this.formData,'task_type',this.task_type[0].task_type);
                this.$set(this.formData,'cate_id',this.cate_list[0].cate_id);
                this.$set(this.formData,'task_submit_time',this.task_submit_time[0].task_submit_time);
            },res => {

            });
        },
        computed:{
            user(){
                return this.$store.state.user.user;
            }
        },
        methods:{
            contentBlur(){
                this.$set(this.formData,'font_nums',this.formData.task_content ? this.formData.task_content.trim().split(' ').length : 0);
            },
            publishMission(){
                this.disabled = true;
                console.log(this.formData);
                var form = new FormData();
                for(let key in this.formData){
                    form.append(key,this.formData[key]);
                }
                this.$http.post('apiv1/treleasetasks',form).then(res => {
                    if(res.body.code == 200){
                        this.$notify({
                            title: '成功',
                            message: '任务发布成功',
                            type: 'success'
                        });
                        setTimeout(() => {
                            this.$router.push('/mission/'+res.body.task_id);
                        },2000);
                    }else{
                        this.disabled = false;
                    }
                },res => {
                    this.disabled = false;
                });
            }
        }
    }
</script>

<style scoped>
    select{
        border-radius:3px;
    }

    textarea{
        border-radius:3px;
    }

    .title{
        position:absolute;
        left:10px;
        line-height:34px;
    }

    .input{
        padding-left:65px;
    }

    .right .col{
        padding-left:5px;
        padding-right:5px;
    }
</style>
