<template>
    <div class="row bg-white padding-25">
        <div class="col">
            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
            <div class="row justify-content-center" v-show="!isLoading">
                <div class="col">
                    <div class="row">
                        <div class="col">
                        <h3>To activate the service, please take note of the following important details:</h3>
                        <ol class="m-t-15">
                            <li class='text-left'>The minimum amount is <strong>CNY 10,000</strong> for each transfer.</li>
                            <li class='text-left'>The purchase order must be filled in before making payments.</li>
                            <li class='text-left'>The processing time for each transaction is <strong>3-7 working days</strong>.</li>
                        </ol>
                        </div>
                    </div>
                    <div class="row m-t-10">
                        <div class="col">
                            <div class="checkbox check-primary m-t-0">
                                <input type="checkbox" v-model="acknowledge_c2c" id="acknowledge_c2c">
                                <label for="acknowledge_c2c" style="white-space: pre-wrap;">I hereby acknowledge that I have read the requirements for this service.</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col p-r-5">
                            <div class="btn btn-lg block btn m-b-5 no-border bg-master-lighter" data-dismiss="modal">Cancel</div>
                        </div>
                        <div class="col p-l-5">
                            <div class="btn btn-lg block btn m-b-5 no-border text-white" :class="[{'bg-primary': acknowledge_c2c}, {'bg-primary-lighter': !acknowledge_c2c}]" :style="{ cursor: acknowledge_c2c ? 'pointer' : 'no-drop' }" @click="activateServiceC2C">Activate Service</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
    export default {
        data(){
            return {
                acknowledge_c2c: false,
                parameters: {
                    segment_id: ''
                },
            }
        },
        methods: {
            activateServiceC2C(){
                this.parameters = {
                    segment_id: 29
                };
                if(this.acknowledge_c2c){
                    this.submit(this.route('api.company.segment.assign', this.data.id), 'post', 'activateService', true, true);
                }
                // location.reload();
            },
            successHandler(){
                location.reload();
            }
        },
        mixins: [componentHandler, ModalFormHandler]

    }
</script>
