@extends('layouts.base')
@section('title', '工单列表')
@section('content')
<style>
.el-upload__input {
        opacity: 0;
        width: 0;
}
.content{
    background: #eff3f6;
    padding:10px!important;
}
.con{
    padding-bottom:40px;
    border-radius: 8px;
    position:relative;
}
.con .setting .block{
    padding:10px;
    background-color:#fff;
    border-radius: 8px;
    margin-bottom:10px;
}
.con .setting .block .title{
    font-size:18px;
    margin-bottom:15px;
    display:flex;
    align-items:center;
}
.con .confirm-btn{
    width: 100%;
    position:absolute;
    bottom:0;
    left:0;
    line-height:63px;
	background-color: #ffffff;
	box-shadow: 0px 8px 23px 1px 
		rgba(51, 51, 51, 0.3);
    background-color:#fff;
    text-align:center;
}
.con .setting .block  .tabs .tab{
    width: 115px;
	height: 36px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: #666666;
    font-size: 14px;
    margin-right:10px;
    cursor:pointer;
}
.other{
    background-color: #29ba9c;
	border-radius: 18px;  
    color:#fff!important;
}

b{
    font-size:14px;
}
</style>

<div id="app">
    <template>
        <div class="con" >
            <div class="setting">
            <el-form ref="first_list"  label-width="15%" >
                <div class="block">
                <div class="title"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>选择问题分类</b></div>
                    <el-form-item label="选择分类:">
                        <el-select v-model="category_id" placeholder="请选择" style="width:360px;">
                            <el-option
                            v-for="item in category_list.slice(1,category_list.length)"
                            :key="item.value"
                            :label="item.label"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>   
                </div>
                <div class="block">
                <div class="title"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>基本问题</b></div>
                    <div >
                
                        <el-form-item label="站点："><span v-text="site_url"></span></el-form-item>
                        <el-form-item label="问题标题："><el-input v-model="question_title" placeholder="请输入内容" style="width:783px;"></el-input></el-form-item>
                        <el-form-item label="问题描述：">清晰的描述问题产生的操作流程，问题结果，期望的正确结果；<br>
                        如果是涉及到分销佣金、分红、返现等模式计算，要清晰的讲解设置、会员关系、正确的结算结果、错误的计算结果等；<br>
                        如果您觉得下方编辑框操作麻烦可使用附件上传按钮 直接上传Word、excel等说明文档。</el-form-item>
                        <el-form-item >
                        <tinymce v-model="question_describe" style="width:70%;"></tinymce>
                        <div class="form-group" style="margin-bottom:20px;">
                            <el-upload style="margin-top:20px;" class="upload-demo"
                                       :on-remove="removeUP"
                                       action="{!!yzWebFullUrl('setting.work-order.upload-file')!!}"
                                       :on-success="onSuccess"
                                       :before-remove="beforeRemove" multiple
                                       :limit="3"
                                       :before-upload="beforeUpload"
                                       :on-exceed="handleExceed"
                                       :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">支持上传excel、word、txt和图片等文件</div>
                            </el-upload>
                        </el-form-item>
                        </div>
                        </div>
                    </div>
                    <div class="block">
                    <div class="title"><span style="width: 4px;height: 24px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>加密信息</b><span style="font-size:12px;margin-left:20px;display:inline-block;">加密信息(此部分信息将做加密处理，为方便您的问题尽快处理请放心填写)</span></div>
                    <div class="password_box" >
                        <el-form-item label="站点网址：">
                            <el-input v-model="first_list.website_url" :disabled="nameShow" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="创始人账号：">
                            <el-input v-model=" first_list.founder_account" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="创始人密码：">
                            <el-input type="password" v-model=" first_list.founder_password" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="服务器IP：">
                            <el-input v-model=" first_list.server_ip" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="服务器账号：">
                            <el-input v-model=" first_list.root_username" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="服务器密码：">
                            <el-input type="password" v-model=" first_list.root_password" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="服务器SSH端口：">
                            <el-input v-model=" first_list.ssh_port" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="数据库访问地址：">
                            <el-input v-model=" first_list.database_address" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="数据库用户名：">
                            <el-input v-model=" first_list.database_username" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="数据库密码：">
                            <el-input type="password" v-model=" first_list.database_password" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="网站目录位置：">
                            <el-input v-model=" first_list.root_directory" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            如果您的服务器由官方部署，可不填写网站目录位置！
                        </el-form-item>
                        <el-form-item label="联系QQ：" style="margin-top:20px;">
                                    <el-input v-model="first_list.qq" style="width:760px;"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号：">
                                    <el-input v-model="first_list.mobile" style="width:760px;"></el-input>
                        </el-form-item>
                    </div>
                    </div>
                </div>
                </el-form>
                <div class="confirm-btn">
            <el-button type="primary" @click="submit">提交</el-button>
            </div>
            </div>
        </div>
    </template>
