@extends('layouts.base')
@section('title', '手动分红')
@section('content')
    <div class="right-titpos">
    </div>
    <div class="rightlist">
        @include('layouts.tabs')
        <div id="test-vue">
            <el-form ref="form" status-icon :model="form" :rules="rules"
                     label-width="100px"
                     @submit.native.prevent>

                <el-form-item label="分红名称" prop="bonus_name">
                    <el-row :gutter="3">
                        <el-col :span="12">
                            <el-input v-model="form.bonus_name"
                                      placeholder="请输入分红名称"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="分红金额" prop="bonus_amount">
                    <el-row :gutter="3">
                        <el-col :span="12">
                            <el-input placeholder="请输入分红金额"
                                      v-model="form.bonus_amount"
                                      onkeyup="if(isNaN(value))execCommand('undo')"
                                      onafterpaste="if(isNaN(value))execCommand('undo')">
                                <template slot="append">元</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="备注" prop="content">
                    <el-row :gutter="3">
                        <el-col :span="12">
                            <el-input placeholder="请输入备注"
                                      type="textarea"
                                      :rows="10"
                                      v-model="form.content">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="分红对象">
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <div class="grid-content bg-purple">
                                <template>
                                    <span v-for="(role, key) in role_config" style="margin-right:8px;">
                                        <input type="radio" v-on:change="changeValue()" v-bind:value="role.role_type" v-model="form.role_type" >[[role.type_name]]
                                    </span>
                                </template>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item v-if="form.role_type=='member_by_uids'" label="UIDS">
                    <el-row :gutter="3">
                        <el-col :span="12">
                            <el-input placeholder="请输入会员UID, 例:1,2,3"
                                      type="textarea"
                                      :rows="2"
                                      onkeyup="value=value.replace(/[^\d,，]|^[,，]+|[,，]+(?=[,，])/g, '')"
                                      v-model="form.uids">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item v-if="form.role_type!='member_by_uids'&&form.role_type!='supplier'&&form.role_type!='store_cashier'&&form.role_type!='store_boss'" label="选择等级">
                    <el-row :gutter="3">
                        <el-col :span="12">
                            <el-select style="width: 100%" v-model="form.level_id" placeholder="请选择等级">
                                <el-option
                                        v-for="item in role_config[form.role_type]['levels']"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.level_name">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="总分红金额" v-if="calculate.bonus_amount_total">
                    <el-row :gutter="3">
                        <el-col :span="12">
                            <el-input v-model="calculate.bonus_amount_total" :disabled="true">
                                <template slot="append">元</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="分红人数" v-if="calculate.bonus_count">
                    <el-row :gutter="3">
                        <el-col :span="12">
                            <el-input v-model="calculate.bonus_count" :disabled="true">
                                <template slot="append">个</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="每人" v-if="calculate.bonus_amount">
                    <el-row :gutter="3">
                        <el-col :span="12">
                            <el-input v-model="calculate.bonus_amount" :disabled="true">
                                <template slot="append">元/人</template>
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item>
                    <el-button type="success"
                               @click="onSubmit()"
                               :disabled="is_disabled"
                               v-loading="formLoading">手动分红
                    </el-button>
                    <el-button @click.native.prevent="trial()" v-loading="trialLoading">试算</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>

    <script>
        var app = new Vue({
            el: '#test-vue',
            delimiters: ['[[', ']]'],
            data() {
                let role_config = {!! $role_config?$role_config:'{}' !!};
                let calculate = JSON.parse('{}');
                var checkAmount = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('请输入分红金额'));
                    }
                    setTimeout(() => {
                        callback();
                    }, 1000);
                };
                var checkName = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('请输入分红名称'));
                    }
                    setTimeout(() => {
                        callback();
                    }, 1000);
                };
                // var checkContent = (rule, value, callback) => {
                //     if (!value) {
                //         return callback(new Error('请输入备注'));
                //     }
                //     setTimeout(() => {
                //         callback();
                //     }, 1000);
                // };

                return {
                    calculate: calculate,
                    form: {
                        bonus_name: '手动分红',
                        bonus_amount: '',
                        content: '',
                        role_type: 'member_by_uids',
                        level_id:"",
                    },
                    role_config: role_config,
                    formLoading: false,
                    is_disabled:false,
                    trialLoading: false,
                    rules: {
                        bonus_name: [
                            {validator: checkName}
                        ],
                        bonus_amount: [
                            {validator: checkAmount}
                        ],
                        // content:[{validator: checkContent}],
                    }
                }
            },
            methods: {
                changeValue() {
                    this.form.level_id = "";
                    console.log(this.form.level_id);
                },
                trial() {
                    this.trialLoading = true;
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            this.$http.post("{!! yzWebUrl('plugin.manual-bonus.admin.return.trial') !!}", {'bonus': this.form}).then(response => {
                                if (response.data.result) {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'success',
                                        duration: 3000
                                    });
                                    this.calculate = response.data.data;
                                } else {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'error'
                                    });
                                }
                                this.trialLoading = false;
                            }, response => {
                                console.log(response);
                            });
                        } else {
                            console.log('error submit trial!!');
                            return false;
                        }
                    });
                },
                onSubmit() {
                    // this.formLoading = true;
                    this.is_disabled = true;
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            this.$http.post("{!! yzWebUrl('plugin.manual-bonus.admin.return.sub') !!}", {'bonus': this.form}).then(response => {
                                if (response.data.result) {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'success',
                                        duration: 2000,
                                        showClose: true,
                                        onClose: function(){
                                            window.location.href = "{!! yzWebUrl('plugin.manual-bonus.admin.return.index') !!}"
                                        }
                                    });
                                } else {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'error'
                                    });
                                }
                                this.formLoading = false;
                            }, response => {
                                console.log(response);
                            });
                        } else {
                            console.log('error submit!!');
                            this.is_disabled = false;
                            return false;
                        }
                    });
                }
            }
        });
    </script>
@endsection