@extends('module.layouts.content')
@push('meta')

@endpush

@push('css')
<link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ theme_asset('app/css/element.css') }}">
<style>
    .body{
        background:#e3f1f2;
    }


    .container{
        width:1182px;
        margin:0 auto;
    }
    .container .banner{
        text-align: center;
    }
    .form h2{
        text-align: center;
        font:normal 24px/40px "microsoft yahei";
        padding: 20px 0;
    }
    .form .ruleForm{
        width: 600px;
        margin: 0 auto;
    }
</style>
@endpush
@push('js')

@endpush
@section('content')
<div class="body" id="app">
    <div class="banner">
        <img src="{{theme_asset('app/images/share/banner.jpg')}}?t=20210329" />
    </div>
    <div class="container">

        <div class="form" v-loading="loading">
            <h2>需求登记</h2>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="ruleForm">
                <el-form-item label="分类" prop="role">
                    <el-radio-group v-model="ruleForm.role">
                        <el-radio label="1">供应</el-radio>
                        <el-radio label="2">需求</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="行业" prop="trade">
                    <el-select v-model="ruleForm.trade" placeholder="行业" @change="changeTrade">
                        <el-option label="全部" value="0"></el-option>
                        <el-option
                                v-for="item in trade_list"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工种" prop="pro" >
                    <el-select v-model="ruleForm.pro" :disabled="job_select_status" :placeholder="job_placeholder">
                        <el-option label="全部" value="0"></el-option>
                        <el-option
                                v-for="item in job_list"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属地区" prop="area">
                    <el-input v-model="ruleForm.area"></el-input>
                </el-form-item>
                <el-form-item label="来晋时间">
                    <el-input v-model="ruleForm.time" placeholder="若已在晋江则可不填写"></el-input>
                </el-form-item>
                <el-form-item label="共享方式" prop="type">
                    <el-select v-model="ruleForm.type" multiple placeholder="请选择活动区域">
                        <el-option label="小时工" value="1"></el-option>
                        <el-option label="劳务派遣" value="2"></el-option>
                        <el-option label="委托招聘" value="3"></el-option>
                        <el-option label="服务外包" value="4"></el-option>
                        <el-option label="其它" value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="可提供/总需求人数" prop="number">
                    <el-input v-model="ruleForm.number" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="员工薪酬" prop="salary">
                    <el-input v-model="ruleForm.salary"></el-input>
                </el-form-item>
                <el-form-item label="其他备注" prop="remark">
                    <el-input type="textarea" v-model="ruleForm.remark" rows="5"></el-input>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-switch v-model="ruleForm.status"></el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
                    <el-button @click="back">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="bottom">
            <img src="{{theme_asset('app/images/share/bottom.jpg')}}" />
        </div>
    </div>

</div>

@endsection
@section('script')
<script src="{{theme_asset('app/js/vue.min.js')}}"></script>
<script src="{{theme_asset('app/js/axios.js')}}"></script>
<script src="{{theme_asset('app/js/element.js')}}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                ruleForm: {
                    area: '',
                    number: '',
                    status: true,
                    type: [],
                    salary: '',
                    desc: '',
                    trade:'',
                    pro:'',
                    time:'',
                    remark:'',
                    role: 0,
                    id:0
                },
                rules: {
                    trade: [
                        { required: true, message: '请选择行业', trigger: 'change' }
                    ],
                    pro: [
                        { required: true, message: '请选择工种', trigger: 'change' }
                    ],
                    area: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' }
                    ],
                    number: [
                        { required: true, message: '请填写人数', trigger: 'blur' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个共享方式', trigger: 'change' }
                    ],
                    salary: [
                        { required: true, message: '请输入员工薪酬', trigger: 'blur' }
                    ],
                    desc: [
                        { required: true, message: '请填写描述', trigger: 'blur' }
                    ],
                    role: [
                        { required: true, message: '请选择分类', trigger: 'change' }
                    ]
                },
                trade_list:'',
                job:'',
                job_list: '',
                job_select_status:true,
                job_placeholder: '请先选择行业',
                loading:true,
            };
        },
        methods:{
            changeTrade(e){
                if(e == 0){
                    this.job_list = [];
                    this.job_select_status = true;
                    this.job = '';
                    this.job_placeholder = "请选择具体行业";
                    this.ruleForm.pro = '';
                }else{
                    this.job_list = this.trade_list[e-1].sub;
                    this.job_select_status = false;
                    this.job = '';
                    this.job_placeholder = "请选择";
                }

            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = this.$loading({
                            lock: false,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        axios.post('save',this.ruleForm).then(response => {
                            if(!response.data.status){
                                this.$message.error(response.data.msg);
                                return false;
                            }else{
                                this.$alert(response.data.msg, '提交成功', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        window.location.href = "{{ route('share.my') }}"

                                    }
                                });
                            }
                            this.loading.close();
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            back(){
                window.location.href = "{{ route('share.my') }}"
            }
        },
        created(){
            axios.post("/share/getSelectData").then(response => {
                var trade_list = new Array();
                response.data.forEach(function(item){
                    var trade_item = new Object();
                    trade_item.value = item.value;
                    trade_item.label = item.label;
                    trade_item.sub = item.sub;
                    trade_list.push(trade_item)
                });
                this.trade_list = trade_list;
                var id = '{{ $id }}'
                if(id > 0){
                    axios.post("{{ route('share.getmyinfo') }}",{id:id}).then(response => {
                        if(response.data.status == 1){
                            if(response.data.data != null){
                                response.data.data.status = (response.data.data.status == 1);
                                this.changeTrade(response.data.data.trade);
                                this.ruleForm = response.data.data;
                            }
                        }else{
                            this.$alert(response.data.msg, '温馨提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    window.location.href = "/";
                                }
                            });
                        }
                        this.loading = false;
                    });
                }else{
                    this.loading = false;
                }
            });
        }
    })

</script>
@endsection