<template>
    <div class="row m-b-15 align-items-end parentContainer">
        <div class="col">
            <!-- 1688 consent -->
            <div class="row m-l-0 m-r-0 m-b-15 animate__animated animate__tada animate__repeat-2 animate__delay-3s" v-if="!data.segments.some(item => item.id === 13 || item.id === 16)">
                <div class="col bg-white padding-15">
                    <div class="row">
                        <div class="col-4">
                            <img class="m-b-10 w-100" src="/images/1688_approved.png" />
                        </div>
                        <div class="col"></div>
                        <div class="col-4">
                            <img class="m-b-10 w-100" src="/images/best-rate-300x127.png" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row ">
                                <div class="col">
                                    <h5 class="m-b-0">Hi, {{$store.getters.getUserName}}</h5>
                                    <h4 class="m-t-0">A new <span class="bold">1688 payment</span> solution for you</h4>
                                    <p>Our team will access your 1688 account and pay on your behalf.</p>
                                    <p>To activate the service, <span class="bold text-underline text-complete pointer requestModal" data-type="requirements" @click="ServiceWaitingList">check requirements</span>.</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <div class="checkbox check-primary m-t-0">
                                                <input type="checkbox" v-model="acknowledge" id="acknowledge">
                                                <label for="acknowledge" style="white-space: pre-wrap;">I hereby acknowledge that I have read the requirements and my 1688 account is eligible for this service.</label>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="row">
                                <div class="col text-center">
                                    <div class="btn btn-lg block btn m-b-5 no-border text-white" :class="[{'bg-primary': acknowledge}, {'bg-primary-lighter': !acknowledge}]" :style="{ cursor: acknowledge ? 'pointer' : 'no-drop' }" @click="activateService">Activate Service</div>
                                    <!--<p class="text-danger fs-12 bold pointer">Didn't meet the requirements?</p>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" :class="[{'overflow-hidden': !expanded}]">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <!--<p>Our team will access your 1688 account and pay on your behalf.</p>-->
                                    <div class="row">
                                        <div class="col m-t-10" v-if="expanded">
                                            <p>1. Officially <span class="bold text-success all-caps">Authorized</span> by Alibaba 1688.</p>
                                            <p>2. <span class="bold text-success all-caps">No restrictions</span> on the amount you want to transfer.</p>
                                            <p>3. You can be sure your account will <span class="bold text-success all-caps">never freeze</span>, 100% guarantee.</p>
                                            <p class="m-b-20">4. You're handed a <span class="bold text-success all-caps">local invoice</span>, complete with tax information and line items for your records.</p>
                                            <p class="no-margin text-center hint-text pointer text-underline" @click="ServiceNotInterested">No thank you, I am not interested.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" v-if="!expanded">
                                <div class="col">
                                    <div class="m-b-0 m-t-5 d-flex justify-content-center text-complete text-underline cursor" @click="expanded = !expanded">Learn more</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- C2C consent -->
            <div class="row m-l-0 m-r-0 m-b-15 animate__animated animate__tada animate__repeat-2 animate__delay-3s" v-if="!data.segments.some(item => item.id === 29)">
                <div class="col bg-white padding-15">
                    <!-- <div class="row">
                        <div class="col-4">
                            <img class="m-b-10 w-100" src="/images/1688_approved.png" />
                        </div>
                        <div class="col"></div>
                        <div class="col-4">
                            <img class="m-b-10 w-100" src="/images/best-rate-300x127.png" />
                        </div>
                    </div> -->
                    <div class="row">
                        <div class="col">
                            <div class="row ">
                                <div class="col">
                                    <h4 class="m-t-0">Bank Transfer Security: Safeguard Your Transactions with <span class="bold">Enterprise Account Payment (公对公转账)</span></h4>
                                    <p>This payment is designed to facilitate CNY payments from <span class="bold text-primary">an enterprise bank account to your suppliers' enterprise bank accounts</span></p>
                                    <p class="m-t-15">With this method, you can:</p>
                                    <ul>
                                        <li>Enjoy a worry-free transaction experience</li>
                                        <li>Obtain detailed and transparent invoices</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col text-center">
                                    <!-- <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 class="btn btn-lg block btn m-b-5 no-border text-white requestModal pointer bg-primary" data-type="deleteMappingTransaction">Activate Service</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <modal-component class="animate__animated animate__fast animate__fadeIn" type="deleteMappingTransaction" styleType="fill-in" size="large">
                <c2c-confirmation-form-component
                    class="text-center"
                    section="activateService"
                    :data="data"
                >
                </c2c-confirmation-form-component>
            </modal-component>
            <modal-component small type="requirements">
                <div class="row" v-if="!failed">
                    <div class="col text-center">
                        <div class="row">
                            <div class="col text-center">
                                <div class="row m-b-20">
                                    <div class="col">
                                        <h3 class="all-caps">Service Requirements</h3>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <iframe width="100%" height="auto" src="https://www.youtube.com/embed/6OQG50XnAOg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                    </div>
                                </div>
                                <div class="row m-b-15 text-left">
                                    <div class="col">
                                        <h4>To active this the service, please ensure that:</h4>
                                        <p class="bold">1. Your 1688 account is linked with your Alipay account.</p>
                                        <p class="bold">2. Your Alipay account has real-name authorized. [text]</p>
                                    </div>
                                </div>
                                <div class="row text-left m-b-10">
                                    <div class="col">
                                        <p>If you fulfill the two requirements above, please click "activate" button to activate the service immediately</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="btn btn-lg btn m-b-5 btn-primary p-l-50 p-r-50" @click="activateService">Activate</div>
                                        <p class="no-margin text-center text-danger pointer text-underline" @click="failedRequierments">don't meet the requirements?</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" v-if="failed">
                    <div class="col">
                        <div class="row m-b-20">
                            <div class="col">
                                <h3 class="all-caps">How to fulfill the requirements for 1688 Payment</h3>
                            </div>
                        </div>
                        <div class="row m-b-15 text-left">
                            <div class="col">
                                <h4>You need to ensure your Alipay is verified & bound to your 1688 account.</h4>
                                <p class="bold">1. Download and sign up on Alipay app.</p>
                                <p class="bold">2. Complete registration and receive verification code.</p>
                                <p class="bold">3. Click on "Me" shortcut at the bottom of Alipay homepage.</p>
                                <p class="bold">4. Click on 'Settings'at top right.</p>
                                <p class="bold">5. Select "Account & Security", click on "Real Name Verification".</p>
                                <p class="bold">6. Click on "Verify now" ,  and submit the info requested.</p>
                                <p class="bold">7. You may use any verification method using passport.</p>
                                <p class="bold">8. Upload your passport photo and complete personal information</p>
                                <p class="bold">9. If Alipay shows "Verified", then it is successful.</p>
                            </div>
                        </div>
                        <div class="row text-left m-b-10">
                            <div class="col">
                                <p>For further enquiries, contact us via the chatbox.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </modal-component>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
                acknowledge: false,
                parameters: {
                    segment_id: ''
                },
                expanded: false,
                failed: false,
                part: 0
            }
        },
        methods: {
            activateService(){
                this.parameters = {
                    segment_id: 13
                };
                this.part = 1;
                if(this.acknowledge){
                    this.submit(this.route('api.company.segment.assign', this.data.id), 'post', 'activateService', true, false);
                }

                // location.reload();
            },
            ServiceWaitingList(){
                this.acknowledge = true;
                this.parameters = {
                    segment_id: 14
                };
                this.part = 2;
                this.submit(this.route('api.company.segment.assign', this.data.id), 'post', 'activateService', false, false)
            },
            failedRequierments(){
                this.failed = true;
                this.acknowledge = true;
                this.parameters = {
                    segment_id: 17
                };
                this.part = 3;
                this.submit(this.route('api.company.segment.assign', this.data.id), 'post', 'activateService', false, false)
            },
            ServiceNotInterested(){
                this.parameters = {
                    segment_id: 16
                };
                this.part = 4;
                this.submit(this.route('api.company.segment.assign', this.data.id), 'post', 'activateService', true, false);
                // location.reload();
            },
            successHandler(){
                if(this.part == 1 || this.part == 4){
                    location.reload();
                }
            }
        },
        mixins: [componentHandler]
    }
</script>