</div>
<script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
<script src="{{resource_get('static/yunshop/tinymceTemplate.js')}}"></script>
<script>
    var vm = new Vue({

        el: "#app",
        delimiters: ['[[', ']]'],
        data() {
            let site_url = {!! $site_url !!};
            let category_list = {!! $category_list !!};
            let first_list ={!! $first_list !!};
            category_list.map(item => {
                item.value = item.id;
                item.label = item.name;
            })
            console.log(first_list,'接的数据');
            // 判断为空的时候
               if (first_list.length==0) {
                   return;
               }
            if (Object.keys(first_list).length!=0) {
                for(let key  in first_list){
                if (first_list[key]==false) {
                    first_list[key]=''
                }
             }
            }

            return {
                category_list: category_list,
                value: 0,
                issubshow: true,
                active: 1,
                title: '提交工单',
                question_title: '', //问题标题,
                question_describe: '', //问题描述
                site_url: site_url, //站点url
                first_list: first_list,
                nameShow: false,
                fileList: [],
                category_id:category_list[1].id , //分类id
                thumb_url:[],//文件链接数组
            }
        },
        created() {

            console.log(this.category_list)
            // this.getCata()
            window.addEventListener('beforeunload', e => {
                window.onbeforeunload = null
            });

        },
        methods: {
            tap(item){     
                 this.category_id = item.id
            },
            // tapOne() {
            //     if (this.value == ''&&this.value==0) {
            //         this.$message.error('请选择分类');
            //         return;
            //     }
            //     this.category_list.map(item => {
            //         if (item.value == this.value) {
            //             this.category_id = item.id
            //             this.title += '--' + item.label
            //         }
            //     })

            //     this.active = 2
            //     this.issubshow = false
            // },
            // 上传文件之前的函数
            beforeUpload(file){
                 console.log(file,'文件')
            },
             delHtmlTag(str){
              return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
                  },
            // 提交
            submit() {
                if (this.question_title=='') {
                    this.$message.error('请输入问题标题');
                    return;
                }
                if (this.question_describe=='') {
                    this.$message.error('请输入问题描述');
                    return;
                }else{
                    this.question_describe=this.question_describe.replace(/&nbsp;/ig, "<br>");
                }
                if (this.first_list.website_url=='') {
                    this.$message.error('请输入站点网址');
                    return;
                }
                if (this.first_list.founder_account=='') {
                    this.$message.error('请输入创始人账号');
                    return;
                }
                if (this.first_list.founder_password=='') {
                    this.$message.error('请输入创始人密码');
                    return;
                }
                if (this.first_list.server_ip=='') {
                    this.$message.error('请输入服务器ip地址');
                    return;
                }
                if (this.first_list.root_username=='') {
                    this.$message.error('请输入服务器账号');
                    return;
                }
                if (this.first_list.root_password=='') {
                    this.$message.error('请输入服务器密码');
                    return;
                }
                if (this.first_list.ssh_port=='') {
                    this.$message.error('请输入端口');
                    return;
                }
                if (this.first_list.database_address=='') {
                    this.$message.error('请输入数据库访问地址');
                    return;
                }
                if (this.first_list.database_username=='') {
                    this.$message.error('请输入数据库用户名');
                    return;
                }
                if (this.first_list.database_password=='') {
                    this.$message.error('请输入数据库密码');
                    return;
                }
                if (this.first_list.qq=='') {
                    this.$message.error('请输入qq');
                    return;
                }
                if (this.first_list.mobile=='') {
                    this.$message.error('请输入手机号');
                    return;
                }
                console.log(this.first_list, this.forminfo, '提交的form表单');
                console.log(this.category_id, '分类ID');
                this.question_describe=this.delHtmlTag(this.question_describe);
                let data = {
                    category_id: this.category_id,
                    question_title: this.question_title,
                    question_describe: this.question_describe,
                    first_list: this.first_list,
                    thumb_url:this.thumb_url
                };
                this.$http.post('{!!yzWebFullUrl('setting.work-order.store')!!}', {data}).then(res => {
                    console.log(res, '99999');
                    res = res.body;
                    if (res.result == 1) {
                        this.$message.success(res.msg);
                        window.location.href = "{!! yzWebFullUrl('setting.work-order.index') !!}";
                    } else {
                        this.$message.error(res.msg)
                    }
                    console.log(res, '数据');
                })
            },
            edidInfo() {
                console.log('修改显示');
                // this.form.name = ''
                this.nameShow = true
            },
            // 上传成功的
            onSuccess(res, file, fileList) {
                if (res.result == 1) {
                        this.thumb_url.push(res.data.thumb_url);
                    this.$message.success('上传成功')
                } else {
                    this.$message.error(res.msg)
                }

            },
            removeUP(file, fileList){
                this.thumb_url.forEach((item,index)=>{
                    if(item==file.response.data.thumb_url){
                        this.thumb_url.splice(index,1)
                    }
                })
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },


        },
    })
</script>
@endsection